HTML and CSS Reference
In-Depth Information
Defi ning Text and Background Colors
Now that you've studied how CSS works with colors, you can start applying color to
some of the elements of the Sunny Acres Web site. CSS supports styles to defi ne both the
text and background color for each element on your page. You've already seen examples
of how to set the text color of a page element using the
color
property, which has
the form
color:
color
;
where
color
is either a color value or a color name. Background colors are defi ned
using the property
background-color:
color
;
where once again
color
is either a color name or value. Tammy wants the body of each
page on her Web site to have a white background. Although most browsers by default
will apply a white background, it's a good idea to make this explicit. Also, she wants the
text of the
h2
headings to be displayed in white on a green background. The style rules to
apply these two design choices are:
body {
background-color: white;
}
h2 {
background-color: rgb(0, 154, 0);
color: white;
}
Whether to use a color value in place of a color name is often a matter of personal
preference. This code does both, with the RGB triplet (0, 154, 0) representing the
color green, and the color name
white
used for the text color of the
h2
headings and
the background color of the page body. You'll add these style rules to the
sa_styles.css
style sheet.
Setting Foreground and Background Color
• To set the background color of an element, use the property
background-color:
color
;
where
color
is a color name or a color value.
• To set the foreground or text color of an element, use the following property:
color:
color
;
