Resetting Styles with CSS
This is how your browser styles markup. All content displayed between the two dashed lines is styled
only with your browser’s default CSS. As you can see, browsers
add stuff like padding and margins to different markup elements, such as heading, paragraph, and list tags.
These default browser styles are sometimes useful, but can interfere with layout, typography, and other aspects of your
site’s design. Using a CSS Reset, you can neutralize the many disparate
browser defaults and establish a clean foundation for applying CSS consistently across browsers.
There are many CSS Resets available, including everything from very basic
resets to comprehensive resets consisting of many styles. There isn’t a “best” CSS Reset for all
designs, only a best CSS Reset for your design. To help you find the perfect CSS-reset styles,
CSSresetr lets you try all the best CSS Resets on a variety of web pages
– even your own.
How to use CSSresetr
CSSresetr is easier than sleeping. Here’s how it works:
- Select a CSS Reset from the left dropdown menu
- Select a web page from the right dropdown menu
- Experiment and have fun! :)
Your chosen CSS Reset will be applied to your chosen content.
There are many different types of HTML content available, so
have fun experimenting. To clear a reset, just select “[none]” or pick a different
reset. By applying different resets to different types of content, you can see the results and choose the
best reset styles for your design.
Once you find the perfect reset, visit the
CSS Reset Library
to download the code.
Additional notes
Here is some additional information about using CSS Resets and CSSresetr.
Using CSS Resets
- Resets aren’t for everyone or every project. It is important to understand what you are doing.
- Be sure to “restyle” any reset properties – after neutralizing default browser styles, be sure to
apply your own styles to anything that needs it. By ensuring that form elements, hyperlinks, and other key elements
are well-styled, you help make your site usable for all visitors.
Using CSSresetr
- For now, JavaScript is required to use the site.
- So far, the site tests successfully on Firefox, Opera, Chrome, Safari, and IE. If you find a bug, let me know.
- The only styles applied to the test content are
background:#E1EDDB and overflow:auto,
applied to the <pre> tag. This is to enhance usability by highlighting the actual reset code
and preventing needless scrolling. No other styles are applied to any content within the test area.
- CSS-Reset styles are powerful – as you try the different Resets, you’ll see the CSSresetr logo change
size, position, and so on. I tried to prevent this by using highly-specific CSS selectors to apply
some basic styles, but the Resets are just too powerful1.
For questions and comments send an email via my contact form.
1Actually, I’m just too lazy to re-style all of the reset properties –
there’s just too many styles applied by the different CSS Resets.
About CSSresetr
CSSresetr makes it easy to choose the perfect reset styles
for your design. I built the site during an icy-cold November weekend and launched on Thanksgiving of 2010. The site was meticulously hand-crafted with
HTML, PHP, CSS,
jQuery, and plenty of delicious coffee.
Why? Because I’ve been a fan of CSS Resets since first discovering the Universal Reset way back in 2005. CSS resets facilitate
designs that display cleanly and consistently across browsers. Neutralizing browser variation provides a level foundation for designing beautiful websites.
Designing over the years, I’ve collected many resets, snippets, tutorials, demos, articles, critiques,
and just about anything else related to resetting default browser styles. In 2007, this information inspired two articles,
a killer collection of CSS resets
and a follow-up with even more killer CSS resets.
These articles are basically massive lists of reset styles – useful for quick reference or grabbing what you need,
but not as useful for actually finding the best reset for the job. CSSresetr bridges the gap by combining a
library of Resets with an interface for checking them out on different types of HTML content.
CSSresetr is a work in progress. To suggest a reset, ask a question, or make a comment,
drop a line.
Thanks for visiting :)
