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

More Pseudo-Gibberish - 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
Rating: starstarstarstarstar / 33
September 27, 2000

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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?



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

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

STYLE-SHEETS ARTICLES

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

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: