Задавать стили для элемента, конечно, удобно, однако что делать, если возникает необходимость определения различных стилей для нескольких элементов одного типа, размещенных в различных частях страницы? На помощь придут классы.

Рассмотрим следующий пример, в котором задается синий цвет шрифта для всех абзацев:

p {
color: #0000FF;
}

Отлично! А теперь представьте, что на вашей странице будет расположена боковая панель с голубым фоном. При этом голубой текст на панели сольется с ним, и разобрать что-либо станет просто невозможно. Эту проблему можно решить, определив класс для текста, выводимого на боковой панели, а затем задав для этого класса необходимый стиль с помощью CSS.

Для создания абзаца класса sidebar необходимо вначале добавить атрибут class с соответствующим значением в открывающий тег:

 <p class="sidebar">Этот текст будет белым.</p> 

Затем можно приступить к описанию стиля для данного класса:

p {
color: #0000FF;
}
.sidebar {
color: #FFFFFF;
}

Во втором правиле используется селектор класса, определяющий стиль для любого элемента со значением sidebar атрибута class. Перед именем ставится точка, указывающая, что это класс, а не HTML-элемент.

А если на панели также присутствуют ссылки? По умолчанию все ссылки в вашем документе будут оформлены одинаковым образом. Однако, если добавить в тег ссылки атрибут class=”sidebar”, они также станут белыми:

 <p class="sidebar">Этот текст будет белым, <a class="sidebar"
href="link.html">ссылка тоже белая</a>.</p>

Прекрасно. Но, возможно, вам хотелось бы, чтобы ссылки отличались от основного текста? К примеру, им можно было бы придать жирное начертание. Добавление описания стиля для жирного начертания текста к набору стилей для класса sidebar приведет к тому, что весь текст на панели будет выведен жирным шрифтом, что противоречит поставленной нами цели. Нужен CSS-селектор для выбора ссылок, размещенных внутри элемента класса sidebar. Далее путем комбинации селектора типа и селектора класса можно добиться желаемого эффекта:

p {
color: #0000FF;
}
.sidebar {
color: #FFFFFF;
}
a.sidebar:link, a.sidebar:visited {
font-weight: bold;
}

Обратите внимание, что в данном примере используются псевдоклассы :link и :visited. Мы поговорим о псевдоклассах чуть позже в этой главе.

Если вы добавите приведенные выше стили в таблицу стилей вашего сайта и обновите страницу в браузере, то увидите, что ссылки будут отображены жирным шрифтом белого цвета, поскольку к ним были применены оба определенных для класса sidebar правила стилей. Однако если бы мы добавили в третье правило стиль изменения цвета шрифта, цвет ссылок также был бы изменен, поскольку третий селектор более конкретен, а правила CSS применяются в порядке увеличения конкретности селекторов.

Кстати, процесс применения различных правил стилей к одному и тому же элементу называется каскадированием; отсюда и термин «каскадные таблицы стилей». Ближе к концу главы мы узнаем о степени конкретности различных селекторов и правилах каскадирования.