Селекторы типа

Селектор определяет элемент, которому будет присвоено определение стиля. В селекторах типа в качестве селектора указывается тип HTML. Например:

H1 {text-align: center}

Это будет означать, что все элементы H1 (заголовки) в документе будут выравниваться по центру (text-align: center). Также можно указывать другие элементы HTML.

Селекторы класса

В селекторах класса в качестве селектора указывается элемент или группа элементов, оформленных одним стилем. Нужно записать элемент HTML, который будет образовывать класс, поставить после него точку, после точки записать название класса (какое угодно). Например:

H1.bluecolor {color: blue}

Таким образом, если обозначить в заголовке H1 class=bluecolor, то он будет выглядеть также (голубого цвета), как заголовок "Селекторы класса" в этом документе.

Если вы хотите сделать общий класс, который можно будет применять к любым HTML элементам, то просто не нужно записывать элемент HTML, а надо сразу поставить точку, после нее записать название класса, а после названия класса записать определение стилей. Например:

.bluecolor {color: blue}

У элемента, которому будет присвоен класс bluecolor, текст будет голубого цвета. Этот класс можно применить очень ко многим элементам: ссылке, абзацу, заголовку, форме и т.д. Очень важным является то, что к одному элементу можно применить сразу несколько классов. Для этого нужно записать их через пробел.

Селекторы id

Чтобы записать селектор id, сперва нужно поставить # (диез), после него записать название id (какое угодно, также, как у класса), а после названия id остается записать определение стиля. Ничего сложного тут нет. Все выполняется по аналогии. Например:

#bluecolor {color: blue}

В итоге, у элемента с id=bluecolor текст будет голубого цвета. Разница только в том, что определенный id может быть только у одного элемента в документе. Следовательно, селектор id может быть применим только к одному какому-нибудь элементу.

Группирование селекторов

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

H1, H2, H3, P {color: blue}

У всех заголовков H1, H2, H3 и абзацев (P) в документе текст будет голубого цвета.