ptg16476052172 LESSON 8: Using CSS to Style a Site
Using Color
Using CSS, you can easily set up a color scheme for your entire website or just tweak
the colors of specific elements on a page. There are two key properties when it comes to
assigning colors to elements using CSS— color and background-color. For elements
with borders, you can also set the border color using the border-color property.
To indicate that a paragraph should be displayed with white text on a black background,
you could use the following code:
<p style="color: #ffffff; background-color: #000000;">This paragraph has
white text on a black background.</p>You can also use these properties to adjust the colors on the whole page by applying
them to the body tag. Here’s an example:
<body style="color: #ffffff; background-color: #0000ff;">
This page will have white text on a blue background. You can also specify colors as part
of the background and border properties, which allow you to set the values for a whole
family of properties at once. The background property will be discussed in Lesson 9,
“Using Images on Your Web Pages,” because most of its subproperties are associated
with background images.
To set the link color for all the links on a page, you need to use a style sheet for the page
and specify the style for the <a> tag, like this:
<style>
a { color: #ff9933; }
</style>What about active links and visited links? CSS provides pseudo-classes that apply to
links in particular states, as follows:
a:link Applies to unvisited links.
a:visited Applies to links that the user has visited.
a:hover Applies to links when the user has her mouse pointer over the link.
a:active Like the alink attribute, this selector is used when the user is clicking
on the link.