The application of styles throughout a document involves so many options. Sometimes you want to customize your styling. That means you want a particular style to be applied to certain tags in a document and not to all the instances of the tags. In some other cases, you feel the need to build a style that can be applied to numerous tags in a document and most importantly, without repeating the style rule again and again. The CSS class and ID attributes can serve your above mentioned purpose.

You can use class selectors to assign more than one style to the same element or tag in a document. You may want to color certain parts of your text differently in comparison to the remaining part of the document. To do this, you need to set your paragraphs with classes like this:

<style type=”text/css”>
P.blue {background-color: #0000ff;}
P.red {background-color: #ff0000;}
</style>

The next step is to call various classes. The CLASS attribute is used inside the paragraph tag for this purpose. A tag without a class attribute is given a default style for that tag. For instance:

<p class=”blue”>
This paragraph would have a blue background.
</p>

<p>
And this paragraph would default back to the normal style.
</p>

To use a solitary class across many HTML elements, you require to remove all the signs of HTML from the starting of the style call. Never forget to leave the period (.) at its position:
<style type=”text/css”>
.blue {background-color: #0000ff;}
.red {background-color: #ff0000;}
</style>

The above two classes can be used for any element that needs them:
<p class=”blue”>
This paragraph would have a blue background.
</p>

<h2 class=”blue”>And this h2 would also have a blue background.</h2>
Similarly, the ID selector enables the designers to provide a name to a particular style without combining with a tag or any other HTML element. An ID code can be like one mentioned below:
<style type=”text/css”>
#indent1 { text-indent: 10px; }
</style>

An ID tag is combined in the same manner you combine classes, inside the element that must contain that style:
<H3 id=”indent1″>

The ID tags can be named with any combination of letters and numbers as per your liking. But it is always advisable to give such a name to your tags that you will memorize and recollect even after a long period of time.

It is always confusing on the part of a designer to decide when to use a class or an ID for an element. You need to use a class tag if the style is more often used in different parts all over the document and the style is very common. Conversely, use an ID tag if the style occurs only once in the document and specific to a certain area of the document. Always keep in your mind that an ID can be used once in any HTML document. The moment it is used in a particular page, it ceases to exist on that page and must not be used again.

One of the interesting things about CSS is that it requires the use of ending tags which were optional before. If you have applied a style within a

tag, the browser may not know the end of that style if you have not specified the ending tag </p>.

Tags: CSS Style Classes and IDs