Module 9: A Touch of CSS · Lesson 2 of 6
CSS Selectors for Beginners: Element, Class and ID
All lessons in Module 9
- The style Attribute
- The style Element and Selectors
- External Stylesheets
- Colors and Fonts
- The Box Model
- Project: Style Your Card
Goal: Style many elements at once using a style element with element, class and id selectors.
Learn
A <style> element in the head holds CSS for the whole page (the HTML standard lists it among the metadata elements (opens in a new tab)). Every rule opens with a selector that picks elements, then the declarations in curly braces:
h1 {
color: navy;
}For now, three kinds of selector will do almost everything:
| Selector | Picks |
|---|---|
h1 | every h1 element |
.headliner | every element with class="headliner" |
#tickets | the one element with id="tickets" |
You can reuse a class on as many elements as you like, but an id has to be unique on the page. The dot and the hash live only in CSS. In HTML you write class="headliner" with no dot. Both attributes are listed in the global attributes reference.
The short version
- A
<style>element in the head holds the CSS rules for the whole page. - A rule is a selector plus declarations in curly braces:
h1 { color: navy; }. - An element can carry several classes, separated by spaces:
class="headliner big". - To share one rule, separate the selectors with commas:
h1, h2 { color: navy; }.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Selectors</title>
<style>
h1 {
color: navy;
}
.sale {
color: crimson;
}
#hours {
font-style: italic;
}
</style>
</head>
<body>
<h1>Corner Shop</h1>
<p class="sale">Apples half price!</p>
<p class="sale">Bread half price!</p>
<p id="hours">Open 8am to 8pm.</p>
</body>
</html>Your task
Design the Summer Sounds festival poster with a <style> element in the head:
- Add a
<style>element inside<head>. - Use an element selector to color the
h1. - Add
class="headliner"to the first two bands, and style.headliner(try a biggerfont-sizeor a color). - Add
id="tickets"to the ticket paragraph, and style#tickets.
When your rules get longer, an online tool such as CSS Editor (opens in a new tab) can tidy the formatting before you reuse them.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Common mistakes
Wrong
<li class="headliner" class="big">The Midnight Owls</li>Right
<li class="headliner big">The Midnight Owls</li>The browser ignores a second class attribute, so put all the classes in one attribute with spaces between them.
Wrong
<style>
.Headliner {
color: darkorange;
}
</style>
<li class="headliner">Paper Kites</li>Right
<style>
.headliner {
color: darkorange;
}
</style>
<li class="headliner">Paper Kites</li>Class and id names are case-sensitive, and .Headliner will never match class="headliner".
Go deeper
When two rules target the same element, the later one doesn't automatically win. The browser first compares specificity, worked out as the W3C Selectors spec describes in its specificity rules (opens in a new tab). An id selector beats any number of classes, and a class beats any number of element selectors. The later rule wins only when specificity is equal. Many teams therefore style nearly everything with classes. Their rules all weigh about the same and stay easy to override, whereas a single #id rule can be surprisingly hard to beat.
Name each class after what the thing is. .warning still makes sense after a redesign turns warnings orange. .red-text turns into a lie.
You can combine selectors too. li.headliner picks list items with that class, and nav a, with a space, picks links anywhere inside a nav. Both target elements by context, so you don't need classes everywhere.
When a rule seems to do nothing, select the element in DevTools and read the Styles panel. It lists every matching rule by priority and crosses out the declarations that lost. That explains most "why is my CSS not working" moments.
Frequently asked questions
What is the difference between class and id in HTML?
A class is a label you can reuse: many elements can share it, and one element can have several. An id is a unique name, and only one element on the page may have it, as the HTML standard's rules for classes and ids (opens in a new tab) require. In CSS you select a class with a dot (.sale) and an id with a hash (#tickets). Style with classes. Keep ids for things that need one exact target, such as label connections and in-page links.
Can an HTML element have multiple classes?
Yes. Put all the class names in one class attribute with spaces between them: <p class="note warning">. That element matches both .note and .warning. To select only elements that have both, write the classes together with no space: .note.warning. It is a neat way to add a small variation on top of a general style.
Where do I put the style tag in HTML?
Inside <head>. The HTML standard allows <style> only where metadata belongs, and in the head the styles are ready before any content is drawn. Browsers will apply a style element they find in the body, but the page may flash unstyled first, and the HTML is invalid. For styles that several pages share, use an external stylesheet.
