Understanding Style Sheets (Part 1) - More Pseudo-Gibberish (
Page 3 of 6 )
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,
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question
{color: red}
.answer {color: blue}
</STYLE>
</HEAD>
<BODY>
<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>
Go on, try it yourself. Do I look like I'm lying?
/ 32 
