Showing posts with label CSS ID and Class. Show all posts
Showing posts with label CSS ID and Class. Show all posts

Thursday, August 16, 2012

CSS ID and Class


The id and class Selectors

In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".

The id Selector

The id selector is used to specify a style for a single, unique element.

The id selector uses the id attribute of the HTML element, and is defined with a "#".
The style rule below will be applied to the element with id="para1":

Example

#para1
{
text-align:center;
color:red;
}

Try it yourself »

Remark Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.


The class Selector

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

This allows you to set a particular style for many HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."

In the example below, all HTML elements with class="center" will be center-aligned:

Example

.center {text-align:center;}

Try it yourself »

You can also specify that only specific HTML elements should be affected by a class.
In the example below, all p elements with class="center" will be center-aligned:

Example

p.center {text-align:center;}

Try it yourself »

Remark Do NOT start a class name with a number! This is only supported in Internet Explorer.