News & UpdatesProgrammingWeb programming Store My Projects

CSS Tutorial – 05 – Class & Id Selectors

CSS tutorials

Class and id selectors can define different styles for the same type of HTML element.

Class selectors

The class selector is recognized by the period sign (.) followed by a class name. The class can either be a general class that can be applied to any element or a specific class that can only be applied to one type of element. The specific class is defined by declaring the element’s name before the period sign.

/* Selects all elements with class="myclass" */
/* Selects all <p> elements with class="myclass" */

To use a class rule the elements in the document that it will apply to must be specified. This is done using the class attribute with its value set to the class name.

<p class="myclass">

Class example

Say for example that the text inside of some elements should be colored, but not for all instances of the elements. The first step then is to add a general class rule with a color property specified.

.info { color: green; }

This rule says that any element whose class attribute has the value of “info” will have this style.

<p class="info">Paragraph</p>

If a class rule will only be used by a single element type it should instead be defined as a specific class, also called subclass. This makes it easier to understand where the style is used for anyone reading the style sheet.

p.warn { color: orange; }

A subclass rule is applied to the document in the same way as the class rule, but it can only be applied to elements of the specified type.

<p class="warn">Paragraph</p>

Note that more than one class rule can be applied to a single element by separating each class name with a space.

<p class="style1 style2">Paragraph</p>

Id selector

The id selector works much like the class selector, but uses a pound sign instead of a period and the id attribute instead of the class attribute. Both id and class are generic attributes that can be applied to almost all HTML elements.

/* Selects the element that has id="myid" */
/* Selects the <p> element that has id="myid" */

The id rule is applied to an element using the id attribute. Since the id attribute needs to be unique, each id selector can only be used on one element per document. Therefore, the id selector implicitly specifies that the style is only used once on every page.

<p id="myid">Paragraph</p>

Id example

The id selector below will match the one and only element in the document whose id attribute is set to that id. This selector should therefore be used instead of the class selector if a style is intended only to be applied to a single element instance, since this makes it clearer where the rule is used.

#err { color: red; }

The id rule is applied using the id attribute.

<p id="err">Paragraph</p>

Span and div elements

The <span> and <div> elements are especially well suited to work with the class and id selectors. These elements are generic ways of adding structure to a document and they have no styles associated with them. The difference between the two is that <span> is an inline element and <div> is a block element.

<span class="a">Inline</span>
<div class="b">Block</div>
Recommended additional reading:
Sams - Teach Yourself HTML and CSS in 24 Hours