Using Classes in CSS to mark-up XHTML elements

With the help of classes in XHTML and CSS the designers and developers can place many forms of styling onto elements contained within the web page. This is a good practice to use when styling your XHTML content using CSS. Always separate your content from style, which is what CSS is mainly used for. Using classes does not involve any complicated instructions, tips or tricks, only a small little addition will be required within the XHTML code. These additions can be made on almost all of the XHTML tags with the acception of a few which we will go over in a later tutorial.

Let's see an example:

The CSS code can be written as:

p.first {color:yellow;} p.second {color:green;} p.third {color:red;}

The XHTML code can be written as:

<p>Ordinary text</p>                        <p class="first">Text in yellow color</p>   <p class="second">Text in green color</p>   <p class="third">Text in red color</p>

This would output:

Ordinary text

Text in yellow color

Text in green color

Text in red color

In the above example, the classes are activated by inserting the appropriate changes in the < p > tags. In this case we added; class="first", class="second", and class="third" to the opening three paragraph tags, the name contained within the quotes is the unique identifying property. This is the name that the CSS code calls upon to style the content. To add your class into your CSS code, you must type p.classname. Where "classname" is located, that's where you type the class name that you activated within the XHTML code. Please note a period goes between the p and the classname. Once you use a class name, you should not use it again on any other element other than the ones you want to appear the same.

Classes can be used as many times on a single XHTML page as you want. So if you were to want 3 paragraphs to all have the same styling all you would have to do is give each tag the same class name.

Let's see an example:

<p class="first">Paragraph 1</p> <p class="first">Paragraph 2</p> <p class="first">Paragraph 3</p>

This would output:

Text in yellow color

Text in yellow color

Text in yellow color

Notice how our text is still yellow in color? Well that's because the class name we used was "first", remember in the first part of the tutorial where we created the CSS code for p.first ? Well that's where the style properties are coming from.

So, with the help of classes, multiple looks and styles can be given to page elements without much effort.