Style Sheet Tips and Tricks 427CSSStyle Sheet Tips and TricksWeb Design in a Nutshell, eMatter EditionStyle sheets introduce the ability to specify type size in pixels. This translates better
across platforms because the size of the type will stay fixed in relation to the other
elements (like graphics) on the page. The result is more predictable page layouts.
However, this recommendation comes with a warning: text specified in pixels
cannot be printed legibly by Windows machines. Windows maps the pixels
directly to laser printer dots, making type too tiny to read. So if your page needs
to be printed, stick with point sizes. If the allure of pixel type measurements is too
strong, be sure to provide a “print” version of your web page where it can be
easily found.
Setting BODY Color
Setting a color for the BODY element will make all the text elements on the page
your chosen color, but it will also turn your horizontal rules (
) into solid rules
(not 3-D shaded as normally displayed) of your chosen color. This is mostly true
for older browsers and is incorrect behavior—color values should not effect
s.
BODY { color: green; }Unfortunately, at this point, the only current workaround for this problem is to list
every element on the page except
s as shown below:
H1, H2, H3, P, UL, OL, PRE, TABLE { color: purple; }Setting BODY Font
Similar to the body color problem, specifying a font and size for the body element
will apply to all the elements on the web page contained in it. For example, the
following code specifies 12pt serif text for the body font:
BODY { font: 12pt serif; }The problem is that in some browsers, this rule will apply to all theH1s,pretext
and text enclosed intags, because they will all inherit the body’s values.
They shouldn’t, but in some browsers, they do anyway.
The only solution is to provide style sheet rules for all the elements on the page,
which should override the higher-level body settings. You can specify the type in
points, but it is more democratic to use absolute values as shown below:
BODY { font: 12pt serif; }
H1 { font-size: xx-large; }
H2 { font-size: x-large; }
H3 { font-size: large; }
PRE, TT, CODE { font-size: medium monospace; }Making Padding Behave in Netscape
Although a background should always fill an element’s padding out to its border,
Netscape Navigator needs a little extra help to get it right. Anywhere padding is
used with a background color, add the following declaration:
{ border: 1px solid none; }