Your name has a colour. Your sections do not yet have a way to be targeted as a group. This lesson teaches three ways to aim a CSS rule, and puts classes on your sections so later lessons can style them on purpose.
The concept
Here is your page with one element rule on the main heading. Run it:
▸WHAT'S ALREADY IN THIS PAGE
New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.
<!DOCTYPE html>— Tells the browser to use modern rendering rules. Taught in lesson 2.<html> … </html>— The root element that wraps the whole document. Taught in lesson 2.lang="en"— Sets the page's language. Taught in lesson 6.<head>— Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.<meta charset="UTF-8" />— Sets how the browser decodes the text. Taught in lesson 6.<title>— Sets the browser-tab text. Taught in lesson 2.<body>— Holds everything a visitor actually sees. Taught in lesson 2.
The "where you left off" demos show the placeholder version of the page. Your own page, with your real content, is safe in the exercise below.
That h1 rule paints every <h1> on the page. Useful when you mean every heading of that kind. Run this:
All three <h2>s turn teal. There is no way, with that selector alone, to paint About and Contact while leaving Skills alone.
Run this next version:
Only the sections marked class="block" get the lavender background. Skills has no class, so it stays plain. Same tag, different mark, different result. A class is a label you put on the HTML elements you choose. The CSS selector starts with a dot.
Your sections already have ids from the landmarks lesson. Run this:
Only Skills gets the border. About and Contact do not. An id names one unique piece. The CSS selector starts with a hash (#). Use an id when you mean that one place, not a group.
Short guide for now:
- Element selector (
h2): every element of that tag. - Class selector (
.block): every element you marked with that class. Reusable. - Id selector (
#skills): the one element with that id. Unique on the page.
The syntax
In HTML, add a class with the class attribute:
<section id="about" class="block">In CSS, three selector shapes look like this:
h2 {
color: teal;
}
.block {
background-color: lavender;
}
#skills {
border: 2px solid teal;
}The dot and the hash are part of the selector in CSS. They are not written on the HTML attribute values. You write class="block" and id="skills", then select them with .block and #skills.
A minimal working example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Selectors</title>
<style>
h1 {
color: darkslateblue;
}
.block {
background-color: lavender;
}
#skills {
border: 2px solid teal;
}
</style>
</head>
<body>
<h1>Your Name</h1>
<section id="about" class="block">
<h2>About</h2>
</section>
<section id="skills" class="block">
<h2>Skills</h2>
</section>
<section id="contact" class="block">
<h2>Contact</h2>
</section>
</body>
</html>One element rule, one class rule, one id rule. Three different aims.
Common mistakes
Nothing picks up your class style. You wrote .block in CSS but left the sections without class="block". The rule matches nothing. Add the class attribute on every element that should share the look.
You wrote class=".block" in the HTML. The attribute value should be the name only: class="block". The leading dot belongs in the CSS selector, not in the HTML.
Two elements share the same id. You copy id="skills" onto a second section so both can use #skills. Ids must be unique on a page. For a shared look, use a class. Duplicate ids make the id selector unreliable, and they break in-page links that point at that name.
Try it yourself
Your sections are ready for classes. Give them a shared look, then mark one of them as special. After each Run that checks Skills, scroll the preview to Skills if you do not see it yet.
- Run the starting code below. Confirm only your name is coloured, and the three sections look plain.
- Add
class="block"to each of the three<section>elements. Keep their existingids. - Inside your
<style>block, add a rule for.blockthat sets a lightbackground-coloryou can recognise, such aslavenderorhoneydew. - Run it. Scroll the preview through the sections if you need to. Confirm all three sections share that background.
- Add a rule for
#skillsthat sets a visibleborder, such as2px solid teal. Run it. Scroll to Skills. Confirm only Skills gets the border. - Break it on purpose: change the CSS to
.blok(one letter missing) and leave the HTML classes asblock. Run it. Scroll if you need to. Confirm the shared background disappears while the Skills border, if still correctly spelled, can remain. Put.blockback.
▸WHAT'S ALREADY IN THIS PAGE
New here? This starter already carries the standard HTML frame. You do not need to change it to do the exercise — each piece is taught in its own lesson.
<!DOCTYPE html>— Tells the browser to use modern rendering rules. Taught in lesson 2.<html> … </html>— The root element that wraps the whole document. Taught in lesson 2.lang="en"— Sets the page's language. Taught in lesson 6.<head>— Holds information about the page; nothing in it is drawn on screen. Taught in lesson 2.<meta charset="UTF-8" />— Sets how the browser decodes the text. Taught in lesson 6.<title>— Sets the browser-tab text. Taught in lesson 2.<body>— Holds everything a visitor actually sees. Taught in lesson 2.
Your sections now carry classes, and you can aim rules at a tag, a group, or one named place. The style block in your <head> will keep growing. The next lesson moves those rules into their own file so HTML and CSS each have a home.