HTML and CSS Reference
In-Depth Information
Listing 10-10.
Resetting browser default styles
header, hgroup, nav, section, article, aside, footer,
figure, figcaption, details, summary {
display: block;
}
html, body, figure, dt, dd, li, form, fieldset, legend,
input, select, textarea, button {
padding: 0;
margin: 0;
}
p, ul, ol, dl, table, blockquote {
padding: 0;
margin: 0 0 1.5em;
}
input, button, textarea, select, optgroup, option {
font-family: inherit;
font-size: inherit;
}
fieldset {
border: 0;
}
We've completely eliminated padding and margins from a number of elements that have default padding or
margins, but for another set of elements we're declaring a standard
1.5em
bottom margin (one and a half
times the font size), with no margins on the top, left, or right sides. This ensures we still have some vertical
spacing between paragraphs, lists, tables, and block quotations. Most browsers add default vertical
spacing with margins both above and below these elements. By switching to a bottom margin only, we
gain more control over where the tops of these elements will be, especially useful when elements need to
align horizontally.
After cleaning the slate with a CSS reset we can start to build up more layers of presentation, working
more or less from the top of the page to the bottom, and from the background to the foreground as
elements nest and form layers over each other. The very first thing we'll work on is a backdrop for the
entire page.
Multiple Background Images
Background images—using the
background-image
,
background-position
, and
background-repeat
properties we first covered in Chapter 5—have been part of CSS from the very beginning. Backgrounds
are a cornerstone of a site's visual design and there are a million and one ways to use background images
to great effect. However, designers were always limited to one image per element (though the image could
tile and repeat infinitely within that element). Any visual effect that demanded more than one background
required more elements to carry them, often leading to nested presentational
div
s or convoluted
workarounds. CSS3 finally allows multiple background images in a single element, simply by adding
multiple, comma-separated values to the same properties we already have:
