CSS Id and Class

id and class Selectors

If you want to set CSS styles in HTML elements, you need to set "id" and "class" selectors in the elements.

id Selector

The id selector specifies a specific style for an HTML element with a particular id.

HTML elements are set with the id attribute for the id selector, and the id selector is defined with a "#" in CSS.

The following style rule applies to the element with id="para1":

Example

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

class Selector

The class selector is used to describe the style of a group of elements. Unlike the id selector, a class can be used on multiple elements.

The class selector is represented by the class attribute in HTML, and in CSS, the class selector is shown with a dot ".".

In the following example, all HTML elements with the class "center" are centered.

Example

.center {text-align:center;}

You can also specify that a particular HTML element use a class.

In the following example, all p elements with class="center" will have centered text:

Example

p.center {text-align:center;}

Multiple class selectors can be separated by spaces:

Example

.center { text-align:center; }
.color { color:#ff0000; }