Стилевые определения можно строить без явной связи с конкретными элементами. В этом случае с определением связывается имя класса, которое можно использовать для сопоставления заданного стиля с конкретными элементами (входящими в этот класс). Такие стилевые определения называют определениями с селектором класса.

Заметим, что перед именем класса ставится точка. Важное предупреждение: имена классов чувствительны к регистру, то есть mark и Mark — разные классы.

Если в стилевом файле записано определение с селектором класса (например mark), то для связи определения с конкретными элементами нужно в открывающих тегах этих элементов указать атрибут class со значением mark:

class="mark"

Посмотрим, как это работает на примере. Слева показано содержимое CSS-файла, справа — фрагмент файла HTML. Предполагается, что в головной части HTML имеется элемент LINK, подсоединяющий CSS к HTML.

.mark
{
  color:red;
  font-size:200%;
}
          

Между точкой и именем класса не должно быть пробелов.

<P>
Текст <EM class="mark">первого</EM> 
абзаца.
<P>
Текст второго абзаца.
<P class="mark">
Текст третьего абзаца.
          

Стилевое определение mark будет применяться к элементу EM в первом абзаце и ко всему содержимому третьего абзаца.

P.mark
{
  color:red;
  font-size:200%;
}
          

Конструкция P.mark записывается слитно (без пробелов).

В общем случае записывается имя элемента, затем через точку имя класса.

<P>
Текст <EM class="mark">первого</EM> 
абзаца.
<P>
Текст второго абзаца.
<P class="mark">
Текст третьего абзаца.
          

Такое определение будет работать для тех элементов P, открывающий тег которых содержит атрибут class="mark", и не будет работать для других элементов, даже с атрибутом class="mark" в открывающем теге.