Home arrow Style-Sheets arrow Page 4 - Understanding Style Sheets (Part 1)

The Colour Of My Eyes - Style Sheets

The first in a two-part tutorial on Cascading Style Sheets, thisarticle explains how to create and use style rules across your Web site,and then demosntrates a few basic CSS properties. Also included:inheritance, classes, contextual selectors and some lightbulb jokes.

TABLE OF CONTENTS:
  1. Understanding Style Sheets (Part 1)
  2. Into The Light
  3. More Pseudo-Gibberish
  4. The Colour Of My Eyes
  5. Playing With Type
  6. Adding A Little Style
By: icarus, (c) Melonfire
Poor Best
Rating: starstarstarstarstar / 33
September 27, 2000

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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!



 
 
>>> More Style-Sheets Articles          >>> More By icarus, (c) Melonfire
 

blog comments powered by Disqus
   

STYLE-SHEETS ARTICLES

- What is CSS?
- The Power of CSS
- Understanding Style Sheets (part 2)
- Understanding Style Sheets (Part 1)
Find More Style-Sheets Articles


© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 7 - Follow our Sitemap

Dev Shed Tutorial Topics: