Розділ 2 · Завдання 1

Що таке CSS

Переносимо стилі з style="" в один блок — і керуємо всіма елементами одразу.

Проблема з інлайн-стилями

Досі стиль писали прямо на тегу: <p style="color: red;">. Якщо таких абзаців 10 — доведеться писати це 10 разів. Захочете змінити колір — переправляти всюди вручну.

Завдання

Створіть новий файл styles-demo.html і напишіть:

styles-demo.html

<!DOCTYPE html>
<html>
<head>
  <title>Вчимо CSS</title>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>

<p>Цей текст червоний</p>
<p>І цей теж червоний</p>

</body>
</html>

Як це читати

p — селектор: до кого застосувати стиль (тут — усі теги <p> на сторінці).

{ } — усередині фігурних дужок самі правила.

color: red; — властивість і значення через двокрапку, в кінці обов'язково крапка з комою.

Спробуй

Зміни red на blue чи green, збережи, онови браузер — обидва абзаци поміняють колір одночасно. Ось у чому сила CSS.

Курс створено за підтримки бухгалтерського бюро Galakton, Білосток, Польща