This is a bit harder to grasp than type selectors but is also far more flexible.

Classes can be used in a number of ways but here is one easy one:

    
p {
    color:green;
    font-size:12pt;
}    
p.smaller {
    font-size:10pt;
}
p.bigger {            
    font-size:14pt;
}
        

The first chunk sets all paragraphs to green text and font size 12.

The second chunk sets up a style for the class of paragraph called "smaller" and the third does "bigger".

The other thing you need is to edit your Web page (externalcss.html) to apply these classes of style to the HTML:

<p>This paragraph is a standard paragraph</p>

<p class="smaller">This one is an example of the "smaller" class</p>

<p class="bigger">This one should be bigger</p>

<p class="smaller">This is a second example of the smaller class</p>
        

Class selectors mean you can choose which bits you want to be styled. Many or few. With in-line styles this could get long-winded and tedious but this is fairly easy.

You can also apply styles to more than one type of element using classes:

            
.blue {            
    color:blue;
}
        

This allows you to apply the classes to more than just paragraphs. For example:

<p class="blue">This whole paragraph should turn blue.</p>

<p>In this paragraph the text should be the default colour and only <span class="blue">these three 
words</span> are changed.</p>    
            
        

Hopefully you have spotted that in the stylesheet classes are created using the dot (period or full stop). In the HTML they are applied using an attribute called CLASS.