Методы интеграции
Метод 1.
Чтобы указать стили для всего сайта, подключается таблица стилей внутри конструкции <head> с помощью тега <link>.
Например:
<link rel="stylesheet" type="text/css" href="css/style.css" />
Подробнее см.раздел "Подключение таблицы стилей".
Метод 2.
Общий вид записи:
<style type="text/css">
Селектор { свойство1: значение; свойство2: значение; }
</style>
Например:
<style type="text/css">
/* У заголовка первого уровня увеличим размер шрифта до 24px и цвет поменяем на зеленый */
h1 {font-size:24px; color:green;}
/* У блока с идентификатором content установим серый цвет фона */
#content {background-color:#ссс;}
/* У всех элементов, к которым применен класс box, установим серый цвет фона, черную рамку
толщиной в 1px и отступы со всех сторон по 10px */
.box {background:#ccc; border:1px solid #888; padding:10px;}
</style>
Метод 3.
Если необходимо указать CSS-свойства для конкретного элемента, можно интегрировать CSS непосредственно в HTML-код этого элемента, с помощью атрибута "style".
Общий вид записи:
<тег style="свойство1: значение; свойство2: значение;">...</тег>
Например:
<p>
Пример <span style="color:#ff0000;">красного</span> и <span style="color:green;">зеленого</span> текста.
</p>
Результат выполнения кода:
Пример красного и зеленого текста.