CSS uses selectors to determine the element or elements to which a rule will be applied. There are three types of CSS selectors:

  1. HTML Element Selectors
  2. Identifier Selectors
  3. Class Selectors

Selecting HTML Elements

Most any HTML element can be the target of a selector. You simply use the element name, with no brackets around it.

div {
font-weight: bold;
}

The name of the element, div, is followed by a brace. This indicates that the rule is beginning. Within the opening and corresponding closing brace, the property, font-weight, is selected, followed by a colon (:). The value is then set to bold. The line is terminated with a semicolon (;). This semicolon tells the browser that the line is done; in other words, the property/value pair are closed.

Selecting Individual Elements

When you want to target only one element on a page, you can use id selector. The id (short for identifier) enables you to select one and only one element within a page. To do so, you need to modify the HTML to add an id attribute and provide a name for that element. For example, if you want to make the text bold:

<div id=”BoldText”>This text is bold</div>

The id’s value is set to BoldText.

To select this id within the CSS, you use a pound sign or hash character (#)

#BoldText {
font-weight: bold;
}

Always match the case that you use in the HTML with the case that you use in the CSS. If you use all uppercase to name the ID in the HTML, then use all uppercase in the CSS. If you use all lowercase in the HTML, use lowercase in the CSS. If you use a combination, then match that combination in the CSS.

When using IDs in HTML, you can use it once and only once across an entire page. You can use the same ID in different pages, but the ID should appear only once within a page. If you need to apply the same style to more than one element, then use classes.

CSS Class Selectors

A CSS class is used to select multiple elements and apply a style to them. A CSS class is applied only to the specific elements that you choose. 

<div class=”boldText”>This text is bold</div>

An ID selector uses a hash sign (#) in the CSS and a class uses a single period or dot.

.boldText {
/* CSS Goes Here */
}

You can use a class in the HTML to target only those elements that you want to target.