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.
Next on the basic concept list: inheritance, classes, pseudo-classes and contextual selectors. Let's take them one by one.
Inheritance:Inheritance basically means that HTML elements which lack a specific style rule will inherit the style rules of the elements they are enclosed within. For example, consider this snippet of code:
<HTML> <HEAD> <STYLE TYPE="text/css"> B {color: red} </STYLE>
</HEAD>
<BODY>
<B> Q. How many <FONT SIZE="+1">psychiatrists</FONT> does it take to change a lightbulb? <P> A. Only one, but the lighbulb has to want to change. </B> </BODY> </HTML>
In this case, the <B> tag has a color defined in the style sheet, while the <FONT> tag doesn't have any style rule defined for it. Since the <FONT> tag is enclosed within the <B> tags, it inherits the style rule defined for the <B> tag - in this case, the colour red.
Classes:CSS also allows you to group elements together in "classes" and apply a style rule to that class. For example,
<P CLASS="question"> Q. How many psychiatrists does it take to change a lightbulb? <P CLASS="answer"> A. Only one, but the lighbulb has to <FONT CLASS="question">want</FONT> to change.
</BODY> </HTML>
In this case, we've defined two classes, "question" and "answer", with appropriate style rules for each (note the manner of their definition within the <STYLE> tags, and the period prefix). Next, we've invoked the appropriate style rules by adding the CLASS attribute to the HTML tags within the body of the document.All the text within tags which are marked as part of the class named "question" will appear in red, while all the text within the "answer" class will appear in blue.Thus, CSS gives you a simple and elegant way to group otherwise unrelated tags together, and apply a common style rule to them.
Pseudo-classes:Unlike what the name suggests, these are actually pre-defined classes for certain HTML tags. The most well-known of these are the pseudo-classes defined for the anchor element A - it comes with the following pre-defined classes:A:link - refers to all hyperlinks within the document A:visited - refers to all visited hyperlinks within the document A:active - refers to the last hyperlink selected within the document A:hover - refers to the hyperlink your mouse pointer is currently hovering overBy using these pseudo-classes, it's possible to change the default colour of active, visited and unvisited hyperlinks within the document.
Contextual selectors:Contextual selectors are a lot like conditional statements - the style declarations that follow them are invoked only when certain conditions are met. For example, suppose you'd like all bold italic text in your document to appear in blue Arial. Your contextual selector would look like this:
<HEAD> <STYLE TYPE="text/css"> B I {color: blue; font-family: Arial} /* this selector is for all bold+italic text */ </STYLE> </HEAD>
Style-Sheets 
/ 33 
