How to Use the ID Selector in CSS

In the last few tutorials, we discussed two out of the three types of CSS rules. The first type is the HTML selector which is based on and controls the style for the matching HTML tag. The second type is the class selector which works like a generic style that can be applied to any element on the webpage.

Now its time to discuss the third type of CSS rule which is called the ID selector. As with the class selector, the ID selector can be applied to any element on the webpage. However, it is meant to be used only once on a page. This makes the ID selector very useful for dynamic HTML and JavaScript. Theoretically, if you use the ID selector more than once on a page, the subsequent ones should be ignored by the web browser. However, this is not always the case. It is very difficult to rely on the predictability of web browsers. Therefore, when you choose to use the ID selector, be careful to use it only once. Let’s take a look at an example.

Basic Code

Example

ID Selector

Inside the <style></style> tags, you will notice that the ID selector begins with the hash symbol (#) and that is followed with the name you assign to the ID selector. As with the class selector, you can use any name you want but it is best if the name indicates what the ID selector will be used for. In the example, we are using it to ID a special section of text.

{property: value;}

Also inside the <style></style> tags, the ID selector is followed by one or more property-value pairs which are placed between curly brackets. These property-value pairs set the characteristics of the style. In the example, the paragraph with the special_text ID selector will have red colored text.

<tag id=“name_of_rule”> . . . </tag>

When you use the ID selector in the body of the webpage, you will use the id attribute within the opening HTML tag. The value for the id attribute is the unique name given to the ID selector, in this case "special_text". (id="value") This is how the selector “connects” the style to that one HTML tag that you wish to apply the style to. In the example above, the ID selector will be placed inside only one <p id=“special_text”> tag on the webpage. Any other HTML tags on the webpage should not contain the ID selector inside the opening tag.

	Editor Wanted BellaOnline's HTML Editor