Understanding Style Sheets (Part 1) - The Colour Of My Eyes (
Page 4 of 6 )
Now that all the theory's out of the way, how about actually getting down
with some of the basic CSS properties available?First on the list
is the
"color" property. As you've seen in the examples above, this property controls
the foreground colour of an HTML element, and comes in very handy when you need
to change the colour of different blocks of text. The example below turns all
italicized text blue.
<HEAD>
<STYLE TYPE="text/css">
I {color:
blue)
</STYLE>
</HEAD>
CSS offers a number of different ways to specify the colour value here. The
simplest is to use one of the sixteen pre-defined colour names available - aqua,
black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red,
silver, teal, white, and yellow. You can also specify a hexadecimal colour
combination by prefixing it with a #I {color:#0000FF) or a combination of RGB
values in absolute or percentage terms, like this:I {color: rgb (0, 0, 255))I
{color: rgb (0%, 0%, 100%))Following close on the heels of "color" comes
"background-color", which controls the background colour of an HTML element.
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.blue
{color: cyan; background-color: #FF8000}
.green {color: lime;
background-color: black}
</STYLE>
</HEAD>
<BODY>
<P CLASS="blue">
Oooh...you have beautiful eyes!
<P
CLASS="green">
I know. But you aren't too bad yourself.
</BODY>
</HTML>
Keep looking at that combination, and you'll make some eye surgeon very, very
rich!