Class и Id

Идентификация и группирование элементов (class и id).
Когда нужно применить оригинальный стиль к определенным элементам сайта используется class и id для специфицирования свойств выбранных элементов. Допустим надо изменить цвет определенного заголовка или пункта меню или группы меню.

Группирование элементов с помощью class
Предположим, у нас есть два списка меню учебника - для CSS и для HTML. В документе HTML-код может быть таким:
    <p>Учебник по CSS</p>
   <ul>
   <li><a href="#">Введение</a></li>
   <li><a href="#">Основы</a></li>
   <li><a href="#">Код</a></li>
   </ul>

   <p>Учебник по HTML</p>
   <ul>
   <li><a href="#">Введение</a></li>
   <li><a href="#">Основы</a></li>
   <li><a href="#">Код</a></li>
   </ul>

Пример как это выглядит с помщью HTML

Попробуем сделать ссылки для CSS одним цветом, а для HTML другим. Для достижения этой цели мы разделим ссылки на две категории с помощью присвоения класса каждой ссылке атрибутом class.
Попробуем установить классы для предыдущего примера:

   <p>Учебник по CSS - все ссылки желтые</p>
   <ul>
   <li><a href="#" class="css">Введение</a></li>
   <li><a href="#" class="css">Основы</a></li>
   <li><a href="#" class="css">Код</a></li>
   </ul>

   <p>Учебник по HTML - все ссылки бордовые</p>
   <ul>
   <li><a href="#" class="html">Введение</a></li>
   <li><a href="#" class="html">Основы</a></li>
   <li><a href="#" class="html">Код</a></li>
   </ul>


Далее мы можем определить специальные свойства для ссылок css и html, соответственно.

   a {color: blue;}
   a.css {color: #FFBB00;}
   a.html {color: #800000;}

Настройка class
Пример с настройка классов в СSS

Как показано в примере, вы можете определять свойства для элементов, принадлежащих к определённому классу, с помощью .имя_класса в таблице стилей документа.
Идентификация элемента с помощью id
Помимо группирования элементов вам может понадобиться идентифицировать один уникальный элемент. Это можно реализовать с помощью атрибута id.
Особенность id в том, что в документе не может быть более одного элемента с данным конкретным id. Каждый id должен быть уникальным. В других случаях используйте атрибут class. Теперь взглянем на пример использования id:

<h1>Глава 1</h1>
<h2>Глава 1.1</h2>
<h2>Глава 1.2</h2>
<h1>Глава 2</h1>
<h2>Глава 2.1</h2>
<h3>Глава 2.1.2</h3>

Это могут быть заголовки документа, разделённого на главы или параграфы. Естественным будет назначить id каждой главе:

<h1 id="style1">Глава 1</h1>
<h2 id="style1-1">Глава 1.1</h2>
<h2 id="style1-2">Глава 1.2</h2>
<h1 id="style2">Глава 2</h1>
<h2 id="style2-1">Глава 2.1</h2>
<h3 id="style2-1-2">Глава 2.1.2</h3>

Заголовок, скажем, Глава 1.2, должена быть красным. Это делается в соответствии с CSS:

#style1-2{color: red;}