Почему каскадные?

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

Способы внедрения стилей на странице:

o использование отдельного стилевого файла и вставка его при помощи тега <link>

o описание стиля в заголовке документа

o применения стиля как параметра в теге.

Например, мы определили во внешнем стилевом файле, что текст в теге <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> определяет некую область, к которой мы можем применить стиль.