HTML and CSS Reference
In-Depth Information
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.
CSS pseudo-classes
You use CSS pseudo-classes to add special query capabilities to some selectors. The syntax to apply
pseudo-classes looks like the following:
Search WWH ::
Custom Search