H8 - IDs and Classes

01 - Why do you need ids and classes?

Sometimes you do not want to style all paragraphs or all headings. You want to style one specific element or a group of elements. Classes and ids give elements a name.

Use a class for a group of elements.
Use an id for one unique element.
In CSS, a class starts with a dot: .name.
In CSS, an id starts with a hash: #name.

Practice

Give one element a class or id and connect it to a CSS rule.
Deliberately make the name wrong once and see why the CSS stops working.

02 - What is a class?

A class is a reusable name. Several elements may have the same class.

<p class="warning">Be careful.</p>
<p class="warning">This is important too.</p>

Practice

Give one element a class or id and connect it to a CSS rule.
Deliberately make the name wrong once and see why the CSS stops working.

03 - A class selector in CSS

.warning {
    color: darkred;
    font-weight: bold;
}

Practice

Give one element a class or id and connect it to a CSS rule.
Deliberately make the name wrong once and see why the CSS stops working.

04 - Multiple classes on one element

An element can have more than one class. Separate class names with spaces.

<p class="message warning">This message is a warning.</p>

Practice

Give one element a class or id and connect it to a CSS rule.
Deliberately make the name wrong once and see why the CSS stops working.

05 - What is an id?

An id is unique. Use the same id only once on a page.

<h2 id="contact">Contact</h2>

#contact {
    color: navy;
}

Practice

Give one element a class or id and connect it to a CSS rule.
Deliberately make the name wrong once and see why the CSS stops working.

06 - IDs and links to a place on the same page

You can link to an element with an id by using #.

<a href="#contact">Go to contact</a>
<h2 id="contact">Contact</h2>

Practice

Give one element a class or id and connect it to a CSS rule.
Deliberately make the name wrong once and see why the CSS stops working.

07 - Choosing class or id

Choose a class when you want to reuse styling.
Choose an id when one element needs a unique anchor or identifier.
For CSS styling, classes are usually more flexible.

Practice

Give one element a class or id and connect it to a CSS rule.
Deliberately make the name wrong once and see why the CSS stops working.

08 - Choosing names

Use clear names that describe the role: card, warning, main-menu.
Avoid names that only describe a temporary color, such as blue-box.
Use lowercase letters and hyphens.

Practice

Give one element a class or id and connect it to a CSS rule.
Deliberately make the name wrong once and see why the CSS stops working.

09 - Specificity: why does this rule win?

CSS selectors have different strength. An id selector is stronger than a class selector, and a class selector is stronger than a tag selector.

p {
    color: black;
}

.intro {
    color: green;
}

#first {
    color: red;
}

Practice

Give one element a class or id and connect it to a CSS rule.
Deliberately make the name wrong once and see why the CSS stops working.

10 - Common mistakes

Using the same id more than once.
Forgetting the dot for a class selector.
Forgetting the hash for an id selector.
Choosing names that are too vague.

Practice

Give one element a class or id and connect it to a CSS rule.
Deliberately make the name wrong once and see why the CSS stops working.

11 - Best practices

Use classes for most styling.
Keep ids unique.
Choose names based on meaning, not only appearance.
Keep selectors simple.

Practice

Give one element a class or id and connect it to a CSS rule.
Deliberately make the name wrong once and see why the CSS stops working.

12 - Assignment

Practice

Create three content blocks.
Give all blocks the same class.
Give one block an extra class for emphasis.
Add an id to a heading and link to it from the top of the page.

Quiz