When developing a web site, using a reset.css stylesheet is one of the best ways to achieve cross-browser consistency. As Eric Meyer explains, “The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.” If you’re not familiar with reset stylesheets, you can read all about them here and here.
Reset stylesheets have become increasingly common in the last few years as they’ve found their way into frameworks like Blueprint and popular WordPress themes. Yet some designers still don’t understand the purpose of reset.css, or know that using one means several common HTML elements will need to be restyled. Too often, the use of reset.css results in strange behavior from infrequently-used HTML elements, like bulleted lists.
Below are 5 things you absolutely need to do whenever you use a reset.css stylesheet. Most projects will probably require that you do more than this, but make this your starting point for avoiding future HTML wackness.
1. Style headers and paragraphs
A reset stylesheet normalizes h1-h6 and removes the padding from p tags. Create some basic styling for each of these, even if you don’t think you’ll use them.
h1 {font-size: 28px;}
h2 {font-size: 24px;}
h3 {font-size: 18px;}
h4 {font-size: 14px;}
h5 {font-size: 12px;}
h6 {font-size: 10px;}
p {font-size: 12px; padding-bottom: 18px;}
2. Style ordered and unordered lists for body copy
Reset stylesheets include list-style: none for both ul and ol list-items. This is great for creating semantic menus without pesky bullets floating around, but you’ll need to add support for bullets and numbers in your content area.
.post ol li {list-style-type: decimal; padding-bottom: 0.85em;}
.post ul li {list-style-type: disc; padding-bottom: 0.85em;}
(Should you hang your bullets in the margin? Yes. Or no. Personally, I don’t think it works on the web, but whichever you choose, make it intentional.)
3. Style strong and em
Reset stylesheets return both strong and em to font-style: normal Bring styling for these tags back with
em {font-style: italic;}
strong {font-weight: bold;}
4. Style blockquote
I know it’s old-skool, but blockquote isn’t going anywhere; Tumblr and WordPress themes both need it, and it will be included in HTML5. (Learn more about blockquote and how to use it correctly – it’s not just for indenting!) Give your blockquote the CSS love it deserves with indentation and maybe a little background color.
blockquote {margin: 0px 36px; background-color: #f5f5f5;}
5. Style :focus
If you’re using Eric’s reset.css that includes :focus {outline: 0;}, pay attention to his comments and remember to style the :focus on your form fields. Your users still need a visual affordance that they’re interacting with your form fields.
Wren, you left out one CRUCIAL addition: Do NOT leave line-height at 1, as in reset. Good typesetting uses a default of 1.15, at minimum. A line-height of 1 makes for nearly unreadable text, especially in wide measures. All too often, people seem to blindly use reset.css and produce hard-to-read sites. I really wish Meyer had chosen a SENSIBLE default line-height, because 1 is not it.
September 22, 2011
I couldn’t agree more with the Chris Raymond. In fact, the first thing I do before any of these things is create a rule for my body and apply my default font size, font family, line height and color. And yes, line-height should be significantly greater than 1. In fact, for a full column of text my line height is usually about 1.5, e.g. 12/18 or 14/21.
November 18, 2011
Don’t forget to add focus styles for links too. People navigating a site via the keyboard need that to see links they are focused on too.
Also, remember that the aim of Eric Meyer’s original reset css was exactly as it says in the title: to reset _everything_. The idea was that developers would then restyle _everything_ to suit them and the genuinely terrible defaults that it gives you ensure that you think about it. Sadly, especially with :focus styles, people didn’t think about it (which is why the :focus reset is not in the latest version of the reset).
One final thing, I like to remove selectors that I am unlikely to use in my markup (, and tend to go pretty quickly). That way I can slim down my reset.css and still get all the effects.
November 18, 2011
Oops, lost some HTML in that comment. I meant to say that <kbd>, <var> and <tt> get kicked out of my reset pretty quickly.
November 18, 2011
Regarding the line-height issue. The reset should be used as an initial stylesheet and then additional stylesheets should be used to over-ride those values, to your tastes. Wren, perhaps you could go into more detail on this as it relates to you. Your typography looks pretty good on this site.
The comments could use a little extra line height, but otherwise, nice.
December 21, 2011