CSS | Difference b/w a class selector and an id selector

Differences b/w class and id selectors

What is a "selector" ?

A selector in CSS is used to select an HTML element you want to style. Therefore, you can select HTML elements by:

class
id
type
element name
attribute, etc.

What is a class selector ?

A class selector selects HTML elements based on the value given to the class attribute of that element.

The class selector begins with a dot "." and is followed by the name you give to the class attribute of the HTML element you want to style.

Example

HTML

<p class="green">I am filled with green.</p>

<p class="blue">I am filled with blue.</p>

<p class="green">I am also filled with green.</p>

CSS

.green { 
    color: green;
}

.blue { 
    color: blue;
}

Output

I am filled with green.

I am filled with blue.

I am also filled with green.

One major use of class selectors is to select multiple HTML elements with the same name and then apply the same styles to all of them at once.

Note: You can add more than one name to the class attribute in HTML. e.g:

<p class="green large center">I am filled with green.</p>

If you want to apply a style to 1000 elements, class selectors are there for you to use.

What is an id selector ?

An id selector selects HTML elements based on the value given to the id attribute of that element.

The id selector begins with an hash symbol "#" and is followed by the name you give to the id attribute of the HTML element you want to style.

Example

HTML

<button id="green">Say Hi to Makzo<button>

CSS

#btn { 
    background-color: green;
    border: none;
    color: white;
}

Output

id selectors are used to select a unique or special HTML element.

Note: You can not add more than one name to the id attribute in HTML.

If you want to apply a style to a special (or unique) HTML element, use id selectors.

Difference b/w a class and an id

An ID can be used to identify one element while a class can be used to identify more than one. And that's it.

Now that you've gone through this content, you can ask questions or share your thoughts in the comment section. And ofcourse, contributions are welcome.

Difference b/w classes & IDs in CSS