Classes and IDs in CSS

You want three selected buttons to be black and one special block to be blue. The button selector would paint every button on the page, including the ones you don't want to touch. You need labels for the chosen elements - and that's exactly what classes and identifiers are.

In HTML, every element can have various attributes. For example, the image element (img) requires the src and alt attributes. These attributes define the properties of individual elements. When web pages have a complex structure, it becomes necessary to introduce a way to identify individual objects. There are two main ways to distinguish HTML elements:

• The id attribute - used to uniquely identify one specific element.
• The class attribute - allows marking a group of elements with common features.

By using these attributes, we can more easily manage page elements, control their styling and behavior. In Egypt, many people held the title of priest (that's a class), but the name Ramesses II belonged to one pharaoh (that's an id).

The Class Selector - A Dot

Let's analyze the code. First the HTML: three buttons, and each of them carries the same button-primary class:

1<button class="button-primary">Button 1</button>
2<button class="button-primary">Button 2</button>
3<button class="button-primary">Button 3</button>

The class attribute on its own doesn't change the look yet - it's just a label. We give it a look in CSS:

1.button-primary {
2  background-color: #000;
3  border-radius: 5px;
4}

We created three buttons with the class button-primary - all of them get a black background and a border radius of 5px. The dot that precedes "button-primary" in the .button-primary selector represents the class selector. In HTML you write the class name without the dot, and you add the dot only in CSS.

The ID Selector - A Hash

You select an identifier with the # sign (a hash): an element with the id="unique-element" attribute is targeted by the #unique-element selector. An id value must be unique in the whole document. Classes are more flexible - an element can have several of them, separated by a space, e.g. class="button-primary large". Names can't contain spaces, and letter case matters: .Menu and .menu are two different classes.

Which Selector Wins?

What if a paragraph has both a class and an id, and each selector gives it a different color? The id wins: an identifier is stronger than a class, and a class is stronger than a tag name. Check it in the editor below - uncomment the #special rule and see how the first paragraph turns red:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>CSS Cascade and Specificity</title>
6    <link rel="stylesheet" href="style.css">
7</head>
8<body>
9    <h1>Style Hierarchy in CSS</h1>
10
11    <p id="special" class="text">This text has an ID and a class</p>
12    <p class="text">This text has only a class</p>
13    <p>This text has neither an ID nor a class</p>
14
15    <!-- Experiment with specificity: -->
16    <!-- Which selector wins? element, .class, or #id? -->
17</body>
18</html>

You'll learn the full rules of this contest in the lesson on cascade and specificity. My advice: use mainly classes for styling, because an identifier is so strong that it's hard to override later.

Exercise: Class and ID in CSS

In this exercise, you'll learn how to use class and id attributes to style HTML elements. Your task will be to create a web page with various elements that will be styled using CSS classes and identifiers.

Step 1: Create a Basic HTML Document Structure

First, create a new HTML file and add a basic HTML document structure. Add <button> elements with a class and a <div> with an identifier.

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Link CSS file -->
7  <title>Class and ID in CSS</title>
8</head>
9<body>
10  <button class="button-primary">Button 1</button>
11  <button class="button-primary">Button 2</button>
12  <button class="button-primary">Button 3</button>
13  <div id="unique-element">Unique element</div>
14</body>
15</html>

The <link> element in the head section connects the external styles.css file - without it, the browser wouldn't know the styles exist at all.

Step 2: Create a CSS File

Open or create a new CSS file and save it as styles.css, in the same folder as the HTML file.

Step 3: Styling the Class

Add a style for elements with the class .button-primary, setting the background color to black and rounded corners. This time we'll also add white text, because button text is dark by default:

1.button-primary {
2  background-color: #000;
3  color: #fff;
4  border: none;
5  border-radius: 5px;
6  padding: 10px 20px;
7  cursor: pointer;
8}

The border: none declaration removes the button's default border, and cursor: pointer turns the mouse arrow into a hand.

Step 4: Styling the Identifier

Add a style for the element with the identifier #unique-element, setting the background color to blue, the text color to white, and spacing.

1#unique-element {
2  background-color: #00f;
3  color: #fff;
4  padding: 20px;
5  margin-top: 20px;
6  text-align: center;
7}

This rule reaches only one element, because no other element can have the same id. The text-align: center property centers the text horizontally.

Result

After completing all steps, your HTML and CSS files should look like this.

HTML File (index.html)

The HTML file hasn't changed since step 1, because all the class and id labels were in it from the very beginning:

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="stylesheet" href="styles.css"> <!-- Link CSS file -->
7  <title>Class and ID in CSS</title>
8</head>
9<body>
10  <button class="button-primary">Button 1</button>
11  <button class="button-primary">Button 2</button>
12  <button class="button-primary">Button 3</button>
13  <div id="unique-element">Unique element</div>
14</body>
15</html>

CSS File (styles.css)

In the CSS file, both rules stand one below the other, separated by an empty line, so it's easy to tell the class style from the identifier style:

1.button-primary {
2  background-color: #000;
3  color: #fff;
4  border: none;
5  border-radius: 5px;
6  padding: 10px 20px;
7  cursor: pointer;
8}
9
10#unique-element {
11  background-color: #00f;
12  color: #fff;
13  padding: 20px;
14  margin-top: 20px;
15  text-align: center;
16}

Experiment Further

1. Add more elements with different classes and identifiers to better understand how these attributes work.
2. Try adding more styles to your page, e.g., changing text color, adding borders, or shadows.
3. Test your skills by creating more complex layouts using classes and identifiers.

After completing this exercise, you should better understand how to use classes and identifiers in CSS to style HTML elements. Remember: a class is a title that many priests can hold, and an id is a pharaoh's name - the only one in the whole kingdom.