CSS з нуля: як оформлювати вебсторінки та керувати їхнім виглядом

Вступ

У попередній статті ми розглянули HTML і навчилися створювати структуру вебсторінки. Але якщо відкрити простий HTML-документ у браузері, він матиме досить стриманий вигляд: звичайний текст, заголовки, списки та посилання.

Як перетворити таку сторінку на повноцінний сайт із кольорами, шрифтами, кнопками, картками, меню та зручним розташуванням елементів?

Для цього використовується CSS.

У цій статті ми розглянемо CSS із самого початку: навчимося писати стилі, підключати їх до HTML, працювати з кольорами, розмірами, шрифтами, відступами та розташуванням елементів. Також розберемо, як браузер визначає, які стилі застосовувати, що таке адаптивний дизайн і як створити власну оформлену вебсторінку.

1. Що таке CSS?

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

За допомогою CSS можна визначати:

• колір тексту та фону;

• розмір і тип шрифту;

• відступи між елементами;

• ширину й висоту блоків;

• межі, заокруглення та тіні;

• розташування елементів на сторінці;

• поведінку макета на різних розмірах екрана;

• анімації та візуальні ефекти.

Якщо HTML визначає, що саме знаходиться на сторінці, то CSS визначає, як ці елементи виглядають.

Простий приклад

Маємо HTML:

<h1>Мій перший сайт</h1>

<p>Я вивчаю веброзробку.</p>

Без додаткових стилів браузер відобразить заголовок і абзац відповідно до своїх стандартних стилів.

Тепер додамо CSS:

h1 {

  color: blue;

  font-size: 36px;

}




p {

  color: gray;

  font-size: 18px;

}

У результаті:

• заголовок стане синім і більшим;

• абзац стане сірим і матиме заданий розмір.

HTML залишився незмінним. Ми змінили лише його оформлення.

Чому CSS називається каскадними таблицями стилів?

Слово Cascading — «каскадні» — описує один із фундаментальних механізмів CSS.

CSS використовує визначені правила, щоб з'ясувати, яке значення застосувати в конкретній ситуації.

Цей механізм називається каскадом. До нього ми повернемося окремо.

2. Як CSS працює разом із HTML?

Браузер не сприймає CSS як окрему сторінку. Він застосовує стилі до HTML-документа.

Спрощено процес виглядає так:

1. Браузер отримує HTML-документ.

2. Аналізує його та формує DOM — структуру елементів сторінки.

3. Завантажує або отримує CSS-правила.

4. Визначає, які правила відповідають кожному елементу.

5. Обчислює остаточні значення стилів.

6. Розраховує розташування та розміри елементів.

7. Відображає сторінку на екрані.

Наприклад, HTML містить заголовок:

<h1>Навчальний блог</h1>

CSS містить правило:

h1 {

  color: darkblue;

}

Браузер знаходить елемент h1, застосовує до нього правило та відображає заголовок темно-синім кольором.

Отже, CSS працює зі структурою HTML, а не замінює її.

3. Як підключити CSS до HTML?

Існує три основні способи додавання CSS до HTML-документа.

3.1. Вбудовані стилі через атрибут style

Можна записати CSS безпосередньо всередині HTML-елемента.

<h1 style="color: red; font-size: 32px;">

  Мій заголовок

</h1>

У цьому прикладі:

• color: red задає червоний колір;

• font-size: 32px задає розмір шрифту.

Такий спосіб називається inline CSS.

3.2. Внутрішня таблиця стилів через <style>

CSS можна розмістити безпосередньо в HTML-документі всередині елемента <style>.

Зазвичай його додають у секцію <head>.

<!DOCTYPE html>

<html lang="uk">

<head>

  <meta charset="UTF-8">

  <title>Моя сторінка</title>




  <style>

    h1 {

      color: blue;

    }




    p {

      font-size: 18px;

    }

  </style>

</head>




<body>

  <h1>Привіт!</h1>

  <p>Я вивчаю CSS.</p>

</body>

</html>

Цей спосіб зручний для невеликих демонстрацій або окремих сторінок, але не завжди підходить для великих проєктів.

3.3. Зовнішній CSS-файл

Найпоширеніший підхід у веброзробці — зберігати стилі в окремому файлі з розширенням .css.

Наприклад, створимо файл:

• style.css

Усередині нього напишемо:

h1 {

  color: blue;

}




p {

  font-size: 18px;

}

Потім підключимо його до HTML-документа через <link>:

<head>

  <meta charset="UTF-8">

  <title>Моя сторінка</title>

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

</head>

Браузер завантажить файл style.css і застосує його правила до відповідних елементів.

Якщо проєкт має таку структуру:

MyFirstWebsite/

│

├── index.html

│

└── css/

    └── style.css

Тоді підключення виглядатиме так:

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

Переваги зовнішнього CSS:

• HTML і стилі зберігаються окремо;

• один файл стилів можна використовувати на кількох сторінках;

• код легше читати й підтримувати;

• змінювати оформлення всього сайту можна централізовано.

Для більшості звичайних вебпроєктів це найзручніший спосіб організації стилів.

4. Синтаксис CSS: як записуються правила

Щоб писати CSS, потрібно зрозуміти його базову структуру.

Розглянемо приклад:

h1 {

  color: blue;

  font-size: 32px;

}

Це CSS-правило.

Воно складається з трьох основних частин:

1. Селектор — h1.

2. Блок оголошень — усе, що розташовано між фігурними дужками.

3. Оголошення — окремі пари властивості та значення.

4.1. Селектор

Селектор визначає, до яких HTML-елементів потрібно застосувати стилі.

У прикладі:

h1

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

4.2. Властивість

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

Наприклад:

color

font-size

background-color

margin

padding

4.3. Значення

Значення визначає, якою саме повинна бути властивість.

Наприклад:

color: red;

font-size: 20px;

background-color: white;

4.4. Оголошення

Пара «властивість + значення» називається оголошенням.

Наприклад:

color: red;

Оголошення завершується крапкою з комою.

4.5. Блок оголошень

Блок оголошень — це всі правила, розташовані між фігурними дужками.

p {

  color: gray;

  font-size: 18px;

  line-height: 1.5;

}

У цьому прикладі до всіх абзаців застосовуються три властивості.

4.6. Коментарі в CSS

Коментарі дозволяють залишати пояснення в коді. Браузер не застосовує їх як стилі.

/* Це коментар у CSS */




h1 {

  color: blue; /* Колір заголовка */

}

Коментарі корисні, коли таблиця стилів стає великою та містить багато різних правил.

5. CSS-селектори: як вибирати потрібні елементи

Вони визначають, до яких HTML-елементів застосовуватимуться стилі.

5.1. Селектор за назвою елемента

Найпростіший варіант — вибір за назвою HTML-тегу.

p {

  color: gray;

}




h1 {

  color: blue;

}




button {

  background-color: green;

}

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

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

Клас дозволяє вибирати групу елементів за спільною назвою.

У HTML:

<p class="important">Важлива інформація.</p>




<p>Звичайний текст.</p>




<p class="important">Ще одна важлива інформація.</p>

У CSS:

.important {

  color: red;

  font-weight: bold;

}

Крапка перед назвою означає, що ми вибираємо клас.

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

Один елемент може мати кілька класів:

<div class="card important">

  Важлива картка

</div>

Тоді до нього можуть застосовуватися правила обох класів.

5.3. Селектор ідентифікатора

Атрибут id призначений для унікальної ідентифікації елемента в межах документа.

HTML:

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

CSS:

#main-title {

  color: darkblue;

}

• Символ # означає вибір за ідентифікатором.

На відміну від класу, один і той самий id не повинен повторюватися в документі.

Для звичайного оформлення елементів зазвичай зручніше використовувати класи.

5.4. Універсальний селектор

Символ * вибирає всі елементи.

* {

  box-sizing: border-box;

}

Це правило часто використовують для початкового налаштування моделі розмірів елементів.

Водночас універсальний селектор не варто бездумно використовувати для великої кількості складних стилів.

5.5. Селектор нащадка

Можна вибрати елементи, які знаходяться всередині інших елементів.

article p {

  color: gray;

}

Це означає: вибрати всі абзаци p, які розташовані всередині article, незалежно від того, наскільки глибоко вони вкладені.

5.6. Селектор дочірнього елемента

Символ > вибирає лише безпосередніх дочірніх елементів.

article > p {

  color: blue;

}

Тут будуть вибрані лише ті абзаци, які безпосередньо розміщені всередині article.

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

Якщо кілька елементів повинні мати однакові стилі, селектори можна об'єднати через кому.

h1,

h2,

h3 {

  font-family: Arial, sans-serif;

  color: darkblue;

}

Це скорочує повторення коду.

5.8. Псевдокласи

Псевдокласи дозволяють вибирати елементи залежно від їхнього стану або положення.

Наприклад, можна змінити вигляд посилання, коли користувач наводить на нього курсор.

a:hover {

  color: red;

}

hover — стан наведення курсора.

Інші поширені псевдокласи:

button:active {

  transform: scale(0.98);

}




input:focus {

  border-color: blue;

}




li:first-child {

  font-weight: bold;

}




li:last-child {

  color: gray;

}

Вони дозволяють реагувати на взаємодію користувача або вибирати елементи за їхнім положенням.

5.9. Псевдоелементи

Псевдоелементи дозволяють стилізувати певні частини елемента або створювати додаткові декоративні елементи.

Наприклад:

p::first-letter {

  font-size: 28px;

  font-weight: bold;

}




h2::after {

  content: " ★";

}

::first-letter стилізує першу літеру тексту.

::after створює додатковий вміст після основного вмісту елемента.

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

6. CSS-властивості, кольори та одиниці вимірювання

CSS містить велику кількість властивостей. На початку важливо освоїти ті, які використовуються найчастіше.

6.1. Колір тексту

Для зміни кольору тексту використовується color.

p {

  color: red;

}

Колір можна задавати кількома способами.

За назвою:

h1 {

  color: red;

}

Через HEX:

h1 {

  color: #ff0000;

}

Через RGB:

h1 {

  color: rgb(255, 0, 0);

}

Через RGBA:

h1 {

  color: rgba(255, 0, 0, 0.5);

}

RGBA дозволяє додати альфа-канал — значення прозорості кольору.

Сучасний CSS також підтримує інші колірні формати, зокрема HSL.

6.2. Колір фону

Для зміни фону використовується background-color.

body {

  background-color: #f2f2f2;

}

Можна встановлювати фон для всієї сторінки або окремих блоків.

.card {

  background-color: white;

}

6.3. Розмір шрифту

Властивість font-size визначає розмір тексту.

h1 {

  font-size: 36px;

}




p {

  font-size: 18px;

}

6.4. Тип шрифту

Властивість font-family визначає шрифт.

body {

  font-family: Arial, sans-serif;

}

Тут Arial — бажаний шрифт, а sans-serif — запасна категорія шрифтів.

6.5. Товщина шрифту

Для керування товщиною використовується font-weight.

h1 {

  font-weight: bold;

}




p {

  font-weight: 400;

}

Поширені значення:

• 400 — звичайна товщина;

• 500 — середня;

• 600 — напівжирна;

• 700 — жирна.

Фактичний результат залежить від доступних варіантів конкретного шрифту.

6.6. Вирівнювання тексту

Властивість text-align визначає горизонтальне вирівнювання тексту.

h1 {

  text-align: center;

}




p {

  text-align: left;

}

Основні значення:

• left — ліворуч;

• right — праворуч;

• center — по центру;

• justify — по ширині.

6.7. Висота рядка

line-height визначає висоту рядка тексту.

p {

  line-height: 1.6;

}

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

6.8. Одиниці вимірювання

CSS використовує різні одиниці вимірювання.

Найважливіші для початківця:

Приклади:

h1 {

  font-size: 32px;

}




p {

  font-size: 1rem;

}




.container {

  width: 80%;

}




.banner {

  min-height: 50vh;

}

Для початку можна запам'ятати таке:

• px зручно використовувати для точних значень;

• % допомагає створювати відносні розміри;

• rem зручний для масштабування тексту та відступів;

• vw і vh прив'язують розмір до області перегляду браузера.

Не існує правила, за яким потрібно використовувати лише одну одиницю. У реальних проєктах їх комбінують залежно від завдання.

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

Це одна з найважливіших тем CSS.

Іноді до одного HTML-елемента застосовується кілька правил, які задають різні значення однієї властивості.

Наприклад:

p {

  color: blue;

}




p {

  color: red;

}

Яким буде колір абзацу?

У цьому простому випадку — червоним, оскільки обидва правила мають однакову специфічність, а друге розташоване пізніше.

Але в реальному CSS ситуація може бути складнішою.

7.1. Каскад

На результат можуть впливати:

• походження стилів;

• важливість оголошень;

• каскадні шари;

• специфічність селекторів;

• порядок розташування правил.

Тому твердження «останнє правило завжди перемагає» неправильне.

Воно працює лише тоді, коли інші важливі умови однакові.

7.2. Специфічність

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

Розглянемо приклад:

p {

  color: blue;

}




.text {

  color: green;

}




#main-text {

  color: red;

}

HTML:

<p class="text" id="main-text">

  Мій текст

</p>

Усі три селектори відповідають цьому елементу.

Але селектор за id має більшу специфічність, ніж селектор класу, а селектор класу — більшу, ніж селектор елемента.

Тому текст буде червоним.

Для початкового розуміння можна запам'ятати загальний порядок:

1. Селектор за назвою елемента — найнижча специфічність серед цих трьох.

2. Селектор класу — вища.

3. Селектор ідентифікатора — ще вища.

Псевдокласи зазвичай мають специфічність, аналогічну класам, а псевдоелементи — аналогічну селекторам елементів.

Це лише вступ до теми. Повний алгоритм враховує також походження правил, !important, каскадні шари та інші умови.

7.3. !important

Іноді можна зустріти запис:

p {
 
    color: red !important;

}

!important підвищує пріоритет оголошення в механізмі каскаду.

Але це не універсальний спосіб вирішувати конфлікти стилів.

Надмірне використання !important робить CSS складнішим для підтримки, тому краще розуміти причину конфлікту та правильно організовувати селектори.

7.4. Наслідування

Наслідування — це механізм, за якого деякі CSS-властивості передаються від батьківського елемента до дочірніх.

Наприклад:

body {

  color: darkgray;

  font-family: Arial, sans-serif;

}

Якщо окремі елементи не перевизначають ці властивості, вони зазвичай успадковують їх від body.

Але не всі властивості наслідуються.

Наприклад, color і font-family зазвичай наслідуються, а margin, padding та border — ні.

Це важливо розуміти, коли стилі одного елемента впливають на вигляд інших елементів.

8. Блокова модель CSS: як формується розмір елементів

Кожен HTML-елемент, який браузер відображає як прямокутний блок, має певну область, розмір і відступи.

Ця система називається CSS Box Model — блокова модель CSS.

Вона складається з чотирьох основних частин:

1. Content — вміст.

2. Padding — внутрішній відступ.

3. Border — межа.

4. Margin — зовнішній відступ.

8.1. Content — вміст

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

.card {

  width: 300px;

  height: 150px;

}

Тут задаються ширина та висота області вмісту за стандартної моделі content-box.

8.2. Padding — внутрішній відступ

padding визначає відстань між вмістом і межею елемента.

.card {

  padding: 20px;

}

Текст усередині картки віддалиться від її меж на 20 пікселів.

Можна задавати відступи окремо:

.card {

  padding-top: 10px;

  padding-right: 20px;

  padding-bottom: 10px;

  padding-left: 20px;

}

Або скорочено:

.card {

  padding: 10px 20px;

}

У цьому випадку перше значення відповідає верхньому та нижньому відступам, друге — лівому та правому.

8.3. Border — межа

border визначає рамку навколо елемента.

.card {

  border: 1px solid black;

}

Тут:

• 1px — товщина;

• solid — суцільний тип лінії;

• black — колір.

8.4. Margin — зовнішній відступ

margin визначає простір за межами елемента.

.card {

  margin: 20px;

}

Це створить зовнішній відступ навколо картки.

8.5. Як обчислюється розмір елемента?

За стандартної моделі content-box, якщо маємо:

.card {

  width: 300px;

  padding: 20px;

  border: 5px solid black;

}

Фактична ширина елемента становитиме:

• 300px — вміст

• 40px — лівий і правий padding

• 10px — ліва і права межі

--------------------------------

• 350px — загальна ширина

Тобто задані 300px — це лише ширина вмісту, а не всього елемента.

8.6. box-sizing: border-box

Щоб спростити роботу з розмірами, часто використовують:

* {

  box-sizing: border-box;

}

Тепер задана ширина елемента включатиме вміст, внутрішні відступи та межі.

Наприклад:

.card {

  width: 300px;

  padding: 20px;

  border: 5px solid black;

  box-sizing: border-box;

}

Загальна ширина залишиться 300 пікселів, а простір усередині буде розподілений між вмістом, відступами та межею.

Це значно спрощує розрахунок розмірів блоків.

9. Відображення елементів: display

Властивість display визначає, як елемент бере участь у компонуванні сторінки.

Це одна з ключових властивостей CSS.

9.1. display: block

Блокові елементи зазвичай починаються з нового рядка та займають доступну ширину батьківського контейнера.

Приклади HTML-елементів, які за замовчуванням мають блокову поведінку:

• div;

• p;

• h1;

• section;

• article.

Приклад:

div {

  display: block;

}

9.2. display: inline

Рядкові елементи розташовуються в одному рядку з текстом та іншими рядковими елементами.

Наприклад:

• span;

• a;

• strong;

• em.

span {

  display: inline;

}

Для звичайних рядкових елементів властивості ширини й висоти не працюють так само, як для блокових.

9.3. display: inline-block

Цей режим поєднує характеристики рядкових і блокових елементів.

Елементи можуть розташовуватися в одному рядку, але при цьому їм можна задавати ширину та висоту.

.button {

  display: inline-block;

  width: 150px;

  padding: 12px;

}

9.4. display: none

Це значення повністю прибирає елемент із візуального компонування сторінки.

.hidden {

  display: none;

}

Елемент не займає місця в макеті.

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

10. Розташування елементів: Flexbox і Grid

Коли сайт має більше ніж кілька елементів, потрібно навчитися керувати їхнім розташуванням.

Для цього CSS має сучасні інструменти компонування, серед яких особливо важливі Flexbox і Grid.

10.1. Flexbox

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

Вона зручна для:

• меню навігації;

• рядів кнопок;

• карток;

• вирівнювання елементів;

• розміщення вмісту всередині контейнерів.

Приклад HTML:

<div class="container">

  <div class="item">Перший</div>

  <div class="item">Другий</div>

  <div class="item">Третій</div>

</div>

CSS:

.container {

  display: flex;

  gap: 20px;

}




.item {

  padding: 20px;

  background-color: lightblue;

}

Тепер елементи розташуються в одному горизонтальному ряду з відстанню між ними.

Основні властивості Flexbox:

display: flex

Перетворює контейнер на flex-контейнер.

flex-direction

Визначає напрямок розташування елементів:

.container {

  flex-direction: row;

}

Основні значення:

• row — горизонтально;

• column — вертикально;

• row-reverse — горизонтально у зворотному порядку;

• column-reverse — вертикально у зворотному порядку.

justify-content

Керує розподілом елементів уздовж головної осі.

.container {

  display: flex;

  justify-content: center;

}

Інші поширені значення:

• flex-start;

• flex-end;

• center;

• space-between;

• space-around;

• space-evenly.

align-items

Вирівнює елементи вздовж поперечної осі.

.container {

  display: flex;

  align-items: center;

}

gap

Задає відстань між елементами.

.container {

  display: flex;

  gap: 16px;

}

10.2. CSS Grid

Grid — це система компонування, яка дозволяє працювати одночасно з рядками та стовпцями.

Вона особливо корисна для складніших макетів:

• галерей;

• сіток карток;

• сторінок із боковими панелями;

• багатоколонкових структур.

HTML:

<div class="grid">

  <div>Елемент 1</div>

  <div>Елемент 2</div>

  <div>Елемент 3</div>

  <div>Елемент 4</div>

</div>

CSS:

.grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

}

Цей код створює дві колонки однакової ширини.

Одиниця fr означає частку доступного простору в Grid-контейнері.

Можна створити три колонки:

.grid {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  gap: 20px;

}

Або використати скорочений запис:

.grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

}

10.3. Flexbox чи Grid — що вибрати?

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

Вони вирішують різні завдання.

• Flexbox зручний, коли потрібно розташувати елементи в одному напрямку.

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

Наприклад, Grid може формувати загальну сітку сторінки, а Flexbox — вирівнювати елементи всередині окремих блоків.

11. Адаптивний дизайн: як зробити сайт зручним на різних екранах

Сайт може відкриватися на великому моніторі, ноутбуці, планшеті або смартфоні.

Якщо сторінка створена лише для одного розміру екрана, на інших пристроях вона може відображатися незручно:

• текст буде надто дрібним;

• блоки виходитимуть за межі екрана;

• зображення можуть бути надто великими;

• колонки стануть занадто вузькими;

• меню буде складно використовувати.

Його мета — зробити сторінку зручною на різних пристроях і розмірах екрана.

11.1. Відносні розміри

Замість того щоб задавати всім елементам жорстку ширину в пікселях, можна використовувати відносні значення.

Наприклад:

.container {

  width: 90%;

  max-width: 1200px;

  margin: 0 auto;

}

Тут:

• width: 90% дозволяє контейнеру займати більшу частину доступної ширини;

• max-width: 1200px обмежує його максимальний розмір;

• margin: 0 auto центрує контейнер по горизонталі, коли для цього є доступний простір.

11.2. Адаптивні зображення

Щоб зображення не виходили за межі контейнера, часто використовують:

img {

  max-width: 100%;

  height: auto;

}

Це дозволяє зображенню зменшуватися відповідно до ширини контейнера, зберігаючи пропорції.

11.3. Медіазапити

Медіазапити дозволяють застосовувати певні стилі лише за визначених умов, наприклад коли ширина екрана менша за певне значення.

.container {

  display: grid;

  grid-template-columns: 1fr 1fr 1fr;

  gap: 20px;

}




@media (max-width: 768px) {

  .container {

    grid-template-columns: 1fr;

  }

}

Що відбувається?

На широкому екрані елементи розташовуються у три колонки.

Коли ширина області перегляду стає 768 пікселів або меншою, правило всередині медіазапиту змінює сітку на одну колонку.

Число 768px у цьому прикладі — умовна контрольна точка, або breakpoint. Це не універсальна межа для всіх сайтів. Її вибирають залежно від того, коли конкретний макет перестає бути зручним.

11.4. Mobile First

Mobile First — це підхід, за якого спочатку створюють дизайн для невеликих екранів, а потім поступово додають стилі для більших пристроїв.

Наприклад:

.container {

  display: grid;

  grid-template-columns: 1fr;

  gap: 16px;

}




@media (min-width: 768px) {

  .container {

    grid-template-columns: repeat(2, 1fr);

  }

}




@media (min-width: 1100px) {

  .container {

    grid-template-columns: repeat(3, 1fr);

  }

}

Тут:

• на вузькому екрані одна колонка;

• від 768 пікселів — дві;

• від 1100 пікселів — три.

Такий підхід допомагає створювати гнучкі макети без необхідності намагатися вмістити повну настільну версію сайту на смартфоні.

12. CSS-змінні: як не повторювати однакові значення

У великих проєктах часто використовуються однакові кольори, відступи та інші значення.

Якщо записувати їх окремо в кожному правилі, згодом змінювати оформлення стає незручно.

Для цього CSS підтримує власні властивості, які часто називають CSS-змінними.

Приклад:

:root {

  --main-color: #2457a7;

  --text-color: #333333;

  --background-color: #f5f5f5;

  --card-radius: 12px;

}

Тут ми створили чотири змінні.

Їх можна використовувати через var():

body {

  color: var(--text-color);

  background-color: var(--background-color);

}




h1 {

  color: var(--main-color);

}




.card {

  border-radius: var(--card-radius);

}

Якщо потрібно змінити основний колір сайту, достатньо змінити значення --main-color в одному місці.

:root — псевдоклас, який вибирає кореневий елемент документа. Для HTML це зазвичай <html>. Тому змінні, визначені в :root, доступні в більшості частин сторінки через наслідування.

13. Як перевіряти та налагоджувати CSS?

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

Для пошуку таких проблем використовуються інструменти розробника браузера.

13.1. DevTools

У Chrome, Edge, Firefox та інших браузерах є вбудовані інструменти розробника.

Відкрити їх можна клавішею F12 або комбінацією Ctrl + Shift + I.

Для роботи зі стилями особливо важлива вкладка Elements або Inspector.

Вона дозволяє:

• вибирати HTML-елементи;

• переглядати застосовані CSS-правила;

• бачити, які правила перекреслені через конфлікти;

• змінювати значення властивостей;

• перевіряти розміри та відступи;

• тимчасово вимикати окремі правила;

• експериментувати з оформленням без редагування файлів.

Можливо, інший селектор має більшу специфічність або правило перевизначається пізніше.

13.2. Перевірка Box Model

У DevTools можна переглянути модель елемента:

• content;

• padding;

• border;

• margin.

Це особливо корисно, коли блок займає більше місця, ніж очікувалося.

13.3. Перевірка адаптивності

У DevTools є режим емуляції різних розмірів екрана.

Можна перевірити, як сайт виглядає на умовному смартфоні, планшеті або великому моніторі.

Це допомагає знаходити проблеми з шириною блоків, розташуванням елементів і медіазапитами.

13.4. CSS Validator

Для перевірки CSS існує офіційний сервіс W3C CSS Validation Service:

• https://jigsaw.w3.org/css-validator/

Він допомагає знаходити синтаксичні помилки та проблеми у таблицях стилів.

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

14. Практика: оформлюємо HTML-сторінку за допомогою CSS

Тепер використаємо знання на практиці.

У попередній статті ми створили просту сторінку з заголовком, абзацом, списком і посиланням. Тепер оформимо її.

Крок 1. Підготуємо структуру проєкту

Використаємо таку структуру:

MyFirstWebsite/

│

├── index.html

│

└── css/

    └── style.css

Якщо ти вже створив папку та файл index.html під час попередньої практики, використовуй їх.

Крок 2. Створимо HTML-документ

Файл 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="css/style.css">

</head>




<body>




  <header class="header">

    <h1>Мій навчальний сайт</h1>

    <p>Місце для вивчення вебтехнологій</p>

  </header>




  <main class="container">




    <section class="card">

      <h2>Що я вивчаю?</h2>




      <p>

        Я починаю знайомство з веброзробкою

        та поступово вивчаю основні технології.

      </p>




      <ul>

        <li>HTML — структура сторінки.</li>

        <li>CSS — оформлення сторінки.</li>

        <li>JavaScript — інтерактивність.</li>

      </ul>




      <a class="button" href="https://developer.mozilla.org/">

        Відкрити документацію

      </a>

    </section>




  </main>




  <footer class="footer">

    <p>Мій перший навчальний проєкт</p>

  </footer>




</body>

</html>

Зверни увагу: ми використовуємо класи header, container, card, button і footer. Саме за ними CSS зможе знаходити потрібні елементи та оформлювати їх.

Крок 3. Додамо CSS

Відкрий файл css/style.css і встав:

/* Базові налаштування */




* {

  box-sizing: border-box;

}




body {

  margin: 0;

  font-family: Arial, sans-serif;

  color: #333333;

  background-color: #f2f4f8;

  line-height: 1.6;

}




/* Верхня частина сторінки */




.header {

  padding: 40px 20px;

  text-align: center;

  color: white;

  background-color: #2457a7;

}




.header h1 {

  margin: 0 0 10px;

  font-size: 36px;

}




.header p {

  margin: 0;

}




/* Основний контейнер */




.container {

  width: 90%;

  max-width: 900px;

  margin: 40px auto;

}




/* Картка */




.card {

  padding: 30px;

  background-color: white;

  border-radius: 12px;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

}




.card h2 {

  margin-top: 0;

  color: #2457a7;

}




/* Список */




.card ul {

  padding-left: 25px;

}




/* Кнопка-посилання */




.button {

  display: inline-block;

  margin-top: 15px;

  padding: 12px 20px;

  color: white;

  background-color: #2457a7;

  text-decoration: none;

  border-radius: 6px;

}




.button:hover {

  background-color: #173d7a;

}




/* Нижня частина сторінки */




.footer {

  padding: 20px;

  text-align: center;

  color: #666666;

}




/* Адаптація для вузьких екранів */




@media (max-width: 600px) {

  .header h1 {

    font-size: 28px;

  }




  .card {

    padding: 20px;

  }




  .container {

    width: 94%;

    margin: 20px auto;

  }

}

Крок 4. Відкриємо сторінку

Збережи обидва файли та відкрий index.html у браузері.

Тепер сторінка матиме:

• синю верхню частину;

• світлий фон;

• білу картку з округленими кутами;

• оформлений заголовок;

• відступи між елементами;

• кнопку-посилання;

• нижню частину сторінки.

Якщо зменшити ширину вікна браузера, стилі всередині медіазапиту змінять розміри заголовка, картки та контейнера.

Крок 5. Експериментуємо

Спробуй самостійно змінити:

1. Основний колір сайту з синього на зелений.

2. Колір фону сторінки.

3. Розмір головного заголовка.

4. Внутрішні відступи картки.

5. Радіус заокруглення картки.

6. Колір кнопки під час наведення курсора.

Після кожної зміни зберігай файл і оновлюй сторінку в браузері.

Так ти побачиш, як конкретні CSS-властивості впливають на результат.

15. Типові помилки під час вивчення CSS

15.1. Забута крапка з комою

Помилково:

p {

  color: red

  font-size: 20px;

}

Правильно:

p {

  color: red;

  font-size: 20px;

}

Крапка з комою розділяє оголошення.

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

15.2. Неправильні фігурні дужки

Помилково:

h1

  color: blue;

Правильно:

h1 {

  color: blue;

}

15.3. Неправильна назва властивості

Наприклад:

p {

  text-color: red;

}

Властивості text-color у CSS немає.

Правильний запис:

p {

  color: red;

}

15.4. Неправильний селектор

HTML:

<p class="description">Опис сторінки.</p>

Помилково:

#description {

  color: red;

}

Тут CSS шукає елемент з id="description", а в HTML використовується клас.

Правильно:

.description {

  color: red;

}

15.5. Неправильний шлях до CSS-файлу

Якщо файл знаходиться в папці css, а в HTML написано:

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

браузер шукатиме його в іншому місці.

Правильний запис для нашої структури:

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

15.6. Надмірне використання !important

Якщо стилі не застосовуються, не потрібно одразу додавати !important.

Спочатку перевір:

• чи правильно написаний селектор;

• чи підключений CSS-файл;

• чи немає іншого правила з вищою специфічністю;

• чи правильно написана назва властивості;

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

15.7. Використання фіксованих розмірів без потреби

Наприклад:

.container {

  width: 1200px;

}

На вузькому екрані такий контейнер може виходити за межі області перегляду.

Часто краще використовувати:

.container {

  width: 90%;

  max-width: 1200px;

  margin: 0 auto;

}

Це дає змогу контейнеру змінювати ширину відповідно до доступного простору.

16. Що ще можна робити за допомогою CSS?

CSS значно ширший за набір властивостей, які ми розглянули.

Після освоєння основ можна переходити до складніших можливостей.

16.1. Позиціонування

CSS дозволяє керувати розташуванням елементів за допомогою властивості position.

Основні значення:

• static — стандартне розташування;

• relative — елемент залишається в потоці, але може зміщуватися відносно свого початкового положення;

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

• fixed — елемент фіксується відносно області перегляду;

• sticky — елемент поводиться як звичайний, доки не досягає заданої межі прокручування, після чого може залишатися закріпленим.

Приклад:

.header {

  position: sticky;

  top: 0;

}

Це може зробити верхню частину сторінки закріпленою під час прокручування.

16.2. Тіні

Властивість box-shadow додає тінь навколо елемента.

.card {

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);

}

Тіні часто використовуються для карток, кнопок і модальних вікон.

16.3. Заокруглення кутів

.card {

  border-radius: 12px;

}

Це дозволяє заокруглювати кути блоків.

16.4. Переходи

Властивість transition дозволяє зробити зміну стилів плавною.

.button {

  background-color: blue;

  transition: background-color 0.3s ease;

}




.button:hover {

  background-color: darkblue;

}

Коли користувач наводить курсор на кнопку, її фон змінюється поступово.

16.5. Анімації

CSS підтримує анімації через @keyframes.

@keyframes move {

  from {

    transform: translateX(0);

  }




  to {

    transform: translateX(100px);

  }

}




.box {

  animation: move 2s infinite alternate;

}

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

16.6. CSS-фільтри та трансформації

CSS дозволяє змінювати вигляд елементів за допомогою фільтрів і трансформацій.

Наприклад:

img {

  filter: grayscale(100%);

}

Зображення стане чорно-білим.

Або:

.card:hover {

  transform: scale(1.03);

}

Картка трохи збільшиться під час наведення курсора.

16.7. Темна тема

CSS-змінні можна використовувати для створення різних колірних тем.

Наприклад:

:root {

  --background: white;

  --text: #222222;

}




.dark-theme {

  --background: #222222;

  --text: white;

}




body { 

  background-color: var(--background);

  color: var(--text);

}

Якщо додати клас dark-theme до відповідного контейнера body , значення змінних зміняться.

Для автоматичного врахування системних налаштувань користувача також можна використовувати медіазапит prefers-color-scheme.

17. Підсумок: що потрібно запам'ятати?

CSS — це мова стилів, яка відповідає за зовнішній вигляд вебсторінок.

Основні поняття, які ми розглянули:

1. CSS — мова стилів для оформлення HTML-документів.

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

3. Властивість — визначає характеристику, яку потрібно змінити.

4. Значення — визначає, якою має бути ця характеристика.

5. Клас — спосіб групувати HTML-елементи для застосування стилів.

6. ID — унікальний ідентифікатор елемента в документі.

7. Каскад — механізм визначення остаточних стилів за наявності кількох правил.

8. Специфічність — система пріоритетів селекторів у каскаді.

9. Наслідування — передавання деяких властивостей від батьківських елементів дочірнім.

10. Box Model — модель, яка описує вміст, внутрішні відступи, межі та зовнішні відступи елемента.

11. Flexbox — інструмент компонування елементів уздовж однієї основної осі.

12. Grid — інструмент двовимірного компонування в рядках і колонках.

13. Медіазапити — механізм застосування стилів залежно від умов, наприклад ширини екрана.

14. CSS-змінні — спосіб зберігати та повторно використовувати значення стилів.

Найважливіше — навчитися розуміти зв'язок між HTML і CSS.

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

У наступній статті ми перейдемо до JavaScript — мови програмування, яка дозволяє зробити вебсторінки інтерактивними та додати їм логіку.

Джерела та документація

1. MDN Web Docs — CSS: Cascading Style Sheets

https://developer.mozilla.org/en-US/docs/Web/CSS

Основна документація CSS: властивості, селектори, значення, правила та довідкові матеріали.

2. MDN Web Docs — CSS Styling Basics

https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics

Навчальний розділ для початківців: синтаксис CSS, селектори, застосування стилів і розв'язання конфліктів.

3. MDN Web Docs — CSS Selectors

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors

Документація про селектори, псевдокласи та псевдоелементи.

4. MDN Web Docs — Introduction to the CSS Cascade

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Introduction

Пояснення механізму каскаду та порядку застосування стилів.

5. MDN Web Docs — CSS Box Model

https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model

Документація про вміст, внутрішні відступи, межі та зовнішні відступи елементів.

6. MDN Web Docs — Introduction to CSS Layout

https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Introduction

Основи компонування елементів і принципи розташування блоків.

7. MDN Web Docs — Flexbox

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout

Документація про гнучке компонування елементів.

8. MDN Web Docs — CSS Grid Layout

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout

Документація про двовимірні сітки та компонування сторінок.

9. MDN Web Docs — Responsive Design

https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design

Матеріали про адаптивний дизайн, медіазапити та створення сторінок для різних екранів.

10. W3C — CSS Validation Service

https://jigsaw.w3.org/css-validator/

Інструмент перевірки коректності CSS-коду.

Контрольні запитання

1. За що відповідає CSS?

• А. За структуру HTML-документа.

• Б. За зовнішній вигляд і компонування вебсторінки.

• В. За збереження інформації в базі даних.

2. Який спосіб підключення CSS найзручніший для більшості багатосторінкових проєктів?

• А. Вбудовувати всі стилі в атрибут style.

• Б. Використовувати окремий CSS-файл.

• В. Записувати стилі лише в JavaScript.

3. Який символ використовується для вибору елемента за класом?

• А. #

• Б. .

• В. *

4. Що робить властивість padding?

• А. Задає внутрішній відступ між вмістом і межею елемента.

• Б. Задає зовнішній відступ між елементами.

• В. Змінює колір тексту.

5. Що таке CSS Box Model?

• А. Система зберігання CSS-файлів.

• Б. Модель, яка описує вміст, відступи та межі елемента.

• В. Спосіб підключення JavaScript.

6. Для чого використовується display: flex?

• А. Для створення анімацій.

• Б. Для гнучкого компонування елементів уздовж основної осі.

• В. Для приховування елементів.

7. Для чого потрібні медіазапити?

• А. Для застосування стилів залежно від умов, наприклад ширини екрана.

• Б. Для підключення зображень.

• В. Для створення баз даних.

8. Що таке специфічність?

• А. Розмір CSS-файлу.

• Б. Механізм визначення пріоритету селекторів у каскаді.

• В. Кількість HTML-елементів на сторінці.

9. Що робить box-sizing: border-box?

• А. Включає внутрішні відступи та межі в задані розміри елемента.

• Б. Видаляє межі елемента.

• В. Змінює його колір.

10. У чому основна відмінність Flexbox і Grid?

• А. Flexbox працює лише з текстом, а Grid — лише із зображеннями.

• Б. Flexbox переважно організовує елементи вздовж однієї осі, а Grid — у двовимірній сітці.

• В. Вони виконують абсолютно однакові завдання.

Відповіді для самоперевірки

1 — Б.

2 — Б.

3 — Б.

4 — А.

5 — Б.

6 — Б.

7 — А.

8 — Б.

9 — А.

10 — Б.