CSS class versus id

What are classes in CSS?

Classes are the selectors in HTML that you can use in your CSS to stylize HTML elements.

Also, a CSS class can be used in JavaScript to manipulate the DOM. However, in this post, I will discuss the CSS classes in regard to HTML & CSS.

A web page can contain a single class name multiple times.

How to write a class name in HTML?

<!-- Class names in HTML -->
<div class="this_is_a_class_name">
	<p class="another_class_name">Sit amet consectetur adipisicing elit earumoribus.</p>
	<p class="another_class_name">Corrupti qui nam explicabo fugiat ipsa quidem cumque.</p>
</div>

In the above example, the class name starts with the word ‘class’ and then an ‘equal sign’ and then an inverted comma (“”) that contains the class name.

You can create the class names for any HTML tags.

How to write a class name in CSS?

/* Class names in CSS */	
.this_is_a_class_name {
	max-width: 800px;
	display: block;
	margin: 0 auto;
}
.another_class_name {
	text-align: center;
	font-weight: bold;
}

In CSS, a class name starts with a dot (.) and then curly braces to apply/write the actual CSS properties.

What are IDs in CSS?

CSS ID stands for the identifier. The ID is a unique selector in HTML that you can use in your CSS to stylize and make an anchor.

If you’re confused about the term “anchor” then click this link/anchor to see what an anchor does.

Just like the CSS class, you can also use the CSS ID in your JavaScript file.

However, a web page can contain an ID only one time. That means you can not use the same ID twice on a web page.

How to use multiple classes in CSS?

You can use multiple classes by separating them by comma (,). See the following example:

.apple, .bannana, .pizza {
    background: yellow;
    font-weight: 400;
    line-height: 1.7;
}

The last class doesn’t need any commas. In the same vein, you can use IDs as well. See the example below:

.apple, .bannana, .pizza, #unicorn, #carrot {
    background: yellow;
    font-weight: 400;
    line-height: 1.7;
}

How to write an ID in HTML?

<!-- ID in HTML -->
<div id="this_is_an_id">
	<p>Sit amet consectetur adipisicing elit earumoribus.</p>
	<p>Corrupti qui nam explicabo fugiat ipsa quidem cumque.</p>
</div>

The pattern is very similar to the class but the only exception is it starts with the word “id” instead of “class.” See the example above as a reference.

How to write an ID in CSS?

/* ID in CSS */
#this_is_an_id {
	background: #DC4E41;
	color: #FFFFFF;
}

It is also very similar to writing class name but the only exception is it starts with a hash symbol (#).

Allowed characters and symbols for CSS ID and Class names

The naming convention for CSS ID and class are the same. They can contain anything from the list below:

1. a-z
2. A-Z
3. 0-9
4. – (hyphen)
5. _ (underscore)
6. ISO characters (some of them but it’s better to avoid them for confusion)

A class or id name can start with an underscore (_), hyphen (-), or letter(a‐z) or (A-Z).
Source: w3.org

But if an id or class starts with a hyphen, the second character must have to be either a letter (a-z, A-Z) or underscore (_).

Invalid vs Valid id & class names

You got the idea.

Frequently asked questions