Home Advertise with us Forum Articles Sitemap Contact
Logo  

Id vs Class Selectors

CSS not only allows specifying styles for your HTML elements, but also helps you specify your own selectors like, “class” & “id”. These are known as user defined selectors.

The id Selector
  • The id selector is used to specify a general style format for a single unique HTML element. It actually gives a name to a certain style.

  • The id selector uses attribute of this unique HTML element & is defined with "#" sign.

Example :

Code Results

<HTML>
<HEAD>

<style type="text/css">#heading1 {color:blue; font-size:25px; font-family:impact;}
</style>

</HEAD>

<BODY>

<div ID="heading1">
<b class="headline">This is headline style bold</b>
</div>

</BODY>
</HTML>

This is headline style bold


The class selector
  • Unlike id selector, the class selector specifies a style format for a group of HTML elements meaning that, a class selector is applicable on several elements.
  • The class selector uses the attributes of the HTML class & is defined with the "." Sign.

Example :

Code Results

<HTML>

<HEAD>

<style type="text/css">.headline {color:blue; font-size:40px; font-family:impact;}
</style>

</HEAD>

<BODY>

<b class="headline">Headline style in bold</b>

</BODY>

</HTML>

Headline style in bold