HTML and CSS Reference
In-Depth Information
Replace the color Attribute with CSS
Move all descriptions of color out of the HTML document and into the CSS stylesheet.
<body bgcolor="#FFFFFF" text="#000000">
<h2><font color="#AA0000">Today's News</font></h2>
body {color: black;
background-color: white; }
h2#today { color: #AA0000; }
...
<body>
<h2 id="today">Today's News</h2>
Motivation
Color attributes are not allowed in XHTML strict. They describe appearance, not meaning, and they do not work
in non-GUI browsers such as Lynx or screen readers. They should be replaced by semantic class attributes
mapped to CSS rules.
CSS will make it much easier to maintain a consistent color scheme across a site. It will also make it much
easier to update and experiment with new color schemes. In addition, it enables you to provide different but
equivalent noncolor styles to be used when the document is printed on a black-and-white printer.
Potential Trade-offs
Very old browsers may not recognize the CSS rules, so a few details may not come across, but we're talking
truly ancient browsers here. Even the first and buggiest third-generation browsers that supported CSS at all
supported this much.
Mechanics
Moving color from HTML into CSS differs from the last few refactorings because color is always specified with an
attribute rather than a specific element. With the partial exception of font , usually an element is already
present in an obvious location to which you can attach the styles. At most, you should just have to add an id or
class attribute to it so that you can address it from CSS. Sometimes you don't even have to do that.
Table 4.4 lists the various color attributes you may encounter and the CSS equivalents.
Table 4.4. Colors
HTML Attribute
Used On
CSS Property
font , basefont
color
color
body , table , tr , th , td
bgcolor
background-color
text
body
color
 
Search WWH ::




Custom Search