home > css > style sheet classes

style sheet classes

If you wish to have more than one style of a html tag, classes are for you. These can be applied to any html tag.

classes

If you want a blue font paragraph and a purple font paragraph, you could define style sheet classes for each:

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

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

You would then apply this to different paragraphs like this:

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

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

the <span> tag

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

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

specific classes for specific tags

You can also add specific classes for specific tags, like this:

h1 {
font-family: verdana, arial, helvetica, sans-serif;
size: 18pt;
}

h1.underline {
font-family: verdana, arial, helvetica, sans-serif;
size: 18pt;
border-bottom: solid 1px #CC0000;
}

You could then have two different style of heading 1, the class with a red underline would be included like:

<h1 class="underline">heading 1 with red underline</h1>

The normal one would just be styled using the style sheet attributes described above when using the normal <h1>heading 1</h1> tag.