Award Sites!  ... "Bettering the Internet Experience!"

Cemetery Woods by David G. Bancroft

AIT Web Hosting and Domains ... Veteran Supported

Home | Articles | Exemplary | Achievement | NovaSite
Resources |
Tutorials | Web Awards | Contact | CureNow
SEARCH | Assembly ||
USA Patriotism! | Poetry Galore

Approved Web Hosting Companies

Gold Stars of Excellence by Award Sites!

CSS Tutorial

Tutorials > CSS List | Categories

Dissection of a CSS Style Sheet
by Keith Avery (June 29, 2005)

In this tutorial I am going to explain the parts of a simple CSS (Cascading Style Sheet) document. This will hopefully get you started on making your own CSS documents for your website.

The Example CSS Document:

a:link {text-decoration: underline; background: #ffcc99; color: #3333ff;}
a:visited {text-decoration: underline; background: #ffcc99; color: #993399}
a:active {text-decoration: underline; background: #ffcc99; color: #000099;}
a:hover {text-decoration: underline; background: #ffcc99; color: #ff0000;}

Now, you may say, "This is all Greek to me." It's not Greek; it’s just some code that you may not understand. Well at the end of this our goal is for you to understand what the main parts are.

Lets take it one line at a time:

a:link {text-decoration: underline; background: #ffcc99; color: #3333ff;}
This is a simple line which tells the browser what color to make a link.

The first section of this line: a:link, called a selector, tells us what that line is referring to. a: would stand for <a href> and link would stand for a regular link (unclicked, unselected, no mouseover.)
The second section of this line: {text-decoration: underline;, is called an attribute. An attribute in CSS is much like an attribute in HTML; it is followed by its value.
The { in that section signals the starting of the attributes, all elements inside the {} are attributes. text-decoration: is the actual attribute, which tells us what kind of style the text has.

The underline; part is the value of the attribute, the value for "text-decoration" is "underline", which would make it so all links in the documents this CSS applies to underlined like this.

The next two sections: background: #ffcc99; and color: #3333ff;} are the same concept, with "background" and "color" being attributes and "#ffcc99" and "#3333ff" being their values.

The background: #ffcc99; attribute would tell the browser what color the background of the links would be and the color: #3333ff;} attribute would tell the browser what color to make the actual link text.

Now that we have dissected this line, we know the different parts of this sample CSS style sheet: selectors, attributes, and values. To break up the whole style sheet we'll make selectors bold, attributes italic, and values underlined.

a:link {text-decoration: underline; background: #ffcc99; color: #3333ff;}
a:visited {text-decoration: underline; background: #ffcc99; color: #993399}
a:active {text-decoration: underline; background: #ffcc99; color: #000099;}
a:hover {text-decoration: underline; background: #ffcc99; color: #ff0000;}


Now the style sheet should make more sense to you, it shouldn't still be Greek to you.

To find more examples or if it is still Greek to you go to The W3Schools CSS Website.

I hope this helped you along your webmaster path.

Keith Avery
KOSA Awards Owner
Copyright 2005

"Approved" Web Hosting Companies