CSS idandclass

id and class selectors

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

id selector

The id selector can specify particular styles for HTML elements with a specific id.

HTML elements use the id attribute to set the id selector. In CSS, the id selector is defined with "#".

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

Example

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

Try it Yourself »

Remark ID attributes should not start with a number. IDs that start with a number do not work in Mozilla/Firefox browsers.

class selector

The class selector is used to describe styles for a group of elements. The class selector is different from the id selector; class can be used on multiple elements.

The class selector is represented by the class attribute in HTML. In CSS, the class selector is represented by a dot..Number display:

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

Example

.center {text-align:center;}

Try it Yourself »

You can also specify particular HTML elements to use a class.

In the following example, all p elements use class="center" to center the text of the element:

Example

p.center {text-align:center;}

Try it Yourself »

Multiple class selectors can be separated by spaces:

Example

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

Try it Yourself »

Remark The first character of a class name cannot be a number! It will not work in Mozilla or Firefox.

other extensions