Существует несколько способов включения CSS в HTML документы.
ТвитнутьВнешнее объявление стилей используется в случаях, когда оформление задается для группы связанных HTML документов (например для целого веб-сайта).
В этом случае все оформление выносится в один внешний файл, на который должны ссылаться все документы веб-сайта.
Внешнее объявление стилей очень удобно так как позволяет редактируя лишь один файл изменять оформление целого веб-сайта.
Для того, чтобы подключить внешний файл стилей необходимо в секции head каждой страницы веб-сайта указать ссылку на него с помощью элемента <link>:
Пример:
<head> <link rel="stylesheet" type="text/css" href="адрес_внешнего_файла_стилей" /> </head>
Обратите внимание: атрибут type тэга style стал необязательным в HTML5.
Внешний файл стилей является обычным текстовым файлом с расширением .css.
Пример содержимого внешнего файла стилей:
h1 {color:red;}
p {margin-right:38px;}
div {float:left;}
Внутреннее объявление стилей используются в случаях, когда стиль нужно задать только для одного отдельного HTML документа.
В этом случае оформление определяется в секции head с помощью тэга style:
Пример:
<head>
<style type='text/css'>
h1 {color:red;}
p {margin-right:38px;}
div {float:left;}
</style>
</head>
Строковое объявление стилей используется в случаях, когда необходимо оформить только один определенный элемент в HTML документе.
Для того, чтобы оформить элементы этим способом Вы должны воспользоваться атрибутом style соответствующего элемента.
Атрибут style может содержать любые CSS свойства.
Пример:
<p style="font-size:1.3em"> Абзац оформленный с помощью CSS.</p>
Стили подключенные разным способом имеют разный приоритет:
Если один HTML документ имеет несколько стилей подлюченных разным способом и в них заданы разные свойства оформления для одного и того же элемента, то в итоге элемент будет оформлен согласно содержимому стиля с более высоким приоритетом.
Пример:
Пример
/* Внутренние стили: */
h1 {color:red}
/* Строковые стили: */
h1 {color:green}
/* В результате заголовок будет зеленого цвета так как строковые стили имеют более высокий приоритет */