1. Classes

The HTML class attribute is used to specify a class for an HTML element. Theclass attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.

Syntax:

.className { css code ..}

Here we have three <div> elements with a class attribute with the value of "city"

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

Now we can target all the three div with their class and change the styles,

.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}

2. Ids

The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document. The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.

Syntax:

#idName { css code... }

Here we have an <h1> element that points to the id name "myHeader". This <h1> element will be styled according to the #myHeader style definition in the head section:

<h1 id="myHeader">My Header</h1>

#myHeader {
  background-color: lightblue;
  color: black;
  padding: 40px;
  text-align: center;
}