CSS classes

A class is a name you invent and attach to any number of elements, so you can style exactly the ones you mean.

<p class="callout">Hello</p>

.callout {
	border-left: 4px solid crimson;
}

Note the dot. In CSS the selector is .callout; in HTML the attribute value is just callout. Everybody gets this wrong at least once.

Classes, ids, elements

• p styles every paragraph on the page.
• .callout styles every element carrying that class ~ as many as you like.
• #hero styles the single element with that id.

Why I use classes for almost everything

Element selectors are too broad: the moment you want one paragraph to look different, you’re stuck. Ids are too narrow: you can only use them once, and they’re hard to override later (there’s a demo on that coming). Classes sit in the middle, and you can stack several on one element.

Naming them

Name a class after what it is, not what it looks like. .warning still makes sense after you change the colour from red to orange. .red-box does not.