Для того, чтобы ответить на заданный выше вопрос о каскадировании, сначала
надо определиться с тем, как те или иные стили настраиваются для применения к
тем или иным элементам.

Стили описываются следующим образом:

элемент {параметр: значение;}

Пар
параметр-значение может быть несколько, тогда все они будут относиться к
соответствующему элементу. Каждая пара заканчивается точкой с запятой, последнюю
точку с запятой можно не ставить. Обратите внимание, что в описании используется
двоеточие, а не знак равенства, как в HTML - это очень типичная ошибка! Вообще,
таблицы стилей надо тщательно проверять на ошибки - если вы опечатаетесь в имени
параметра, то вам не будет выдано никаких предупреждений, просто данный параметр
будет отброшен.

Самый простой способ настроить внешний вид документа - это задать стиль
отображения для требуемых тегов HTML. Например, если мы хотим каждый параграф
вывести зеленым цветом и размером в 12 пикселей, то в описании стилей можно
написать:

P {
color: #00FF00;
font-size: 12px;
}

Способ работает хорошо, но часто возникает необходимость отдельные абзацы
как-то выделить. Для этого можно использовать классы и/или идентификаторы. По
большому счету разница между ними только в том, что идентификатор относится к
какому-то одному элементу (и, кстати, по стандарту все идентификаторы в
документе должны быть уникальными, но на это часто не обращают внимания - все
браузеры успешно работают с неуникальными идентификаторами), а класс может
применяться к группе элементов (в том числе и разнородных).

Например, если в документе требуется абзац выделить красным, то можно в
таблице стилей написать:

P#redelement {
color: #FF0000;
font-size:
12px;
}

а в документе указать: <p ID="redelement">

Если же предполагается, что красных абзацев будет несколько, то правильнее
будет использовать класс (обратите внимание, что идентификатор отделяется
"диезом", а класс - точкой):

P.redelement {color: #FF0000; font-size: 12px; } 

а в документе:
<p class="redelement">

В таблице стилей можно описать и класс, не привязанный к какому-то
элементу:

.redelement {color: #FF0000; font-size: 12px; }

Такой класс
может быть применен не только к параграфу, но и, например, к ячейке таблицы,
тегу FONT или еще чему-то - достаточно в документе указать, например, <FONT
CLASS="redelement">.

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

H1, H2, H3, H4, H5, H6 {font-size: 20px;}

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

P SMALL {color: #FF0000;}

Такое
объявление будет относиться только к элементам SMALL, расположенным
внутри P. Уровень вложенности может быть любой, но больше трех уровней
применяется редко - слишком запутанной получается картина. Разумеется, такого же
эффекта можно добиться просто создав отдельный класс и описав все вложенные
SMALL с этим классом, но если подобная конструкция повторяется часто, то
использование вложенности более удобно и позволяет сократить размер документа.
Кстати, "вкладывать" можно не только теги HTML, но и классы.

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

A:link {text-decoration: none;}
A:visited {text-decoration:
none;}
A:active {text-decoration: none;}
A:hover {text-decoration:
underline; color: #FF0000; }

уберет подчеркивание со ссылок, но когда
пользователь подведет мышку к ссылке, она подчеркнется и покраснеет.

Теперь вернемся к вопросу о каскадировании стилей, заданному в начале статьи.
Предположим, что мы описали стиль параграфа, в котором указали, что цвет текста
должен быть зеленым. Также мы задали стиль тега SMALL, чтобы цвет был синим. А
для тега SMALL "вложенного" в параграф, указали цвет - красный. Теперь, если мы
в документе внутри параграфа часть текста выделим тегом SMALL, то к этому тексту
подойдут два противоречащих друг другу определения: с одной стороны, маленький
текст должен быть синим, но "вложенный" маленький текст должен быть красным...

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

Обнаружив конфликт описаний браузер отсортирует описания по важности
(важность того или иного стиля можно указать с помощью метки !important после
описания, например:

SMALL {color: #00FF00 !important;}

После этого описания отсортируются по специфичности - чем более конкретно
указано к какому элементу надо применять стиль, тем выше специфичность. Самая
высокая специфичность у идентификатора, ниже - у класса, еще ниже - у элемента.
Именно правило с наивысшей специфичностью и будет применяться. Если же
специфичность одинакова, то будет использоваться последнее из описаний.

Именно таким образом каскадные таблицы стилей, во-первых, "каскадно"
наследуют стили от родителей к потомкам, а во-вторых, разрешают конфликты,
определяя важность противоречащих друг другу описаний...