Позвольте показать вам, как используется класс, с помощью следующего фрагмента кода:
<h1 class="specialtext">This is a heading with the <span>same class</span> as the second paragraph</ h1 >
<p>This tag has no class.</p>
<p class="specialtext">When a tag is identified with a class, we can target it <span>regardless</span> of its position in the hierarchy.</p>
Обратите внимание, что мы добавили атрибут класса specialtext к двум тегам. Давайте теперь применим следующий стиль к данному коду, выделив текст specialtext жирным:
р {font-family: Helvetica, sans-serif;}
.specialtext (font-weight:bold;}
В результате применения правил текст обоих абзацев отображается шрифтом Helvetica, абзац с классом specialtext выделен жирным. Текст заголовка внутри тега h1 отображается шрифтом по умолчанию, но он также выделен жирным, так как тоже относится к классу specialtext. Обратите внимание, что span, тег без атрибутов по умолчанию, не оказывает никакого воздействия на облик страницы, так как мы не указали для него никакого стиля.