HTML тег <style>

Элемент <style> (от англ. "style" ‒ «стиль») задаёт CSS стили для HTML-документа, то есть то, как будут отображаться отдельные элементы и вся страница в целом. На одной веб-странице можно использовать сколько угодно элементов <style>.

Примечание: Если атрибут scoped не установлен, то элемент <style> должен располагаться внутри элемента head.

Совет: Если вы хотите подключить внешний файл с таблицей стилей, используйте для этого тег link, он создает связь между текущим документом и внешним ресурсом.

Совет: Если на странице используется код JavaScript, его обычно добавляют после таблиц стилей. Программы JavaScript часто полагаются на таблицы CSS, поэтому, добавляя таблицы стилей первыми, вы гарантируете, что код JavaScript будет располагать всей необходимой для своего выполнения информацией.

Синтаксис

<head>
  ...
  <style type="..."> ... </style>
  ...
</head>

Закрывающий тег

Обязателен.

Атрибуты

type
Указывает тип данных, который может быть передан посредством сети интернет с применением стандарта MIME (MIME-типы). В HTML5 атрибут type больше не требуется для CSS, так как значением по умолчанию является type = "text/css".

scopedHTML5
Если указан этот атрибут, то стиль применяется только внтури своего родительского элемента. Если не указан, то стиль применяется ко всему документу.

media
Определяет, под какое устройство оптимизирован стиль CSS, он используется для указания, что стиль оптимизирован под определенное устройство (пример: iPhone, принтер). Если атрибут не указан, то по умолчанию подразумевается, что таблица стилей оптимизирована под любые устройства.

Для этого элемента доступны глобальные атрибуты и события.

Стилизация по умолчанию

Большинство браузеров отобразит элемент <style> со следующими значениями CSS по умолчанию:

style {
    display: none;
}

Различия между HTML 4.01 и HTML5

В HTML 5 добавлен новый атрибут scoped, который позволяет определить стили для определенного раздела документа. В HTML 5 отсутствует необходиость использовать дополнительный атрибут ‒ type = "text/css" (значение по умолчанию).

Пример использования:

Форматирование текста в документе:

Пример HTML:

Попробуй сам
<html>
</head>
<style type="text/css">
p {
background-color: #f0f0f0;
font-style: oblique;
color: #333;
}
</style>
</head>
<body>

<p>Текст абзаца отформатирован с помощью Каскадных Таблиц Стилей (CSS).</p>

</body>
</html>

Спецификации

Спецификация Статус
WHATWG HTML Living Standard (WHATWG) Живой стандарт
HTML 4.01 (W3C) Рекомендация
HTML5 (W3C) Рекомендация
HTML 5.1 (W3C) Рекомендация

Поддержка браузерами


Учебник HTML

HTML уроки: HTML Стили

HTML Элементы



Contema