Ken Ward's Cascading
Style Sheets Tutorial

 

[Main Site Page: Freeing the Mind]
[Cascading Style Sheets: Contents]
[Previous: Anchors]
[This Page: Class Selector]
[Next: Inheritance]

Class

This paragraph has the following code:

<p class="principle">

And this one has this code:

<p class="example">

We define the classes principle and example in the style sheet or wherever as follows:

.principle{background-color: rgb(255,255,0); color: rgb(0,0,255)}

.example{background-color: rgb(255,255,0); color: rgb(0,0,255)}

Note the dot before principle and example when they are defined. We can use these classes in almost any element (or selector) we choose. However, we could have defined them, for example, as follows using the paragraph selector:

p.principle {statements}

And this would apply only to paragraphs. We could then define similar class selectors for other elements having the same name, but different effects.

Let's look at inheritance now.

Contents