ID and Class

Introduction

ID and Class are two of the most important concepts in CSS.
They allow you to apply styles to specific elements on a web page.

ID:
Used to style a single element on a page.
It is defined using the id attribute.
e.g. <div id="header"></div>
Class:
Used to style multiple elements on a page.
It is defined using the class attribute.
e.g. <div class="content"></div>

Code

<style>
#header {
  background-color: lightblue;
  color: white;
  text-align: center;
  padding: 10px;
}

.content {
  background-color: lightgray;
  padding: 10px;
}
</style>

<div id="header">
  <h1>This is a header</h1>
</div>

Output

This is a paragraph.

This is another paragraph.

Difference between ID and Class

Only one element can have a specific ID (unique), while multiple elements can have the same class.
ID is defined using the id attribute, while class is defined using the class attribute.
ID is used to style a single element, while class is used to style multiple elements.