CSS для початківців

🤔 Що таке CSS?

CSS (Cascading Style Sheets — каскадні таблиці стилів) — це мова, яка визначає зовнішній вигляд веб-сторінки. Якщо HTML — це скелет сайту, то CSS — це одяг, макіяж та зачіска!

🦉

Кудик пояснює:

Уяви, що HTML — це будинок з голих цеглин. CSS — це фарба, шпалери, меблі та декор. Без CSS сайт виглядає як документ Word з 90-х. З CSS — як сучасний дизайнерський проєкт! ✨

🎭 HTML vs CSS — хто за що відповідає?

HTML 🏗️	CSS 🎨
Структура сторінки	Оформлення сторінки
Заголовки, абзаци, списки	Кольори, шрифти, розміри
Посилання, картинки	Відступи, рамки, тіні
Що показувати	Як показувати

✨ Що можна зробити з CSS?

🎨

Кольори

Фон, текст, рамки — будь-який колір!

✏️

Шрифти

Розмір, стиль, сімейство шрифтів

📐

Розміри

Ширина, висота, відступи

📦

Розташування

Flexbox, Grid — верстка макетів

🎬

Анімації

Плавні переходи та ефекти

📱

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

Різний вигляд на різних пристроях

🔗 Як підключити CSS?

Є три способи додати CSS до HTML-сторінки:

1️⃣ Зовнішній файл (рекомендовано!)

Створи окремий файл style.css і підключи його в <head>:

index.html — підключення CSS

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
    <title>Мій сайт</title>
    <!-- Підключаємо CSS файл -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Привіт, CSS!</h1>
</body>
</html>

✅

Чому це найкращий спосіб?

Один CSS файл можна підключити до багатьох HTML сторінок. Змінив колір в одному місці — змінився на всьому сайті! Це називається DRY (Don't Repeat Yourself).

2️⃣ Внутрішні стилі (в <style>)

CSS прямо в HTML файлі, всередині тегу <style>:

index.html — внутрішні стилі

1
2
3
4
5
6
7
8
9
10
<head>
    <style>
        h1 {
            color: blue;
            font-size: 32px;
        }
    </style>
</head>

3️⃣ Інлайн стилі (атрибут style)

CSS прямо в HTML тегу — не рекомендовано!

Інлайн стилі — уникай цього!

1
2
<!-- ❌ Погано — важко підтримувати -->
<h1 style="color: blue; font-size: 32px;">Привіт</h1>

⚠️

Інлайн стилі — це бруд!

Їх важко підтримувати, неможливо перевикористати, і вони перемішують структуру з оформленням. Використовуй тільки в крайніх випадках!

📝 Синтаксис CSS

CSS правило складається з селектора та блоку оголошень:

style.css — структура CSS правила

1
2
3
4
5
6
7
8
9
10
/*
   селектор {
       властивість: значення;
   }
*/

h1 {
    color: #2965f1;      /* колір тексту */
    font-size: 36px;    /* розмір шрифту */
    text-align: center; /* вирівнювання */
}

🎯

Селектор

h1 — вказує, ДО ЧОГО застосувати стилі

📦

Блок { }

Фігурні дужки містять всі стилі для селектора

🔧

Властивість

color — ЩО змінюємо

💎

Значення

#2965f1 — НА ЩО змінюємо

💡

Не забудь!

Кожне оголошення закінчується крапкою з комою ; — це обов'язково! Коментарі пишуться між /* */

🎯 Селектори CSS

Селектори — це спосіб "знайти" елементи на сторінці, щоб застосувати до них стилі.

📌 Основні типи селекторів

style.css — типи селекторів

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* 1️⃣ За тегом — всі елементи цього типу */
p {
    color: gray;
}

/* 2️⃣ За класом (.назва) — елементи з class="назва" */
.highlight {
    background: yellow;
}

/* 3️⃣ За ID (#назва) — один унікальний елемент */
#header {
    background: #333;
}

/* 4️⃣ Універсальний (*) — всі елементи */
* {
    margin: 0;
    padding: 0;
}

/* 5️⃣ Комбінований — декілька селекторів */
h1, h2, h3 {
    font-family: 'Arial', sans-serif;
}

/* 6️⃣ Вкладений — елемент всередині іншого */
.card p {
    font-size: 14px;
}

🏷️ Клас vs ID — в чому різниця?

	Клас (.class)	ID (#id)
Символ	`.` (крапка)	`#` (решітка)
Скільки разів?	♾️ Багато разів	1️⃣ Тільки один раз
Пріоритет	Нижчий	Вищий
Використання	Для стилізації	Для JavaScript / якорів

HTML — використання класів та ID

1
2
3
4
5
6
7
8
<!-- Клас можна використовувати багато разів -->
<p class="highlight">Текст 1</p>
<p class="highlight">Текст 2</p>

<!-- ID — тільки один раз на сторінці -->
<header id="header">Шапка</header>

<!-- Можна поєднувати -->
<div id="main" class="container dark-theme">...</div>

🦉

Порада від Кудика:

Для стилізації завжди використовуй класи! ID залиш для JavaScript та якірних посилань. Це сучасна практика — так роблять профі!

🌈 Кольори в CSS

В CSS є кілька способів задати колір:

style.css — способи задання кольору

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 1️⃣ Назва кольору */
color: red;
color: blue;
color: tomato;
color: coral;

/* 2️⃣ HEX — шістнадцятковий код */
color: #ff0000;    /* червоний */
color: #2965f1;    /* синій CSS */
color: #000;       /* чорний (скорочено) */

/* 3️⃣ RGB — червоний, зелений, синій (0-255) */
color: rgb(255, 0, 0);      /* червоний */
color: rgb(41, 101, 241);   /* синій */

/* 4️⃣ RGBA — RGB + прозорість (0-1) */
background: rgba(0, 0, 0, 0.5); /* 50% чорний */

🎨 Корисні властивості для кольорів

style.css — властивості кольору

1
2
3
4
5
6
7
8
9
10
11
.card {
    /* Колір тексту */
    color: #333;
    
    /* Колір фону */
    background-color: #f5f5f5;
    background: #f5f5f5; /* скорочено */
    
    /* Колір рамки */
    border-color: #ddd;
}

🔗

Корисні сайти для кольорів:

colorhunt.co — палітри кольорів
coolors.co — генератор палітр
htmlcolorcodes.com — вибір кольору

✏️ Шрифти та текст

style.css — стилізація тексту

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
body {
    /* Сімейство шрифтів (запасні через кому) */
    font-family: 'Rubik', 'Arial', sans-serif;
    
    /* Розмір шрифту */
    font-size: 16px;
    
    /* Висота рядка (читабельність!) */
    line-height: 1.6;
    
    /* Колір тексту */
    color: #333;
}

h1 {
    /* Товщина шрифту: 100-900 або normal/bold */
    font-weight: 700;
    
    /* Вирівнювання: left, center, right, justify */
    text-align: center;
    
    /* Трансформація: uppercase, lowercase, capitalize */
    text-transform: uppercase;
    
    /* Декорація: underline, line-through, none */
    text-decoration: none;
}

📦 Підключення Google Fonts

Безкоштовні шрифти від Google — fonts.google.com

index.html — підключення Google Fonts

1
2
3
4
5
6
7
<head>
    <!-- Підключаємо шрифт Rubik -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;700&display=swap" rel="stylesheet">
</head>

📦 Box Model — модель коробки

Кожен HTML елемент — це "коробка". Box Model описує, з чого вона складається:

📄

Content

Вміст елемента — текст, картинки

🔲

Padding

Внутрішній відступ — між контентом і рамкою

🖼️

Border

Рамка — навколо padding

↔️

Margin

Зовнішній відступ — від інших елементів

style.css — Box Model властивості

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.card {
    /* Розміри */
    width: 300px;
    height: 200px;
    
    /* Padding — внутрішній відступ */
    padding: 20px;              /* всі сторони */
    padding: 10px 20px;         /* верх/низ, ліво/право */
    padding: 10px 20px 15px 25px; /* верх, право, низ, ліво */
    padding-top: 10px;          /* окремо */
    
    /* Border — рамка */
    border: 2px solid #000;    /* товщина, тип, колір */
    border-radius: 15px;        /* заокруглення */
    
    /* Margin — зовнішній відступ */
    margin: 20px;               /* всі сторони */
    margin: 0 auto;             /* центрування по горизонталі */
    margin-bottom: 30px;        /* окремо */
}

/* Важливо! box-sizing: border-box включає padding та border в width */
* {
    box-sizing: border-box;
}

💡

box-sizing: border-box

Завжди додавай це правило! Інакше padding та border додаються ДО width, і елемент стає ширшим ніж очікуєш.

📐 Display — як елементи займають місце

style.css — display властивості

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* block — займає всю ширину, новий рядок */
div, p, h1 {
    display: block;
}

/* inline — в рядок, без width/height */
span, a {
    display: inline;
}

/* inline-block — в рядок, але з width/height */
.badge {
    display: inline-block;
}

/* none — сховати елемент повністю */
.hidden {
    display: none;
}

🔥 Flexbox — сучасна верстка

Flexbox — це найпростіший спосіб розташувати елементи в ряд або колонку:

style.css — Flexbox основи

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.container {
    display: flex;
    
    /* Напрямок: row (ряд) або column (колонка) */
    flex-direction: row;
    
    /* Вирівнювання по горизонталі */
    justify-content: center;      /* center, space-between, space-around */
    
    /* Вирівнювання по вертикалі */
    align-items: center;         /* center, flex-start, flex-end */
    
    /* Проміжок між елементами */
    gap: 20px;
    
    /* Перенос на новий рядок */
    flex-wrap: wrap;
}

🎮

Вивчай Flexbox граючи!

Flexbox Froggy — гра для вивчення Flexbox українською!

✨ Псевдокласи — hover, active, focus

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

style.css — псевдокласи

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/* Звичайний стан кнопки */
.btn {
    background: #2965f1;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease; /* плавна анімація! */
}

/* :hover — при наведенні мишки */
.btn:hover {
    background: #1a4fc9;
    transform: translateY(-3px);
}

/* :active — при кліку */
.btn:active {
    transform: translateY(0);
}

/* :focus — при фокусі (Tab) */
input:focus {
    outline: none;
    border-color: #2965f1;
    box-shadow: 0 0 0 3px rgba(41, 101, 241, 0.2);
}

🎬

transition — магія плавності!

transition: all 0.3s ease — робить всі зміни плавними за 0.3 секунди. Без цього hover буде різким і непривабливим!

🎯 Практика — стилізуємо картку

Застосуємо все вивчене і створимо красиву картку:

index.html + style.css — картка

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!-- HTML -->
<div class="card">
    <div class="card-emoji">🦉</div>
    <h2 class="card-title">Привіт, я Кудик!</h2>
    <p class="card-text">Вивчай CSS разом зі мною!</p>
    <button class="card-btn">Почати</button>
</div>

/* CSS */
.card {
    max-width: 320px;
    background: white;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    border: 3px solid #000;
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 8px 8px 0 #000;
}

.card-emoji {
    font-size: 60px;
    margin-bottom: 15px;
}

.card-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
}

.card-text {
    color: #666;
    margin-bottom: 20px;
}

.card-btn {
    background: #C6DF2B;
    border: 2px solid #000;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
}

🚀 Що вивчати далі?

📱

Responsive Design

Media queries — різні стилі для різних екранів

🔲

CSS Grid

Двовимірні сітки для складних макетів

🎬

Animations

@keyframes — складні анімації

🎨

CSS Variables

Змінні для кольорів та розмірів

🧩

Sass/SCSS

CSS препроцесор — більше можливостей

💨

Tailwind CSS

Utility-first CSS фреймворк

🎮 Вивчай CSS на Koodi!

🚀 Перейти до курсу CSS

✅ Flexbox & Grid ✅ Анімації ✅ Реальні проєкти