— Ты уже знаешь, как можно добавить CSS стили конкретному HTML элементу, например изменить цвет текста внутри тега <p>. А что если нам необходимо это сделать это для нескольких HTML тегов одного типа?

— Так это же легко — просто добавляем каждому параграфу атрибут style и указываем нужное свойство.

<p style="color: red">Красный текст</p>
<p style="color: red">Еще один красный текст</p>

— Неплохо, но что если таких параграфов будет сто? А если больше? А если кроме цвета надо будет изменить размер шрифта?

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

Начнем с простого HTML документа без стилей.

<!DOCTYPE html>
<html>
  <head>
  	<title>Внутренние стили</title>
  </head>
  <body>
    <h1>Заголовок</h1>
    <p>Первый параграф</p>
    <p>Второй параграф</p>
  </body>
</html>

Первая задача - установить размер шрифта внутри всех тегов <p> - 16px.

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

  • начинаем с имени тега
  • после него поставили две фигурные скобки
  • внутри фигурных скобок — список нужных css свойств
<style>
  p {
    font-size: 16px;
  }
</style>

— А где мы должны использовать этот тег <style>?

— Сам тег <style> мы используем внутри тега <head>. Сразу после <title>. Тогда наш HTML-документ будет выглядеть вот так:

<!DOCTYPE html>
<html>
  <head>
  	<title>Внутренний стиль</title>
    <style>
      p {
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <h1>Заголовок</h1>
    <p>Первый параграф</p>
    <p>Второй параграф</p>
  </body>
</html>

Теперь размер шрифта внутри каждого параграфа будет 16px.

Вторая задача — сделать задний фон всех параграфов красным.

Для смены цвета заднего фона, мы добавим css свойство background-color. Цвет задается так же, как и цвет шрифта:

<style>
  p {
    font-size: 16px;
    background-color: red;
  }
</style>

— А если мы хотим изменить стили заголовка, нам надо добавлять еще один тег <style>?

— Нет. Внутри тега <style> можно добавить столько тегов, сколько нужно. Давай попробуем изменить высоту заголовка <h1>, чтобы выделить его.

Делается это с помощью свойства height.

— Точно, я помню как с помощью атрибута height мы задавали высоту изображения.

<style>
  h1 {
    height: 40px;
  }
  p {
    font-size: 16px;
    background-color: red;
  }
</style>

Как видишь, мы просто добавили имя тега h1 и указали стили для него точно так же, как и для параграфа. Кстати, похожим образом можно добавить и ширину. Только теперь нужно использовать свойство width.

Третья задача - установить ширину всех параграфов 500px:

<style>
  h1 {
    height: 40px;
  }
  p {
    width: 500px;
    font-size: 16px;
    background-color: red;
  }
</style>

Если мы добавим еще один параграф на нашу веб-страницу, к нему сразу же применятся все стили описанные внутри <style>.

<!DOCTYPE html>
<html>
  <head>
  	<title>Внутренний стиль</title>
    <style>
      p {
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <h1>Заголовок</h1>
    <p>Первый параграф</p>
    <p>Второй параграф</p>
    <hr>
    <p>
      Длинный параграф, который мы добавили только что.
      В нем будут все те же стили, что и в предыдущих двух.
      Нет дублирования кода, что очень приятно :).
    </p>
  </body>
</html>

Как и шрифт, свойства height и width можно не просто задавать в пикселях, но и относительно высоты родительского компонента. На это будет отдельная задача.