Стандарт CSS определяет приоритеты, в порядке которых применяются правила стилей, если для какого-то элемента подходят несколько правил одновременно. Это называется «каскадом», в котором для правил рассчитываются приоритеты или «веса», что делает результаты предсказуемыми. Таблица стилей состоит из набора правил.
Каждое правило, в свою очередь, состоит из одного или нескольких селекторов, разделённых запятыми, и блока определений. Блок определений же обрамляется фигурными скобками, и состоит из набора свойств и их значений. Схематически это можно показать так:
селектор, селектор,... {свойство: значение;свойство: значение;}
Например:
p {font-family:"Garamond",serif;}
h2 {font-size:110 %;color: red;background: white;}
.note {color: red;background: yellow;font-weight: bold;}
p#paragraph1 {margin: 0;}
a:hover {text-decoration: none;}
#news p {color: blue;}
Здесь приведено шесть правил с селекторами p, h2, .note, p#paragraph1, a:hover и #news p.
В первых двух правилах HTML-элементам p (параграфу) и h2 (заголовку второго уровня) назначаются стили. Параграфы будут отображаться шрифтом Garamond, или, если такой шрифт недоступен, каким-либо другим шрифтом с засечками («serif»). Заголовок второго уровня будет отображаться красным на белом фоне с увеличенным кеглем (от нем. kegel — переводится как размер высоты буквы, включая нижнее и верхнее заплечики у этой буквы или знака..
Третье правило будет применено к элементам, атрибут class которых содержит слово 'note'. Например:
<p class="note">Этот параграф будет выведен полужирным шрифтом красного цвета на желтом фоне.</p>
Четвертое правило будет применяться только к элементам p, атрибут id которых равен paragraph1. Такие элементы не будут иметь внешних отступов (margin).
Пятое правило определяет стиль hover для элементов a. По умолчанию в большинстве браузеров текст элементов a подчеркивается. Это правило уберёт подчеркивание, когда указатель мыши находится над этими элементами.
Последнее, шестое правило, применяется для элементов p, которые находятся внутри элемента с атрибутом id, равным «news».
Подключить CSS к сайту можно четырьмя способами:
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css" media="all">@import "style.css";</style>
<style type="text/css">
body {color: red;}
</style>
<p style="font-size: 21px; color: green;">Рассказ о том, как вредно красить батареи</p>
