CodePath — Learn coding from zero to expert

1. What is this?

A class is a label you add to HTML (class="note") so CSS can target just those elements with .note. A function in CSS terms is not needed yet — think of a class as a named style you can reuse. For layout, max-width plus margin: 0 auto centres a column, and line-height keeps text readable.

2. Why do we use it?

Real pages reuse styles (buttons, cards, alerts) and constrain line length so text stays readable on wide screens.

3. Syntax breakdown

```
.note { background: #f5f5f5; }
```
.note targets class="note" only — the dot means class.
```
.page { max-width: 640px; }
```
The column never grows wider than 640px — comfortable reading width.
```
.page { margin: 0 auto; }
```
auto left/right margins centre the column in the page.

5. Common mistakes

Writing note { } instead of .note { } — without the dot it targets a <note> element that does not exist.
Forgetting to add class="note" in the HTML, so the style never applies.
Using fixed pixel widths on mobile — prefer max-width so it shrinks.

Practice task

Change the note accent border to 4px and the page padding to 32px.

Hint

Edit border-left width and the padding value.

Try it below — tests run automatically when you press Run.

css

Live preview (sandboxed)

Output

Press Run to see output.

Mini quiz

3 questions. Answer, then check.

1. How do you target class="note" in CSS?
2. What does margin: 0 auto do to a fixed-width block?
3. Why use max-width for text columns?