TOOLS - CSS: Professional Techniques for Modern Layout - page 33

A lot of people use this, mostly because it's simple. h e problem for others is that this applies
to all elements in the document, including form elements like text inputs and select boxes.
Since browsers currently handle CSS on form elements in very dif erent ways (and some won't
apply it at all), the “all elements” approach means that forms get very inconsistent as a result
of trying to make the browsers more consistent with the reset.

So more complicated resets were developed. One fairly popular reset is available at meyer-
web.com/eric/tools/css/reset . It starts out like this:

html , body , div , span , applet , object , iframe ,
h1 , h2 , h3 , h4 , h5 , h6 , p , blockquote , pre ,
a , abbr , acronym , address , big , cite , code ,
del , dfn , em , font , img , ins , kbd , q , s , samp ,
small , strike , strong , sub , sup , tt , var ,
b , u , i , center ,
dl , dt , dd , ol , ul , li ,
fieldset , form , label , legend ,
table , caption , tbody , tfoot , thead , tr , th , td {
margin : 0 ;
padding : 0 ;
border : 0 ;
outline : 0 ;
font-size : 100% ;
vertical-align : baseline ;
}
body {
line-height : 1 ;
}

35

Wow! h at's a lot of elements. h e reason to do it that way is to select all of the elements that
aren't form inputs ( input , select , textarea ) and make them act in similar ways. h e
i rst rule explicitly sets margin, padding, border, and outline to zero, and forces all elements to
the same font size and text vertical alignment. h e second rule sets the body element to a
reduced line height, and that value is inherited by all of the elements that descend from the
body element.

h ere are more rules in the meyerweb reset, including some that remove list bullets and
auto-generated quote marks around the blockquote and q elements, among others. Again,
the underlying point is to get all browsers as much on the same page as possible before
starting to write the CSS that will make the page look pretty.

At this point you might be thinking, “Wait a minute, that means I have to undo all the stuf I
just did! I never want the page to have a line-height of one—that's too cramped! And I
never want to mess with the vertical alignment of superscripts and subscripts either!”

h ose are all valid concerns. What you do is modify a style sheet to meet your preferences.
Let's say you always start with a line-height of 1.4 , to get that nice airy feel to your text.
Just modify that line of the reset: