CSS Selectors and Classes

In this lesson you'll learn how to use CSS's class selector so you can manage shared design rules together. This is for people searching "CSS class selector" or "CSS how to use classes."

A tag with class="name" can be selected in CSS by writing .name { }. Since the same class can be reused on multiple tags, you can manage shared design rules together — "make all headings purple," "make all warning notes red," and so on.

The sample code defines a class called .highlight and applies the same class to two different kinds of tags, <span> and <p>. Confirm that reusing the same class name gives a consistent design to multiple different tags.

A common beginner stumbling block is forgetting the leading . (dot) when specifying a class in CSS. .highlight and highlight mean completely different things — without the dot, it's interpreted as specifying a tag name. Also be careful: specifying just a tag name without a class applies the same style to every matching tag on the whole page.

When you want to divide up the areas you want to design in detail, naming them with classes is the standard approach even in real projects. On large sites, class design with consistent naming conventions has a huge impact on how maintainable the code is.