Каскадность заключается в том, что стили могут переопределяться. Приведенный ниже список способов внедрения стилей соответствует порядку переопределения. Нижерасположенный способ может переопределять вышерасположенный.
Способы внедрения стилей на странице:
· использование отдельного стилевого файла и вставка его при помощи тега <link>
· описание стиля в заголовке документа
· применения стиля как параметра в теге.
Например, мы определили во внешнем стилевом файле, что текст в теге <p> должен быть написан при помощи шрифта высотой 10 пунктов. Но если в заголовке странички мы дополнительно укажем, что тот же текст в теге <p> должен быть написан шрифтом в 12 пунктов, то текст будет выведен шрифтом 12 пунктов - т.е. стиль в заголовке странички переопределил стиль во внешнем файле.
Для чего это нужно? Предположим, что для всех ссылок в заголовке на нашей страничке определен следующий стиль:
<style type="text/css">
<!--
a.link { text-decoration: none; color:red; }
-->
</style>
</head>
И, следовательно, любой текст, который является гиперссылкой, автоматически становится красным и перестает быть подчеркнутым. И вот мы решили в конце странички указать ссылку на сайт автора странички, но сделать это не сильно заметно, чтобы не акцентировать на этом внимание. Сделать это нам нужно всего лишь в одном месте странички и определять для этого дополнительный класс нецелесообразно. Достаточно локально переопределить цвет ссылки:
<a href="http://www.pupkin.ru"><span style="color: #000000;">Вася Пупкин</span></a>
или так
<a href="http://www.pupkin.ru" style="color: #000000;">Вася Пупкин</a>
Сделали мы это при помощи атрибута style, а он действует лишь в пределах того тега, в котором был определен.
Тег <span></span> определяет некую область, к которой мы можем применить стиль.