The CSS Class Selector

The class selector is a general selector, meaning that it can be used multiple times within one document.

This selector can be used for all HTML elements that can be styled using cascading style sheets. The class selector start with a "." other than when it is used for a specific element.

The example below specifies a class "right" telling the HTML code to align the text to the right.

Example:

CSS Syntax:

.right{ text-align:right; }

HTML:

<p class="right">Text Aligned Right</p>

Where the HTML element has been specified it also tells the tag to align the text to the right.

Example:

CSS Syntax:

p.right{ text-align:right; }

HTML:

<p class="right">Text Aligned Right</p>

If we only need tag specific CSS syntax then our first example is not necessary, but when we want a general classification that can be used for multiple elements then our first example is required. Our first example can be used for a wide range of tags:

Example:

HTML:

<h1 class="right">Headline Text Aligned Right</h1> <p class="right">My Paragraph Text Aligned Right</p> <span class="right">Text Aligned Right</span> <div class="right">Text Aligned Right</div>