CSS Exercises - ID and Class Selectors

A set of exercises to practice using common ID and class CSS selectors.

1. CSS ID selector (View solution)

Create an HTML page with two elements styled through two different ID CSS selectors.

  • Create a separate CSS stylesheet file.
  • Define two CSS rules using two different ID selectors.
  • Link the CSS file to an HTML file.

2. CSS class selector (View solution)

Create an HTML page and an external CSS stylesheet file.

  • In a stylesheet, define two CSS rules using two different class selectors.
  • In an HTML body, define two HTML elements.
  • Style the HTML elements using the class attribute and a matching CSS class selector.
  • Link the CSS file to an HTML file.

3. Multiple HTML elements with the same class (View solution)

Create an HTML page with several HTML elements, and apply the same CSS rule to all of them.

  • Define a CSS rule in an external stylesheet.
  • The CSS rule starts with a CSS class selector.
  • Apply the same class attribute to all the HTML elements.

Solutions

1. CSS ID selector - solution

The index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>My Page Title</title>
</head>
<body>
    <h1 id="my-id">This element is styled using a CSS ID selector.</h1>
    <div id="my-other-id">This element is styled through another CSS ID selector.</div>
</body>
</html>

The style.css file:

#my-id {
    color: blue;
}

#my-other-id {
    color: grey;
}

Explanation

Our HTML imports the external style.css file using the link element:

<link rel="stylesheet" href="style.css">

It also defines two HTML elements, h1 and div, each having a different ID attribute:

<h1 id="my-id">This element is styled using a CSS ID selector.</h1>
<div id="my-other-id">This element is styled through another CSS ID selector.</div>

Our CSS stylesheet file defines two CSS rules, using two different ID CSS selectors named #my-id and #my-other-id:

#my-id {
    color: blue;
}

#my-other-id {
    color: grey;
}

In our HTML document, the h1 element will be styled with a CSS rule that uses the #my-id selector, and it will have blue text. The div element will be styled using the CSS rule that uses the #my-other-id selector, and that element will have grey text.

2. CSS class selector - solution

The index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>My Page Title</title>
</head>
<body>
    <h1 class="my-class">This is h1 styled through a CSS class selector</h1>
    <div class="my-other-class">This element is styled through another CSS class selector.</div>
</body>
</html>

The style.css file:

.my-class {
    color: blue;
}

.my-other-class {
    color: green;
}

Explanation

Our HTML web page links to the external style.css stylesheet file using the link element:

<link rel="stylesheet" href="style.css">

Inside the body element, we have two HTML elements: h1 and div, each having a different class attribute value matching the name of the existing CSS class selectors:

<h1 class="my-class">This is h1 styled through a CSS class selector</h1>
<div class="my-other-class">This element is styled through another CSS class selector.</div>

The stylesheet defines two CSS rules, each starting with a different CSS class selector. We opted to name those class selectors .my-class and .my-other-class:

.my-class {
    color: blue;
}

.my-other-class {
    color: green;
}

The h1 element will be styled with a CSS rule that starts with the .my-class selector. The div element will be styled with a CSS rule that starts with the .my-other-class selector.

3. Multiple HTML elements with the same class - solution

The index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>My Page Title</title>
</head>
<body>
    <h1 class="my-class">This h1 element is styled using the my-class CSS selector</h1>
    <div class="my-class">This div element is selected and styled using the same CSS class selector.</div>
    <p class="my-class">This paragraph is styled using the same CSS class selector.</p>
</body>
</html>

The style.css file:

.my-class {
    font-style: italic;
}

Explanation

Our HTML web page links to an external style.css file using the link element:

<link rel="stylesheet" href="style.css">

And defines several HTML elements, placed inside the <body> section:

<h1 class="my-class">This h1 element is styled using the my-class CSS selector</h1>
<div class="my-class">This div element is selected and styled using the same CSS class selector.</div>
<p class="my-class">This paragraph is styled using the same CSS class selector.</p>

The above code creates h1, div and p elements and applies the same CSS rule to all of them by setting their class attributes to the value of my-class. The my-class name is a name we gave to a CSS class selector, defined inside a style.css stylesheet file:

.my-class {
    font-style: italic;
}

In short, we can apply the same CSS class rule to multiple HTML elements, whereas a CSS ID rule should be applied only to a single, unique HTML element on our page.

Summary

In this set of exercises, we practiced using common CSS ID and class selectors to select and style our HTML elements. For more information on these two types of selectors, check out our Introduction to CSS Selectors tutorial.