Web · Selectors and classes
Element selectors
The full text of this chapter, to read or revisit. To practise, do the exercises.
▶ Do the exercisesExercise 1 — What Are CSS Selectors?
CSS selectors are how we tell the browser which HTML elements we want to style. The simplest kind is the element selector — it targets all elements with a given tag name.
p {
color: blue;
}
h1 {
color: red;
}
This means: all
<p>
elements will be blue, and all
<h1>
elements will be red.
What's nice with this method is that it applies to every element of that type in the document, without you having to specify each one individually. You can just use them like this:
<h1>Codémon Types</h1>
<p>Aquachu is a water type Codémon.</p>
Exercise 2 — Example: Styling Tags with Selectors
Let's look at a real example using element selectors to style an HTML page.
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
}
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Codémon Types</h1>
<p>Aquachu is a water type Codémon.</p>
<p>Pyrochu is a fire type Codémon.</p>
</body>
</html>
This page applies a blue color to all
<p>
elements and a red color to all
<h1>
elements. Because we use element selectors, this works for any
<p>
or
<h1>
in the page!
Exercise 3 — Selecting the Right Element
Which CSS selector would you use to make all image elements on a page have a 2px solid border?
Options
• ```img { border: 2px solid black; }```
• ```<img> { border: 2px solid black; }```
• ```image { border: 2px solid black; }```
• ```#img { border: 2px solid black; }```
Hint : Element selectors use just the HTML tag name without any symbols or brackets.
Exercise 4 — Complete the Element Selector
Complete the CSS code to make all links (anchor tags) blue and without text decoration (underline).
____ {
color: blue;
text-decoration: none;
}
Options: a .a <a> #a
Hint : Think about the HTML tag name for links and how element selectors are written in CSS.
Exercise 5 — Selecting Multiple Element Types
You can select multiple elements at once by separating element names with commas. This allows you to apply the same styles to different elements.
<!DOCTYPE html>
<html>
<head>
<style>
/* This applies to both h1 and h2 elements */
h1, h2 {
color: purple;
text-decoration: underline;
}
/* This applies to both p and li elements */
p, li {
color: green;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Codémon Types</h1>
<h2>Water Types</h2>
<p>Aquachu is a water type Codémon.</p>
<ul>
<li>Strong against fire</li>
<li>Weak against plant</li>
</ul>
</body>
</html>
In this example:
- Both
h1
and
h2
elements are purple and underlined
- Both
p
and
li
elements are green and use Arial font
Why Group Selectors?
Grouping selectors helps keep your CSS code DRY (Don't Repeat Yourself). Instead of writing the same styles multiple times for different elements, you can write them once and apply them to multiple elements.
Exercise 6 — Match Elements to Selectors
Match each HTML element with the correct CSS element selector that would target it:
Items to match
• <p>Paragraph text</p>
• <h2>Heading</h2>
• <ul><li>List item</li></ul>
• <a href="#">Link</a>
Definitions
• p { }
• h2 { }
• li { }
• a { }
Exercise 7 — Understanding Element Selection
Given the following HTML and CSS, which elements will be colored red?
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<h1>Title</h1>
<p>First paragraph</p>
<p>Second paragraph</p>
<div>This is a div</div>
<p>Third paragraph</p>
</body>
</html>
Options
• All three paragraph elements
• The h1 element only
• All elements in the body
• The first paragraph only
Hint : Think about what the selector 'p' targets and how element selectors work in CSS.
Exercise 8 — Complete the Multiple Element Selector
Complete the CSS to apply a blue background to all heading level 1, heading level 2, and paragraph elements.
____________________ {
background-color: blue;
color: white;
}
Options: h1 , h2 , p ; and +
Hint : To select multiple elements in CSS, list them separated by commas.
Exercise 9 — Best Practices for Element Selectors
Element selectors are great for setting default styles, but they come with a few limitations:
1. Keep it general: Use them for global defaults like base font size or color.
2. Low specificity: They're easily overridden by classes or IDs.
3. Affect everything: They target every instance of that element on the page. Do not overuse them!
Exercise 10 — Element Selector Limitations
What is the main limitation of using element selectors?
Options
• They target all instances of an element, making it difficult to style specific elements differently
• They are not supported in older browsers
• They make your CSS files larger than other selector types
• They can only be used for text styling, not layout
Hint : Think about what happens when you want different styles for the same type of element in different contexts.