Что такое каскадные таблицы стилей или же CSS? Чтобы было все предельно понятно, попробую начать с того, что такое стиль?
Изучая html, Вы обратили внимание на то, что странице веб-документа можно придать различный вид, применяя те или иные параметры для тега. Например, можно задать шрифт для абзаца или для отдельного предложения, или даже слова. Для этой цели мы применяем вместе с тегом <font> такие атрибуты, как size, color, face… Например, если мы хотим задать шрифт для отдельного абзаца, мы пишем <p><font size=2 color=green face=Verdana>….</font></p>. Это означает, что для данного абзаца мы задали шрифт размера 2, цвет шрифта зеленый и тип Verdana.
Но для этой же цели существует и другой вариант — с применением стилей: <p style=»font-size: 2; font-colr: green; font-family: Verdana;»>…</p>
И в первом, и во втором случае результат мы получаем один и тот же. И на первый взгляд применение стилей ничего интересного не внесло в нашу работу. Но ведь мы еще не дошли до таблицы стилей. Вот тут уже начинается интересное. Мы можем не прописывать стили непосредственно внутри текста страницы, а вынести их в отдельный файл, расположив его между тегами <head></head>.
Это будет выглядеть примерно так:
<head>
<style>
p{font-size: 2; font-colr: green; font-family: Verdana;}
</style>
</head>
Теперь для любого тега <p></p> на странице будут действовать стили, описанные в данной таблице. Почему таблица? Потому что здесь мы можем задать стили любому тегу на данной странице.
Но это еще не все. Давайте представим, что на Вашем сайте имеется несколько десятков страниц. Или даже сотня. На каждой странице Вы задали стили. Но в один прекрасный моменты Вы вдруг решаете, что когда-то были не совсем правы или просто был другой взгляд на вещи. Вобщем, Вы решаете поменять на своих страницах размер шрифта или его цвет, или тип. Представляете, сколько нужно проделать работы, чтобы изменить все сто страниц?!
Вот тут-то нам и пригодится таблица стилей. Но уже не как отдельный файл на странице в хедере. А как отдельный файл вашего сайта. Этот файл будет называться, например, style.css. Именно так и называют его многие веб-мастера. А на каждой странице сайта в хедере мы просто поместим такую строку <link rel=»stylesheet» href=»style.css» type=»text/css»>. Теперь браузер, открывая данную страницу, будет знать, что к странице нужно применить стили, описанные в таблице style.css.
И вот теперь у Вас есть возможность одним росчерком пера изменять стили на всех страницах своего сайта одновременно, внося изменения в таблице стилей. Ну что, нравится Вам такое? Мне так очень.
Тем более, что я здесь ограничился лишь шрифтом. На самом деле CSS дают очень большие возможности для оформления дизайна Вашего сайта. При этом страницы сами по себе получаются «легкие», а вся нагрузка по оформлению страниц ложится на таблицу стилей.
И последнее. Почему таблицы стилей да еще каскадные? Каскадность — возможность применения нескольких таблиц стилей для сайта. Ну это для профессионалов. А кроме того каскадность предполагает, что в таблице можно задать приоритеты стилей. Например, в описанном выше примере стиль распространялся на все теги <p></p>. Но у веб-мастера может появиться желание выделить один абзац из общей массы, задав ему иной стиль. Тогда для этой цели можно применить класс или идентификатор.
Это будет выглядеть так: на странице записываем <p class=»new»></p>; в таблице прописываем p.new{ }. Теперь на данный абзац будут распространяться стили, прописанные в таблице для абзаца, которому присвоен класс «new». Название классов и идентификаторов значения не имеет — каждый их называет по своему усмотрению.