Якщо для одних і тих самих тегів у різних випадках потрібно використовувати різні властивості, то ці теги потрібно розділити на класи.
Для цього в основному документі цим тегам задається атрибут class.
Значенням цього атрибута є назва класу.
Для кожного класу в таблиці стилів можна вказати окремі властивості.
Перед назвою класу в таблиці стилів ставиться символ «.» (крапка).
У цій таблиці стилів описано два класи:
Ця таблиця стилів використовується таким документом:
У цьому документі є заголовки трьох типів: звичайний (із властивостями за замовчуванням), класу n1 та класу n2.
Абзаци також трьох типів: звичайний, класу n1 та класу n2.
У браузері цей документ виглядає так:
Перший заголовок і перший абзац — звичайні. Вони мають стандартні властивості: чорний колір тексту, вирівнювання по лівому краю.
Другий заголовок класу n1 має всі властивості заголовка за замовчуванням, крім змінених у селекторі класу n1: червоний колір тексту та вирівнювання по центру.
Другий абзац класу n2 має всі властивості абзацу за замовчуванням, крім зміненого розміру шрифту — 18 пт.
Третій заголовок класу n2 має всі стандартні властивості заголовка (чорний текст, вирівнювання по лівому краю), крім розміру шрифту — 18 пт.
Третій абзац класу n1 має всі стандартні властивості абзацу, крім змінених у селекторі класу n1: червоний колір тексту та вирівнювання по центру.