HTML and CSS Reference
In-Depth Information
prizes for guessing what the
background-color
property does. Even if you want the default black text on a white
background, you should specify it in the
body
style rule:
body {
font-family: Arial, Helvetica, sans-serif;
color: #000; /* black */
background-color: #FFF /* white */
}
This sets the font and text color for the whole page, but you can override any of these properties in styles for
headings, sidebars, or any other part of the document.
LoCaL StyLe SheetS and the CaSCade
Some users create local style sheets, usually to compensate for a disability, such as poor vision, color
blindness, or dyslexia. For example, a person with poor eyesight could create a local style sheet with the
following rule:
body {
font-size: 250%
!important;
background-color: #000; /* black */
color: #FFF; /* white */
}
This increases the font size to 250%, and displays white text on black. CSS allows you to override the normal
rules of specificity (see
Chapter 3
) for a single style declaration by adding the
!important
keyword just
before the semicolon. in this example, the font size is marked as important, but the background and text
color are not.
When browsers encounter a local style sheet, they use the following order of priority (most important first):
1.
Rules marked as important by the user
2.
Rules marked as important by the designer
3.
Rules not marked as important by the designer
4.
Rules not marked as important by the user
if you specify black text on a white background, the browser will honor your styles and ignore the user's
preference. The danger is if you specify only the text color as black, and don't bother to specify a background
color. in that case, the user's background color and your text color will both be honored—resulting in black
text on a black background.
Some designers misuse the
!important
keyword, adding it liberally to style rules when they fail to resolve a
conflict. Don't do it. you should rarely, if ever, use
!important
in a style sheet.
Formatting Text
You can format text in a variety of ways using the properties in Table
4-4
. The table lists CSS2.1 properties, which
are supported by all browsers, plus a selection of properties from the draft CSS3 Text module that have been
implemented by some browsers.
