HTML and CSS Reference
In-Depth Information
Deprecated Approaches to Color
Because CSS was not part of the original HTML specifications, older HTML code used
HTML attributes to define page colors. If you work with older Web pages, you may
encounter some of these deprecated attributes. For example, the
bgcolor
attribute
in the
<body>
tag was used to define the background color for an entire page. To define
the text color for the entire page, the
text
attribute was used. Both attributes required
the page author to enter either a hexadecimal color value or a recognized color name.
Thus, the following code set the page background to yellow and the page text color to
sky blue with the hexadecimal color value 99CCFF:
<body bgcolor=”yellow” text=”#99CCFF”>
To color a section of text, page authors enclosed the text within a two-sided
<font>
tag, which supported several design attributes. One of these,
color
, defined the font
color of the enclosed text. For example, the following deprecated code sets the text
color of an
h1
heading to green:
<h1><font color=”green”>Sunny Acres</font></h1>
These attributes, as well as the
<font>
tag, have been deprecated due to the desire
to completely separate page content from page design. Although you may still encoun-
ter them and browsers still support them, you should always use style sheets to set your
page design.
Enhancements to Color in CSS3
RGB color values and color names have been part of Web page design since the intro-
duction of CSS. However, graphic designers have long wanted additional options for
creating and working with colors in CSS. For this reason, CSS3 introduced additional
tools to allow Web page designers to create more interesting and fl exible designs based
on color.
HSL Color Values
The RGB color model is only one way of describing colors. CSS3 also supports the Hue
Saturation Lightness (HSL) model that describes colors based on hue, saturation, and
lightness.
Hue
is the tint of the color and is based on the color's location on the color
wheel. Hue values range from 0° up to 360°, where 0° matches the location of red on
the color wheel, 120° matches green, and 240° matches blue.
Saturation
measures the
intensity of the chosen color and ranges from 0% (no color) up to 100% (full color).
Finally,
lightness
measures the brightness of the color and ranges from 0% (black) up to
100% (white). Color values using the HSL model are described in CSS3 using
hsl(
hue
,
saturation
,
lightness
)
where
hue
is the tint of the color in degrees,
saturation
is the intensity of the color
in percent, and
lightness
is the brightness of the color in percent. Figure 3-14 shows
how setting the hue to 38°, the saturation to 90%, and the lightness to 60% results in a
medium shade of orange.
