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("#") concatenate 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

<!DOCTYPE html>
<html>
<head>
  <title>CSS ID</title>
  <style>
    #line_1 {
      color: #FF6633;
      margin-left: 20px;
    }
    #line_2 {
      color: #FFF;
      font-size: 20px;
      background-color: #FF6633;
    }
  </style>
</head>
<body>
  <p class="line_1">This is a first paragraph.</p>
  <div class="line_2">This is a first section.</div>
</body>
</html>

Run it...   »

Syntax

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

element#id_name { property:value; }

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS ID</title>
  <style>
    p#line {
      color: #FF6633;
      margin-left: 20px;
    }
    div#line {
      color: #FFF;
      font-size: 20px;
      background-color: #FF6633;
    }
  </style>
</head>
<body>
  <p id="line">This is a first paragraph.</p>
  <div id="line">This is a first section.</div>
</body>
</html>

Run it...   »

CSS class vs CSS ID

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.