Classes and IDs in HTML and CSS

Published in

featurepreneur

2 min readJan 10, 2023

Classes in HTML

The HTML class attribute is used to specify a class for an HTML element.

The class attribute can be used along with any elements in HTML.

Syntax:

class="class_name"

The class name is case-sensitive.

 <p class="featurepreneur">Happy Learning </p>
 <p class="Freaturepreneur">Hello World</p>

HTML considers this as two different classes.

The HTML ‘id’ attribute is used to specify a unique id for an HTML element.

Syntax:

id="id_name"

You can have only one element with the same id in an HTML document.

The id name is also case-sensitive.

The id name must contain at least one character, cannot start with a number, and must not contain any spaces or tabs.

<p id="featurepreneur">Happy Learning </p>
<p id="F4567">Hello World</p>

Classes are CSS selectors. We use CSS selectors to stylize elements in HTML, using the “class” attribute.

Dot (.) followed class name is used in CSS to style the same class in HTML.

Syntax:

.class_name {
  css declarations;
}

The .class_name selector selects elements with a specific class attribute.

.featurepreneur {
            color: tomato;
        }

.Freaturepreneur {
            color: rgb(111, 57, 134);
        }

An ID selector is a unique identifier of the HTML element to which a particular style must be applied.

Hash (#) followed class name is used in CSS to style the same class in HTML.

Syntax:

#class_name{
 css declarations;
}

CSS ID selectors function similarly to CSS class selectors.

#featurepreneur {
            color: tomato;
        }

 #F4567 {
            color: rgb(111, 57, 134);
        }

CLASS

Output:

Output: