We use cookies to enhance your experience on the site

Class and ID in CSS

In HTML, every element has the ability to 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.

Let's analyze the code:

HTML:

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

CSS:

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

sandpack

We created three buttons with the class button-primary - all our buttons will have a black color and rounded corners.

Let's note the selector

.button-primary

. The dot that precedes "button-primary" represents the class selector.

Translating to programmer's language: In HTML, we created 3 buttons with the class button-primary. In CSS, we created the selector

.button-primary

, which will apply styles to all elements with the class

.button-primary

- black background color and border radius of 5px.

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>

Step 2: Create a CSS File

Open or create a new CSS file and save it as

styles.css

Step 3: Styling the Class

Add a style for elements with the class

.button-primary

, setting the background color to black and rounded corners.

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}

Step 4: Styling the Identifier

Add a style for the element with the identifier

#unique-element

, setting the background color to blue, text color to white, and margins.

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

Result

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

HTML File (index.html)

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)

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

Add more elements with different classes and identifiers to better understand how these attributes work.
Try adding more styles to your page, e.g., changing text color, adding borders, or shadows.
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.

Go to CodeWorlds→