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 ;
Search WWH ::

Custom Search