Что такое CSS

CSS (англ. Cascading Style Sheets - Каскадные Таблицы Стилей) это основной язык для описания внешнего вида и форматирования веб-страниц в Интернете и документов, написаных, в основном, с помощью языков разметки текста, таких как HTML и XML.

Первоначальная разработка языка разметки, такого как HTML, предоставляет информацию о своем форматировании и внешнем виде, но в скором времени стало понятно, что разделение составляющих на два слоя, Document Content (содержание документа) и Document Presentation (представление документа), с выполнением CSS в последний момент, придаст больше ясности. Это историческая причина, почему в HTML есть такие тэги как "font", едиственное назначение которого - регулирование семейства, цвета и размера шрифта в определенном месте, задача, которую в наши дни выполняет CSS. Это позволяет разработчику использовать одно и то же форматирование для нескольких частей одного документа или даже для множества документов. Здесь пример, подтверждающий мои слова, не беспокойтесь, если вы не полностю понимаете, что он делает, так как все аспекты будут разъяснены на протяжении данного руководства.

Форматирование текста с использованием только HTML;

This is a piece of
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>text</b></i></font> with
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>highlighted</b></i></font> elements in
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>it</b></i></font>.

Более новый способ форматирования с использованием CSS;

<style type="text/css">
.highlight {
	color: Blue;
	font-style: italic;
	font-weight: bold;
	font-size: 120%;
	font-family: Tahoma, Verdana, Arial;
}
</style>

This is a piece of
<span class="highlight">text</span> with
<span class="highlight">highlighted</span> elements in
<span class="highlight">it</span>.

Заметьте, как легко я использую один набор стилей для нескольких HTML тэгов. Его трехкратное применение уже является преимуществом, как мы делали в примере, но на этом все не заканчивается; поместите CSS в отдельный файл (подробнее об этом далее) и вы сможете использовать одни стили для целого веб-сайта. А как на счет решения, изменить цвет выделения текста с синиго на красный? При первом подходе вам пришлось бы изменить вручную каждый тэг, но с CSS просто измените стиль для единственного класса ".highlight".

Заключение

CSS позволяет вам без труда применять стили форматирования и разметки для множества HTML элементов и даже страниц. В этом вступлении вы посмотрели на CSS код, но мы не рассказывали о принципе его работы и о том, почему он выглядит именно так, это будет темой для нескольких последующих глав, где мы начнем с нуля и детально все разъясним.