You can apply a style to a given class of an element using CSS classes. To do this,you have to declare a style for the class you link the element to the style, then assigning that class to the element.

Classes are for you,if you wish to have more than one style of a html tag. Any HTML tag can use these classes.

CSS Class Syntax

By using a dot (.) followed by the class name,you declare a CSS class. You make up the class name yourself. If you want to enter the properties/values to your class ,you can assign it after the class name.

.class-name { property:value; }

You can prefix the dot with the HTML element name if you want to use the same class name for multiple elements, but each with a different style.

html-element-name.class-name { property:value; }

You could define style sheet classes for each, if you want a purple font paragraph and a blue font paragraph.

.purple {
font-family: verdana, arial, helvetica, sans-serif;
size: 12pt;
color: #003399;
}

.blue {
font-family: verdana, arial, helvetica, sans-serif;
size: 12pt;
color: #663399;
}

Then apply this to different paragraphs using following code:

<p class="purple">The purple paragraph text will go here.</p>

<p class="blue">The blue paragraph text will go here.</p>

The <span> tag

Using the <span> tag, you can also apply this to sections of html like this:

<p class="purple">This text will be purple until you get to <span class="blue">these words, which are blue</span> and then the text carries on being purple.</p>

If you wish to display code in a different color depending on its language:

code.html { color: #4b0082 }
code.css { color: #191970 }

For example, using class~="pastoral", we can assign style information to all elements as follows:

*.pastoral { color: green } /* all elements with class~=pastoral */

The following assigns style only to H2 elements with class~="pastoral":

H2.pastoral { color: green } /* H1 elements with class~=pastoral */

Given these rules, the first H2 instance below would not have green text, while the second would:

<H2>Not green</H2>
<H2 class="pastoral">Very green</H2>

Without an associated element, you can declare classes as follows:

.note { font-size: small }

CSS Class Example

<head>
<style type="text/css">
h1.css-section { color:#999999;}
p.css-section { color:#000099; }
</style>
</head>
<body>
<h1 class="css-section">CSS Class</h1>
<p class="css-section">CSS classes can be very useful</p>
</body>

O/P: