HTML and CSS Reference
FIGURE 3-8 Width and height used to create a nice (and common) page template.
The BODY element sets its margin to 0 pixels, meaning that empty space will be left between the page
content and browser's edges. The HEADER element takes up the entire width of the screen and just
80 pixels of the height. The DIV, with an ID of main, gets the entire height of (remaining) screen and limits
itself to a fixed 930 pixels width. More interestingly, the margin of the DIV is first set to 0 and then the left
margin is overridden to the special value of auto, meaning that the margin will be adjusted automatically
by the browser to center the content.
Note When it comes to width and height, you also have min/max subproperties to define a
minimum/maximum width or height. The properties are min-height , max-height , min-width,
and max-width . It should also be noted that width and height properties refer to the size of
the content and don't count for padding, borders, and margins.
Advanced CSS scenarios
So far, you have seen only basic CSS selectors—ID, tag names, and custom classes. However, the CSS
syntax for selectors is much more rich and sophisticated than this. A bunch of built-in pseudo-classes
and operators can be combined together and define a sort of powerful query language. In this way,
you can select a very specific set of HTML elements to style.
You use CSS pseudo-classes to add special query capabilities to some selectors. The syntax to apply
pseudo-classes looks like the following: