CSS Identifiers / id Attribute

By: Dusty Arlia
Published on February 6, 2013
Last Updated on Monday, July 06, 2015 at 11:34 PM
Total Updates: 4

The best way to select a single HTML element in a webpage is to use an identifier. An identifier is the value set to the HTML element's id attribute. Here is an example of how you would set an id attribute:

<h1 id="article_title">CentUp: The New Social Network Button</h1>

Once the id attribute is assigned a value, you can use it as a CSS selector. In this case the identifier is set to "article_title". Here is how you would use this identifier in a CSS rule:


You will see that before the identifier comes (referred to as the selector in terms of CSS rule components) the # symbol. The # symbol indicates that the CSS selector is an id. There can only be one instance of that id on the webpage. If you have multiple HTML elements that need to use the same id, use classes instead.

There are times when you might want to use both a class attribute and an id attribute on the same element. Here is an example:

<p class="article_body" id="first_paragraph">First paragraph.<p>
<p class="article_body">Middle of your article.<p>
<p class="article_body" id="last_paragraph">Last paragraph.<p>