How to style HTML elements tags using the id attribute in CSS?

Originally posted here!

To style an HTML element tag using an id, you can use the id attribute on the HTML element tag and then assign a unique name as the id to that element.

Since all the id names should be unique, you cannot apply one id to more than 1 element in the HTML.

For example, consider a p (paragraph) tag with an id of pTag in HTML like this,

<!-- Paragraph tag-->
<p id="pTag">Hello World!</p>

Now in the CSS stylesheet, we can apply the styles to the p HTML tag by writing the name of the id.

To denote that we are using an id in the CSS stylesheet we need to use the # (hash character) before writing the name of the id.

It can be done like this,

/* Use the "pTag" id to set paragrah tag text color as red */
#pTag {
  color: red;
}

This will apply a font color of red to the text inside the p (paragraph) HTML element tag.

See the above code live in JSBin.

How is it different from using the class attribute?

• When using the class attribute to style HTML elements, we can reuse the class names and apply them to more than 1 HTML element tag.

• But when using an id attribute, we cannot reuse it more than once.

That's all 😃!

Feel free to share if you found this useful 😃.