CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

CSS ID - CSS ID vs CSS Class


CSS ID assign to HTML element as a individual identifier. ID use to specific style apply for only that element by using CSS ID selector.

CSS ID selector define using id attribute with value (user define id name).

CSS ID selector identify using hash("#") concat with user define id name.

CSS ID use for when you using JavaScript its identify of element using getElementByID() function.

Syntax

If you assign CSS ID name only single element than syntax is like,


#id_name { property:value; }


Example Code:

<html>
<head>
<style type="text/css">
#line_1 {
   color:purple;
   margin-left:20px;
  }
#line_2 {
   color:purple;
   font-size:20px;
   background-color:#FF6633;
  }
</style>
</head>
<body>
<p id="line_1">This is a paragraph line.</p>
<div id="line_2">This is a paragraph Second line.</div>
</body>
</html>
		

Run it...   »

Example Result:

This is a paragraph line.

This is a paragraph Second line.

Syntax

If you assign same ID name multiple elements than syntax like,


element#id_name { property:value; }


Example Code:

<html>
<head>
<style type="text/css">
p#line{
   color:purple;
   margin-left:20px;
  }
div#line {
   color:purple;
   font-size:20px;
   background-color:#FF6633;
  }
</style>
</head>
<body>
<p id="line">This is a paragraph line.</p>
<div id="line">This is a paragraph Second line.</div>
</body>
</html>
		

Run it...   »

Example Result:

This is a paragraph line.

This is a paragraph Second line.

CSS Id vs CSS Class

This difference is important to know where is use CSS ID and CSS Class. Because both work are same. CSS ID is a use for "unique identifier an element". It means CSS ID selector can be called only one times in a document while class selector can be called multiple times in a document.

But you can use Class have a maximum flexibility. Class and ID have not any strong rules to where is use CSS ID or CSS Class.

  • CSS ID: Unique Personally Identification(ID) in Number of ID's.
  • CSS Class: Multiple Identification in Number of Class.