РОЗДІЛ 01 · ОСНОВИ

Теорія CSS

Послідовний маршрут від першої CSS-правила до адаптивного інтерфейсу. Обери тему й рухайся у власному темпі.

01. Що таке CSS?

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

h1 {
  color: tomato;
  font-size: 2rem;
}

Стилі можна підключити окремим файлом через <link rel="stylesheet" href="styles.css">, додати у блоці <style> або безпосередньо до елемента через атрибут style.

02. Синтаксис правила

Правило складається із селектора та блоку оголошень. У кожному оголошенні є назва властивості, двокрапка і значення; оголошення завершуються крапкою з комою.

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

Порада: розділяй правила порожнім рядком і використовуй зрозумілі назви класів.

03. Селектори

Селектор визначає, до яких елементів застосувати стиль. Селектор елемента: p. Клас: .card. Ідентифікатор: #main. Комбінатор нащадка, наприклад .menu a, знаходить посилання всередині меню.

.notice { color: #c94835; }
nav a:hover { text-decoration: underline; }
input:focus-visible { outline: 3px solid tomato; }

04. Каскад, специфічність і наслідування

Коли кілька правил задають одну властивість, браузер враховує важливість, специфічність і порядок оголошень. Стилі з більш конкретним селектором зазвичай перемагають загальні. Частина властивостей, зокрема колір тексту і шрифт, успадковується від батьківського елемента.

Уникай надмірного використання !important: воно ускладнює перевизначення стилів.

05. Блокова модель

Кожен блок складається з вмісту, внутрішнього відступу padding, рамки border та зовнішнього відступу margin. Правило box-sizing: border-box робить розрахунки розмірів передбачуваними.

* { box-sizing: border-box; }
.card { padding: 1rem; border: 1px solid #ccc; }

06. Колір і типографіка

Колір задають іменем, HEX, RGB або HSL. Для доступного контрасту перевіряй читабельність тексту на фоні. Шрифти, розмір, товщина і висота рядка формують ієрархію та ритм тексту.

body { color: #202b2b; font: 1rem/1.6 sans-serif; }
h1 { font-size: 2.5rem; line-height: 1.1; }

07. Flexbox і Grid

Flexbox зручний для вирівнювання елементів в одному напрямку. CSS Grid керує двовимірною сіткою рядків і колонок. Обирай інструмент відповідно до структури макета.

.row { display: flex; gap: 1rem; align-items: center; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

08. Адаптивність

Відносні одиниці, гнучка сітка і медіазапити допомагають сторінці працювати на вузьких і широких екранах.

.layout { display: grid; grid-template-columns: 1fr 1fr; }
@media (max-width: 700px) {
  .layout { grid-template-columns: 1fr; }
}

Спробувати у практиці