🎨 Що таке CSS і навіщо він потрібен

Подивіться на цей код — це проста HTML-сторінка про учня 11 класу:

<h1>Петренко Олег</h1>
<p>Я навчаюсь у 11 класі. Цікавлюсь веб-розробкою.</p>
<ul>
  <li>Програмування</li>
  <li>Малювання</li>
  <li>Спорт</li>
</ul>

Код правильний. Теги розставлені як треба. Відкриваємо в браузері — і бачимо звичайний чорно-білий текст, схожий на звичайний документ із Word.

• Заголовок — чорний.
• Текст — чорний.
• Список — чорний.
• Ніякого кольору, ніякого виділення.

Це працює, але виглядає нудно. А тепер погляньте на ту саму сторінку, але зі стилями:

Різниця очевидна. І найцікавіше: HTML-код майже не змінився. Ми просто додали трохи CSS.

🎨 Що таке CSS

Найпростіша аналогія:

• HTML — це скелет сторінки. Він визначає, що є на сторінці: заголовок, абзац, список, картинка, посилання.
• CSS — це одяг, зачіска й макіяж. Він визначає, як це виглядає: якого кольору, якого розміру, де розташовано.

Один і той самий скелет можна одягнути по-різному. Один і той самий HTML можна оформити десятками різних способів — і кожен виглядатиме по-своєму.

💡 Навіщо розділяти HTML і CSS

Уявіть, що ви пишете книгу. Можна було б одним і тим самим олівцем писати і текст, і малювати обкладинку, і оформлювати заголовки. Але так ніхто не робить.

У справжньому видавництві:

• Автор пише текст — це зміст книги.
• Дизайнер оформлює обкладинку, вибирає шрифт, кольори — це зовнішній вигляд.

У вебі так само:

• HTML — це «автор», який пише зміст.
• CSS — це «дизайнер», який оформлює вигляд.

📌 Навіщо це потрібно:

• Легко змінювати. Захотіли інший колір — змінюємо в одному місці, і оновлюється вся сторінка (або навіть увесь сайт).
• Чистий код. HTML залишається простим — тільки структура, без кольорів і розмірів.
• Однаковість. На всіх сторінках сайту — однаковий стиль заголовків, абзаців, кнопок.

📖 Формула CSS: як це виглядає в коді

Найпростіший приклад. Хочемо, щоб заголовок <h1> став темно-синім:

<h1 style="color: navy;">Петренко Олег</h1>

Що змінилося? У тегу <h1> з’явився атрибут style. Усередині нього — правило CSS:

color: navy;

Розберімо його по частинах:

• color — що ми хочемо змінити. Тут — колір тексту.
• : — двокрапка. Розділяє «що змінюємо» і «на що змінюємо».
• navy — на що ми хочемо змінити. Темно-синій колір.
• ; — крапка з комою. Означає «правило закінчилося».

🔧 Додамо другу властивість

Хочемо, щоб заголовок був не лише синім, а й більшим:

<h1 style="color: navy; font-size: 40px;">Петренко Олег</h1>

Тепер заголовок — темно-синій і великий (40 пікселів).

📖 Як називаються частини CSS

Ми вже побачили формулу властивість: значення;. Але в CSS усе має чіткі назви — і їх треба знати, щоб розуміти одне одного.

Розберімо на прикладі повного правила (таке ми будемо писати в <style>):

h1 {
  color: navy;
  font-size: 40px;
}

Ось як називаються всі частини:

h1 { color: navy; font-size: 40px; }
│  │      │    │      │       │
│  │      │    │      │       └── значення
│  │      │    │      └── властивість
│  │      │    └── (крапка з комою — кінець оголошення)
│  │      └── ОГОЛОШЕННЯ
│  └── блок оголошень
└── селектор

│                                            │
└──── усе разом = ПРАВИЛО CSS ───────────────┘

Розберімо кожен термін:

h1 { color: navy; font-size: 40px; }

⚠️ Важливо: правило ≠ оголошення

Це той момент, який часто плутають.

• Правило CSS — це все разом: селектор + дужки + оголошення.
• Оголошення — це лише одна пара властивість: значення;.
• В inline ми пишемо тільки оголошення — бо селектор уже відомий (це сам тег), а фігурних дужок немає.

Тобто:

<h1 style="color: navy;">...</h1>

Тут не «правило», а одне оголошення color: navy; усередині атрибута style.

А ось це — повне правило:

h1 { color: navy; }

🔧 Простий спосіб запам’ятати

Задайте собі три питання, дивлячись на будь-який CSS-код:

1. Хто? → це селектор (h1)
2. Що з ним робимо? → це властивість (color) і значення (navy) — разом вони оголошення
3. Де ці дії записані? → у блоці оголошень між { }

А все разом — це правило CSS.

❓ Поміркуйте:

• Що таке селектор? Що він показує?
• Чим оголошення відрізняється від правила?
• Скільки оголошень може бути в одному правилі?
• У рядку <p style="color: red;"> — це правило чи оголошення?

⚠️ Що не так із таким способом

Такий спосіб (коли стилі пишуться прямо в тегу) називається вбудованим (або inline).

Уявіть, що таких заголовків на сторінці 10. Треба буде в кожному писати style="color: navy; font-size: 40px;". А якщо 100?

• Легко десь забути або зробити помилку.
• Якщо треба змінити колір — доведеться редагувати усі заголовки.
• Код стає довгим і незручним для читання.

Саме тому існує кращий спосіб — писати CSS-правила окремо від тегів. Про це — у наступному блоці.

❓ Поміркуйте:

• Чому на сайтах розділяють HTML і CSS?
• Що станеться, якщо у великому проєкті писати стилі прямо в тегах?
• Чи можете ви назвати сайт, де HTML-код і CSS-код — це різні файли?

📚 Три способи підключення CSS

У попередньому блоці ми побачили найпростіший спосіб: писати стилі прямо в тегу — <h1 style="color: navy;">. Це працює, але має проблему: якщо елементів багато, код стає громіздким.

Насправді в CSS є три способи підключення стилів до HTML. Розберімо кожен і побачимо, коли який використовувати.

⚠️ Важливе уточнення про синтаксис

Перш ніж рухатися далі — запам’ятаймо одну важливу річ.

У трьох способах синтаксис запису правил трохи різний.

• В inline (у тегу) — синтаксис скорочений: ми пишемо тільки пари властивість: значення; і не пишемо ні селектора, ні фігурних дужок.
• В internal і external — синтаксис повний і однаковий: селектор { властивість: значення; }.

🥇 Спосіб 1. Вбудований (inline)

Як виглядає: стилі пишуться прямо в тегу через атрибут style.

<h1 style="color: navy; font-size: 40px;">Петренко Олег</h1>

Розберімо уважно, що тут написано:

• Ми не пишемо селектор (h1) — бо селектор «вбудований» у сам тег. Ми вже знаходимось у <h1>, отже браузер розуміє, до чого застосовувати.
• Ми не пишемо фігурних дужок — бо тут вони не потрібні.
• Пишемо тільки оголошення — пари властивість: значення;, розділені крапкою з комою.

Недоліки:

• Якщо таких заголовків 10 — треба 10 разів писати style="...";
• Важко змінювати;
• HTML «змішується» з CSS.

🥈 Спосіб 2. Внутрішній (internal)

Як виглядає: CSS-правила пишуться окремо від тегів, але в тому самому HTML-файлі — у розділі <head>, усередині тега <style>.

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <title>Про мене</title>

  <style>
    h1 {
      color: navy;
      font-size: 40px;
    }
    p {
      font-size: 18px;
    }
  </style>

</head>
<body>

  <h1>Петренко Олег</h1>
  <p>Я навчаюсь у 11 класі.</p>

</body>
</html>

Що тут:

• У <head> з’явився тег <style>...</style> — це контейнер для CSS-правил.
• Усередині <style> ми пишемо повні правила: селектор { властивість: значення; }.
• У <body> теги залишаються простими — без style="...".

Що це дає:

• Одне правило діє для всіх <h1> на сторінці;
• Якщо додати ще один <h1> — він теж стане синім автоматично;
• Усі абзаци <p> на сторінці одразу мають розмір 18px.

🥉 Спосіб 3. Зовнішній (external)

Як виглядає: CSS-правила виносяться в окремий файл із розширенням .css, який підключається до HTML через тег <link>.

Файл style.css:

h1 {
  color: navy;
  font-size: 40px;
}

p {
  font-size: 18px;
}

Файл index.html:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <title>Про мене</title>

  <link rel="stylesheet" href="style.css">

</head>
<body>

  <h1>Петренко Олег</h1>
  <p>Я навчаюсь у 11 класі.</p>

</body>
</html>

Що тут:

• CSS-правила вийшли з HTML-файлу і переїхали в окремий файл style.css.
• Формат запису правил — такий самий, як в internal (селектор + фігурні дужки + оголошення).
• Відрізняється тільки місце — не в <style>, а в окремому файлі.

Розберімо тег <link>:

• <link> — підключає зовнішній файл;
• rel="stylesheet" — каже браузеру: «це файл зі стилями»;
• href="style.css" — шлях до файлу.

📊 Порівняння трьох способів

🔄 Один і той самий результат — три способи

Хочемо, щоб усі заголовки <h1> були темно-синіми.

Спосіб 1 (inline):

<h1 style="color: navy;">Заголовок 1</h1>
<h1 style="color: navy;">Заголовок 2</h1>
<h1 style="color: navy;">Заголовок 3</h1>

Три заголовки — три рази пишемо style="color: navy;". Стомливо.

Спосіб 2 (internal):

<head>
  <style>
    h1 { color: navy; }
  </style>
</head>
<body>
  <h1>Заголовок 1</h1>
  <h1>Заголовок 2</h1>
  <h1>Заголовок 3</h1>
</body>

Правило пишемо один раз — і воно діє для всіх трьох заголовків. Якщо додамо четвертий — він теж стане синім автоматично.

Спосіб 3 (external):

Те саме, але правило живе в окремому файлі. І якщо в нас не одна сторінка, а сто — на всіх ста сторінках усі <h1> будуть синіми, бо всі підключають один і той самий style.css.

📌 Який спосіб обираємо ми

🔧 Що запам’ятати

❓ Поміркуйте:

• Чим відрізняється синтаксис inline від internal?
• Чому в internal і external синтаксис однаковий, а в inline — інший?
• Якщо уявити сайт із 50 сторінок — який спосіб найзручніший? Чому?

✍️ Синтаксис CSS: як правильно писати код

🤔 Браузеру все одно, як ти пишеш

Ось два CSS-правила. Подивіться уважно — чи вони однакові?

Варіант 1:

h1 { color: navy; font-size: 40px; }

Варіант 2:

h1        {
    color     :     navy      ;
    font-size :     40px      ;
}

Результат у браузері — однаковий. Заголовок <h1> стане темно-синім і великим. Різниці немає.

Чому? Бо браузер не читає код як людина. Йому байдуже:

• скільки пробілів між словами;
• скільки переносів рядків;
• чи є відступи;
• чи все в одному рядку.

Усе це для браузера — просто роздільники. Він орієнтується тільки на символи:

• { і } — фігурні дужки;
• : — двокрапка;
• ; — крапка з комою;
• назви селекторів, властивостей і значень.

⚠️ Але є проблема: код читають люди

Якщо браузеру все одно — може, писати все в один рядок? Ні.

Бо код пишеться один раз, а читається багато разів:

• Тобою — коли через тиждень повертаєшся до свого проєкту;
• Твоїм колегою — коли він допомагає тобі з помилкою;
• Тобою ж — коли через місяць треба додати нову властивість.

І якщо код виглядає так:

h1 { color: navy; font-size: 40px; text-align: center; }
p { font-size: 18px; color: gray; }
ul { list-style: none; }

— знайти в ньому потрібну властивість складно. А якщо правил буде 20? А якщо 50?

🔄 Порівняння: поганий і хороший стиль

Подивіться на два варіанти одного й того самого коду.

❌ Погано — усе в один рядок:

h1 { color: navy; font-size: 40px; text-align: center; }
p { font-size: 18px; color: gray; }

✅ Добре — з переносами й відступами:

h1 {
  color: navy;
  font-size: 40px;
  text-align: center;
}

p {
  font-size: 18px;
  color: gray;
}

Що змінилося:

• Кожне оголошення — на своєму рядку;
• Усередині { } — відступ;
• Між правилами — порожній рядок.

Результат у браузері — однаковий. Але другий варіант читається набагато легше.

🎯 Три правила оформлення CSS-коду

Формалізуємо «хороший стиль» у три конкретні правила.

h1 { color: navy; font-size: 40px; }

h1 {
  color: navy;
  font-size: 40px;
}

💡 Точка з комою: маленька, але важлива

Ось невелика, але дуже практична деталь.

В останньому оголошенні в блоці точку з комою можна не ставити:

h1 {
  color: navy;
  font-size: 40px
}

Код працюватиме. Але краще ставити завжди. Чому?

Уявіть: через місяць ви вирішили додати ще одне оголошення знизу. Пишете його — і забуваєте поставити ; після попереднього. Код ламається.

✅ Міні-чек-ліст: що не можна забувати

Ось символи, на які браузер орієнтується найбільше. Якщо забути хоч один із них — правило або не працює, або «з’їдає» наступне.

📋 Правила CSS

color: navy;
font-size: 40px;

h1 {

color: navy;

🔮 Що буде далі

У наступному уроці ми розберемо:

• Селектори за тегом, за класом і за id;
• Коментарі /* ... */ — щоб залишати пояснення в коді;
• І тоді ми зможемо стилізувати не всі елементи одразу, а тільки конкретні.

А поки — ми навчилися писати CSS правильно й акуратно. Це важливіше, ніж здається.

❓ Поміркуйте:

• Чому браузеру байдуже, як оформлений код?
• А чому нам — ні?
• Що станеться, якщо забути ; після оголошення?
• Скільки пробілів треба робити в відступі? Це принципово?

✅ Підсумок

Ми розібрали, що таке CSS і як він працює. Ось головне, що варто запам’ятати.

❓ Перевірте себе

Спробуйте відповісти на кожне запитання самостійно — а потім натисніть, щоб перевірити себе.