HTML/CSS: Запись стилей в теге style

Основная проблема использования атрибутов для определения стилей — их перегруженность. Часто разметка HTML содержит очень много элементов, а с добавлением стилей кода становится намного больше, что плохо сказывается на чтении разметки.

Вторая проблема — исправление стилей. Для этого необходимо сначала найти нужный элемент в коде, а потом отредактировать его стили. Таких элементов на странице может быть 10, 20, 100. А для одноимённых тегов придётся записывать стили отдельно для каждого элемента.

Возникает естественное желание иметь все стили в одном месте, где можно было бы их быстро редактировать. Таким решением является использование тега <style>, внутри которого могут располагаться все необходимые стили.

Возьмём пример из прошлого урока:

<div style="font-size: 20px;">
  Этот текст будет с размером шрифта 20 пикселей

  <p>Вложенный параграф также будет иметь размер шрифта 20 пикселей</p>
</div>

Чтобы избавиться от атрибутов, добавим тег style и укажем, что для тега <div> используется шрифт размером в 20 пикселей.

<style>
  div {
    font-size: 20px;
  }
</style>

<div>
  Этот текст будет с размером шрифта 20 пикселей

  <p>Вложенный параграф также будет иметь размер шрифта 20 пикселей</p>
</div>

Таким же образом можно указать, что у параграфа будет размер шрифта 10 пикселей.

<style>
  div {
    font-size: 20px;
  }

  p {
    font-size: 10px;
  }
</style>

<div>
  Этот текст будет с размером шрифта 20 пикселей

  <p>Вложенный параграф будет иметь размер шрифта 10 пикселей</p>
</div>

Внутри тега <style> использовалась конструкция вида:

имя_тега {
  свойство: значение;
}

Всё, что было записано до открывающей скобки { называется селектор. Селекторы — правила, по которым браузер определяет к какому элементу нужно добавить стили. С некоторыми из селекторов мы познакомимся чуть позже. В примерах выше используются селекторы по тегу, то есть стили будут применяться ко всем элементам с тегом, указанном в качестве селектора

/* Для всех элементов div будет установлен размер шрифта 20px */
div {
  font-size: 20px;
}

Задание

Добавьте в редактор параграф и, используя тег style, установите размер шрифта в 10 пикселей.