CSS  Script Dissection

---

Home Code of Ethics Purpose Statement Site Map Memberships Disqualifiers Criteria Judges Apply Status Statistics Winners Award Graphics Forum Contact

In this tutorial I 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, its 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 backgound 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 P.S. The "example" style sheet is the one in use for this website.

All content on this page (c) Keith Avery. Site Tested on Netscape 7.2, Compatible with all IE, Netscape, Mozilla, and Safari browsers.