Основи CSS — селектори та властивості

Основи CSS — палітра кольорів та інструменти стилізації веб-сторінок

У Block 2 ми створили HTML-сторінки з правильною структурою та семантикою. Але вони виглядають... нудно. Весь текст чорний, шрифт стандартний, ніякого дизайну. Час це виправити — зустрічай CSS.

Що таке CSS?

CSS (Cascading Style Sheets — каскадні таблиці стилів) — це мова, яка описує зовнішній вигляд HTML-елементів: кольори, шрифти, розміри, відступи, розташування.

HTML відповідає за що на сторінці, CSS — за як це виглядає.

HTML = скелет будинку (стіни, двері, вікна)
CSS  = дизайн інтер'єру (фарба, шпалери, меблі)

Інфо

CSS створив Хокон Віум Лі (Håkon Wium Lie) у 1994 році. До CSS стилі вбудовували прямо в HTML — це було хаотично і неможливо підтримувати. CSS вирішив цю проблему: контент окремо, оформлення окремо.

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

1. Inline — прямо в тегу

<p style="color: red; font-size: 20px;">Червоний текст</p>

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

2. Internal — в `<style>` у `<head>`

<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>

Мінуси: працює тільки для однієї сторінки.

3. External — окремий файл (рекомендовано)

<!-- index.html -->
<head>
  <link rel="stylesheet" href="style.css">
</head>

/* style.css */
p {
  color: green;
  font-size: 18px;
}

Плюси: один файл стилів для всіх сторінок, кешується браузером, чистий HTML.

Порада

Завжди використовуй external CSS. Це стандарт індустрії. Один файл style.css стилізує весь сайт, і зміна одного рядка оновить вигляд усіх сторінок одразу.

Синтаксис CSS

селектор {
  властивість: значення;
  властивість: значення;
}

Приклад:

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

Це означає: "Всі <h1> — темно-синього кольору, розміром 32px, вирівняні по центру."

Селектори

Селектор вказує, до яких елементів застосовуються стилі.

Селектор елемента

Застосовується до всіх тегів цього типу:

p {
  color: gray;
}
/* Всі параграфи стануть сірими */

Селектор класу `.`

Застосовується до елементів з конкретним class. Один клас можна використовувати багато разів:

<p class="highlight">Виділений текст</p>
<p>Звичайний текст</p>
<p class="highlight">Ще виділений</p>

.highlight {
  background-color: yellow;
}

Селектор id `#`

Застосовується до одного елемента з унікальним id:

<h1 id="main-title">Головний заголовок</h1>

#main-title {
  color: darkblue;
}

Увага

ID повинен бути унікальним на сторінці — тільки один елемент може мати конкретний id. Для стилізації зазвичай краще використовувати класи, бо вони гнучкіші.

Групування селекторів

Однакові стилі для кількох селекторів:

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

Вкладений (descendant) селектор

Елемент всередині іншого елемента:

/* Параграфи тільки всередині article */
article p {
  line-height: 1.6;
}

Комбінування

/* Елемент з класом */
p.intro {
  font-size: 20px;
}

/* Клас всередині елемента */
nav .active {
  color: red;
}

Псевдокласи та псевдоелементи

Псевдокласи — стан елемента

Псевдокласи описують стан елемента (наведення, фокус, перший/останній):

/* Наведення мишкою */
a:hover {
  color: #e94560;
  text-decoration: underline;
}

/* Фокус (клавіатура або клік на input) */
input:focus {
  border-color: #3182ce;
  outline: none;
}

/* Перший та останній елемент у списку */
li:first-child { font-weight: bold; }
li:last-child { color: gray; }

/* Парні/непарні рядки (зебра) */
tr:nth-child(even) { background-color: #f7fafc; }

Найважливіші псевдокласи:

Псевдоклас	Коли спрацьовує
`:hover`	Курсор наведений на елемент
`:focus`	Елемент у фокусі (tab або клік)
`:active`	Елемент натиснутий (момент кліку)
`:first-child`	Перший дочірній елемент
`:last-child`	Останній дочірній елемент
`:nth-child(n)`	N-й дочірній елемент (even, odd, 3n)

Псевдоелементи — віртуальні частини

Псевдоелементи додають контент до або після елемента без зміни HTML:

/* Додати зірочку перед обов'язковими полями */
.required::before {
  content: "* ";
  color: red;
}

/* Додати стрілку після зовнішніх посилань */
a[target="_blank"]::after {
  content: " ↗";
}

Псевдоелемент	Що робить
`::before`	Вставляє контент перед вмістом елемента
`::after`	Вставляє контент після вмісту елемента
`::first-line`	Стилізує перший рядок тексту
`::first-letter`	Стилізує першу літеру
`::placeholder`	Стилізує placeholder в input

Порада

Запам'ятай різницю: одна двокрапка :hover — псевдоклас (стан), дві двокрапки ::before — псевдоелемент (віртуальна частина). В старому CSS обидва писалися з однією, тому :before теж працює, але ::before — правильніше.

Базові властивості

Кольори

/* Назва кольору */
color: red;
color: tomato;

/* HEX — шістнадцятковий код */
color: #ff6347;
color: #333;        /* скорочений: #rgb */

/* RGB */
color: rgb(255, 99, 71);

/* RGBA (з прозорістю) */
color: rgba(255, 99, 71, 0.5);  /* 50% прозорий */

Спосіб	Приклад	Коли використовувати
Назва	`red`, `blue`	Швидке тестування
HEX	`#ff6347`	Найпоширеніший у реальних проєктах
RGB	`rgb(255, 99, 71)`	Коли потрібна прозорість (rgba)

Текст та шрифти

/* Колір тексту */
color: #333;

/* Фон */
background-color: #f5f5f5;

/* Розмір шрифту */
font-size: 16px;

/* Сімейство шрифтів (з fallback) */
font-family: "Helvetica Neue", Arial, sans-serif;

/* Жирність */
font-weight: bold;    /* або 700 */
font-weight: normal;  /* або 400 */

/* Вирівнювання тексту */
text-align: left;
text-align: center;
text-align: right;

/* Прибрати підкреслення у посилань */
text-decoration: none;

/* Міжрядковий інтервал */
line-height: 1.6;

Специфічність — хто переможе?

Коли кілька правил CSS застосовуються до одного елемента, браузер вирішує конфлікт за специфічністю (specificity):

Селектор	Вага	Приклад
Елемент	1	`p`
Клас	10	`.highlight`
ID	100	`#main-title`
Inline style	1000	`style="..."`

p { color: blue; }             /* вага: 1 */
.highlight { color: green; }   /* вага: 10 — переможе! */
#intro { color: red; }         /* вага: 100 — переможе обох! */

Якщо вага однакова — перемагає правило, яке написане останнім (каскад).

Практика: стилізуємо сторінку

index.html:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Мій сайт</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Мій перший стилізований сайт</h1>
    <nav>
      <a href="#about">Про мене</a>
      <a href="#contacts">Контакти</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>Про мене</h2>
      <p class="intro">Привіт! Я вивчаю веб-розробку.</p>
      <p>Вже знаю HTML та починаю вивчати CSS.</p>
    </section>
  </main>

  <footer id="contacts">
    <p>© 2026 Мій сайт</p>
  </footer>
</body>
</html>

style.css:

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #fafafa;
}

h1 {
  color: #1a1a2e;
  text-align: center;
}

h2 {
  color: #16213e;
}

nav {
  text-align: center;
}

nav a {
  color: #0f3460;
  text-decoration: none;
}

.intro {
  font-size: 20px;
  font-weight: bold;
  color: #e94560;
}

footer {
  text-align: center;
  color: #888;
  font-size: 14px;
}

Підсумок

CSS — мова стилів (зовнішній вигляд HTML-елементів)
External CSS — рекомендований спосіб підключення (<link>)
Селектори: елемент (p), клас (.name), id (#name), вкладені (div p)
Базові властивості: color, background-color, font-size, font-family, text-align
Кольори: назви, HEX (#333), RGB/RGBA
Специфічність: inline > id > class > element

Що далі?

У наступному уроці вивчимо Box Model — як CSS розраховує розміри елементів (content, padding, border, margin).