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

Окремий файл .css

Виносимо CSS в окремий файл, щоб підключати його до багатьох сторінок одразу.

Крок 1

Створіть файл style.css в тій самій папці. Перенесіть туди все, що було між <style> і </style> — без самих тегів:

style.css

p {
  color: red;
}

.highlight {
  background-color: yellow;
  font-weight: bold;
}

Крок 2

У styles-demo.html видаліть блок <style>...</style>, а в <head> додайте один рядок:

styles-demo.html

<!DOCTYPE html>
<html>
<head>
  <title>Вчимо CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<p>Цей текст червоний</p>
<p>І цей теж червоний</p>
<p class="highlight">А цей — червоний, з жовтим фоном і жирний</p>
<p>Знову звичайний червоний</p>

</body>
</html>

Як це читати

<link rel="stylesheet" href="style.css"> — тег без закриття. rel="stylesheet" каже браузеру «це файл стилів», href — де його шукати.

Чому це зручніше

Тепер можна підключити той самий style.css до другого файлу (наприклад about.html) — обидві сторінки виглядатимуть однаково, і зміна кольору в одному місці змінить його одразу всюди.

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