CSS (Cascading Style Sheets - каскадные таблицы стилей) - это настоящий фундамент современного веба. Честно говоря, встретить сегодня сайт, созданный без его участия, крайне сложно! Эта технология стала настолько привычной и важной, что мы даже не всегда замечаем её работу.

По сути, CSS-код представляет собой чёткий набор указаний для браузера. Он объясняет как именно и в каком месте следует выводить элементы страницы на экран. Под этими «элементами» обычно подразумеваются теги XHTML/HTML и всё то содержимое, которое они хранят.

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

Для удобства эти инструкции часто выносят в отдельный текстовый файл с расширением .css, либо помещают прямо в начало документа XHTML/HTML в виде отдельного фрагмента кода.

Главная и самая красивая идея CSS заключается в разделении дизайна и содержимого. Это позволяет держать порядок: CSS отвечает исключительно за внешний вид и эстетику, тогда как XHTML/HTML занимается содержанием и логической структурой документа.

Давайте взглянем на небольшой фрагмент XHTML-документа:

h1Сказка/h1

pВ одной далёкой стране, на краю болота, под пеньком, жил ёжик. И вот однажды …/p

Обратите внимание: в этой служебной разметке мы видим лишь элемент заголовка h1 и абзац p. Здесь ни словом не упомянуто об оформлении - шрифтах, цвете текста, фоне или отступах. Вся эта визуальная магия возложена на CSS:

/* оформляем заголовки: */

h1 { color: red; background-color: yellow; font: Tahoma 2em; } /* оформляем абзацы текста: */ p { color: grey; line-height: 150%;}