Lesson 6: Applying
Color
So far your
Web pages are black and white, which isn't too exciting, is it? You've
probably been thinking about how to add color to your page already. In
this lesson, you'll explore more about style sheets as you learn how to
add color to your text, the background of individual text elements, and
the background of your entire page. You'll also learn about the different
color methods you can use, and a few tips on using color that will help
you to make your Web pages distinctive looking and effective.
First, we'll
take a look at changing text color. Then you'll learn how to change the
background color for individual sections of text, and the whole page.
Modifying
Text Color
As demonstrated
on page 106-107 of your book, you can use the color property in your
style sheet to change the color of your text. The value of the color
property can be a color name keyword or a hexadecimal value.
Color
Name Keywords
Color name keywords
are simply the common names of colors, such as red, blue, black, and green.
There are 16 color name keywords that are part of the official HTML and
CSS specifications. You can use any one of the following as the value of
the color
property:
black, white,
silver, gray, red, maroon, purple, fuchsia, lime, yellow, olive, green,
blue, navy, teal, and aqua.
For example,
if you want all your paragraphs to display with navy text and your level-one
headings to display with gray text, you would write:
<html>
<head>
<title>My Page</title>
<style type="text/css">
p { color: navy; }
h1 { color: gray;
}
</style>
</head>
<body>
...all your HTML tags
and page content...
</body>
</html>
Hexadecimal
Color Values
Color name keywords
are easy to code, but there aren't many different colors to choose from.
Fortunately, you can choose from over 16 million colors by using hexadecimal
values. Hexadecimal values are color codes that represent the red,
green, and blue variations that combine to make a color. Hexadecimal
values all begin with a pound sign ( # ), followed by six letters or numbers;
A-F and 0-9, which represent a color.
Hexadecimal
values are difficult to remember. Even the most experienced Web developer
can't look at any color and give you its hexadecimal equivalent. That's
where hexadecimal code charts come in handy.
Webmonkey has
a helpful color chart you can use as a reference throughout this lesson.
TIP! Hexadecimal values are |
So, let's say that
you've checked out the hexadecimal color chart mentioned above, and you
want to make your paragraph text a dark shade of green and your level-one
headings a dark orange color. Your code might look like this:
<html>
<head>
<title>My Page</title>
<style type="text/css">
p { color: #336666;
}
h1 { color: #FF6600;
}
</style>
</head>
<body>
...all your HTML tags
and page content...
</body>
</html>
Adding
Background Color to Text
All the color
values mentioned earlier work with both text color and background color.
As you now know, the color
property sets text color. To set background color, you use the background-color
property. For example, if you want all paragraphs to display with navy
text and a silver background color, you would write:
<html>
<head>
<title>My Page</title>
<style type="text/css">
p { color: navy;
background-color: silver; }
</style>
</head>
<body>
...all your HTML tags
and page content...
</body>
</html>
Or, for hexadecimal
colors:
p { color: #003366;
background-color: #DDDDDD; }
As mentioned
on page 106-107 in your book, you can also use the background
property to apply a background color. This property is a shorthand version,
but it's not as well supported in older browsers. To ensure that your background
color works in as many browsers as possible, use the background-color
property instead.
Background
Color Characteristics
When you set
the background color for a text element like a paragraph or heading, the
background color fills the entire width of the element. By default, this
width is determined by the size of the browser window. So, if you give
a heading a navy background color with white text, and a paragraph a silver
background color, you'll get the following result:
Changing
the Page Background Color
You can also
give your entire page a background color. All you have to do is use the
background-color
property with body
as your selector. So, if you want to create a light blue background for
your page, you would write:
body { background-color:
#003366; }
This would create
the following effect:
TIP! Make sure that your text |
You can experiment
with a variety of colors until you find the combination you're looking
for. All you have to do is change the color value in your style sheet rule,
save your changes, and refresh the page in your browser.
Discussion
Now that you
know how to add color to your Web pages, you've covered all the fundamental
Web design skills, and you're ready to put the finishing touches on your
first Web page! To facilitate further learning and the sharing of information,
post your comments to the following discussion items in the message board:
Have you ever seen
a Web site that uses color poorly? If so, share the URL with the class
and describe what you would do differently.
Do you know of
any Web sites that you think use color extrememly well? If so, share the
URL with the class and describe what you think make's the site's use of
color effective.
No comments:
Post a Comment