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!
Next: Playing With Type >>
More Style-Sheets Articles
More By icarus, (c) Melonfire