Что такое CSS?

Очень многие начинающие вебмастера не могут разобраться, что такое CSS и с чем его «едят». В этом разделе своего сайта я постараюсь максимально подробно «разжевать» и на примерах показать, как правильно работать с листами стилей. Сразу сделаю существенную оговорку — будут рассматриваться внешние листы стилей (впрочем, внешний лист стилей от внутреннего не сильно отличается).
CSS (Cascading Style Sheets — каскадные таблицы стилей) — мощное и удобное средство форматирования сайта.

Основная цель каскадных таблиц стилей — разделить содержимое веб-страницы (написанной, например, на HTML) и форматирование (представление) документа (CSS). Т.е., в коде html-страницы находится информация, которую видит пользователь, загрузив эту страницу в свой браузер. А вот то, в каком виде он видит эту информацию на своем экране — за это «отвечает» файл каскадной таблицы стилей.

Скорее всего, вы уже знаете, что файл стандартной html-страницы имеет название, скажем, index.html
Где:
index — имя файла;
html — расширение файла.
Именно расширение файла «говорит» браузеру ЧТО это за файл и как он с ним должен работать.
Файл каскадного листа стилей, обычно, имеет название style.css
Расширение css позволяет браузеру идентифицировать данный файл именно, как лист стилей, и интерпретировать его содержимое должным образом.
Как правило, один файл листа стилей «обслуживает» весь сайт. Располагается он в корневом каталоге сайта (там, где и главная страница сайта). Для подключения листа стилей в коде html-страницы должен быть прописан МЕТА-тег следующего содержания:

Имя файла каскадного листа стилей и путь к нему указывается в атрибуте href. Будьте внимательны: следите за правильным путем к листу стилей (на разных страницах он может быть разным)! Можно использовать абсолютный путь:

Собственно вся «прелесть» использования внешнего листа стилей заключается в том, что вся информация о форматировании ВСЕГО сайта находится в одном файле! Нетрудно догадаться, что, поменяв пару-тройку строчек в файле style.css, ВЕСЬ сайт мгновенно преображается, реагируя на изменения. Понимаете теперь, какой это мощный и гибкий инструмент «причесывания» вашего сайта?!

Источник: on-line-teaching.com