CSS Id and Class

The ID Selector

I have a rule of thumb when creating my web pages. I will use classes when I think the style may repeat more than once on different elements. I use Id’s when I know I will have one design element that will use this. For example I usually create my header, navigation and footer with id’s. I will use classes when using the same element over and over, like a section of images with text and I want the same layout for multiple sections.

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;
}

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 any 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 will be center-aligned:

Example
.center {text-align:center;}

---