Тег <style> используется для вставки в HTML-документ CSS кода, который определяет, как будут отображаться отдельные элементы на веб-странице.

Для подключения внешнего CSS файла, используйте тег <link>.

Заключенная в тег <style> информация предназначена для браузеров, поэтому тег <style> размещается внутри элемента <head>. Если на странице используются скрипты, то их добавляют после CSS кода.

На одной странице можно использовать несколько элементов <style>.

В предыдущих версиях HTML (до пятой версии) и XHTML с тегом <style> необходимо использовать атрибут type - <style type = "text/css">.

Синтаксис

Тег <style> парный. Его содержимое пишется между открывающим (<style>) и закрывающим (</style>) тегами.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок окна веб-страницы
</title>
    <style>
      h1 {
        color: #1c87c9;
      }
      p {
        color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h1>Название текста.</h1>
    <p>Первый абзац.</p>
  </body>
</html>

Результат

styleexample1

Атрибуты

Атрибуты Значение Описание
media media_query Указывает тип устройства, под который оптимизирован стиль. По умолчанию таблица стилей поддерживает любые устройства.
scoped scoped Логический атрибуты, который указывает, что стиль применяется только к родительскому элементу и его дочерним элементам. При этом тег <style> располагается не в элементе <head>, а в том элементе, на который распространяются стили.
type text/css Указывает, какой синтаксис использовать для правильного интерпретирования стилей.
Не используется в HTML5.

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

chrome edge firefox safari opera

Практикуйте свои знания

Where and how is the <style> HTML tag usually used?
Считаете ли это полезным?