Web · Selectors and classes
Classes
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — Introduction to Class Selectors
Class selectors allow you to target specific elements by assigning them a class name. Unlike element selectors that target all elements of a particular type, class selectors only target elements that have been assigned that class.
In CSS, class selectors start with a period (.) followed by the class name:
.my-class {
color: blue;
font-size: 16px;
}
To use a class in HTML, you add the class attribute to elements:
<p class="my-class">This text will be blue and 16px.</p>
<h2 class="my-class">This heading will also be blue and 16px.</h2>
The big advantage of classes is that you can apply the same styles to different HTML elements, and you can also choose which specific elements get those styles, unlike element selectors that affect all elements of that type.
Class Naming Rules
Class names can contain letters, numbers, hyphens, and underscores, but must start with a letter.
They are case-sensitive, so ".Button" and ".button" are considered different classes. Avoid spaces in class names - use hyphens or camelCase instead.
Exercise 2 — Class Selectors in Action
Let’s try out class selectors in a simple example using fire-type and highlight styles.
<!DOCTYPE html>
<html>
<head>
<style>
.fire-type {
color: red;
font-style: italic;
}
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Codémon Styles</h1>
<p><span class="fire-type">Pyrochu</span> is a fire-type Codémon.</p>
<p><span class="highlight">This info is important.</span></p>
<p><span class="fire-type highlight">Pyrochu</span> is both red and highlighted.</p>
</body>
</html>
In this example, we apply class selectors to three different spans:
1.
.fire-type
— The first
<span>
makes Pyrochu red and italic.
2.
.highlight
— The second
<span>
adds a yellow background to the text.
3.
.fire-type highlight
— The third
<span>
combines both styles: the text is red, italic, and highlighted.
Exercise 3 — Correct Class Selector Syntax
Which of the following is the correct CSS syntax for a class selector that makes text bold?
Options
• ```.bold-text { font-weight: bold; }```
• ```bold-text { font-weight: bold; }```
• ```#bold-text { font-weight: bold; }```
• ```<bold-text> { font-weight: bold; }```
Hint : Class selectors in CSS always start with a period (.) followed by the class name.
Exercise 4 — Complete the HTML Class Attribute
Complete the HTML code to apply the "water-type" class to the paragraph and the "highlight" class to the span.
<p ____="water-type">
Aquachu is a <span ____="highlight">water-type</span> Codémon.
</p>
Options: class id type style class id type style
Hint : To apply a class to an HTML element, you need to use the class attribute.
Exercise 5 — Complete the CSS Class Selector
Complete the CSS code to define styles for a class named "fire-type" that makes text red.
____fire-type {
color: red;
}
Options: . # < >
Hint : In CSS, class selectors always start with a period (.) followed by the class name.
Exercise 6 — Match CSS Selectors with HTML Elements
Match each CSS selector with the HTML element it would target:
Items to match
• .highlight
• p
• .fire-type
• h1.title
Definitions
• <p class="highlight">Text</p>
• <p>Any paragraph</p>
• <span class="fire-type">Pyrochu</span>
• <h1 class="title">Heading</h1>
Exercise 7 — Multiple Classes on One Element
What is the correct way to apply multiple classes to a single HTML element?
Options
• ```<div class="class1 class2">Content</div>```
• ```<div class="class1, class2">Content</div>```
• ```<div class="class1" class="class2">Content</div>```
• ```<div class="class1.class2">Content</div>```
Hint : When applying multiple classes to an element, separate them with spaces inside a single class attribute.
Exercise 8 — Advantages of Class Selectors
Class selectors offer several advantages over element selectors:
1. Precision: You can target specific elements, not all elements of the same type.
2. Reusability: The same class can be applied to different types of elements.
3. Multiple styles: You can apply multiple classes to the same element.
4. Maintainability: Easier to update styles in one place rather than changing element selectors throughout your CSS.
<!-- Using element selectors only -->
<style>
p { color: black; } /* Affects ALL paragraphs */
</style>
<!-- Using class selectors -->
<style>
.important { color: red; }
.note { font-style: italic; }
</style>
<p>Regular paragraph</p>
<p class="important">Important paragraph</p>
<p class="note">Note paragraph</p>
<p class="important note">Important note paragraph</p>
With class selectors, you can create a more structured, modular design system that makes your CSS more flexible and easier to maintain.
Exercise 9 — When to Use Class Selectors
Which of the following scenarios would be BEST solved using class selectors?
Options
• You need to style only some paragraphs as warnings with a yellow background, while leaving other paragraphs with default styling
• You want to change the font for all paragraphs on your page
• You need to add a border around all images
• You want to center align all headings
Hint : Think about when you need to target specific elements rather than all elements of a certain type.