Ось урок, створений спеціально для тебе в стилі CS50. Уяви, що ми зараз в аудиторії Sanders Theatre, світло приглушене, і ми починаємо занурення.

🎓 CS50: Стилізуємо світ. Що таке CSS і навіщо він HTML?

Привіт, світе! Радий вас бачити.

На минулому занятті ми збудували фундамент. Ми створили HTML-сторінку. Але давайте будемо чесними: виглядає вона... ну, так собі. Як документ Microsoft Word з 1995 року. Чорний текст, білий фон, нудний шрифт Times New Roman. Все працює, структура є, але чи захоче хтось проводити час на такому сайті? Навряд чи.

1. 🔥 Вступ: Проблема «Голого скелета»

Уявіть, що ви будуєте будинок. HTML — це бетонні стіни, перекриття, дверні отвори. Це структура. Ви можете жити в такому будинку? Технічно — так. Стіни є, дах не тече. Але чи затишно там? Ні. Це просто «бетонна коробка».

Щоб перетворити цю коробку на дім, вам потрібні фарба, шпалери, меблі, килими, освітлення. Вам потрібен стиль.

У вебі цю роль виконує CSS (Cascading Style Sheets).

Поставте собі питання: * Чому всі кнопки на сайті Apple виглядають саме так? * Чому, коли ви наводите мишку на посилання, воно змінює колір?

Це не магія HTML. HTML навіть не знає, що таке «червоний колір» або «круглі кути». Його робота — сказати: «Це — заголовок». А робота CSS — сказати: «Цей заголовок має бути великим, жирним і синім».

Без CSS інтернет був би просто нескінченним списком нудних документів. CSS — це те, що перетворює дані на досвід.

2. 🧠 Теоретична база: Як це працює «під капотом»?

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

У CSS є дуже проста логіка, схожа на те, як ви даєте вказівки маляру. Ви кажете:

"Гей, ти! (Вказуєте на стіну) Пофарбуй її в жовтий!"

У коді це виглядає так: Селектор { Властивість: Значення; }

Розберемо по кісточках:

Селектор (Selector): Кому ми це кажемо? (Наприклад: h1, p, img).
Властивість (Property): Що саме ми хочемо змінити? (Колір, розмір, фон).
Значення (Value): Яким воно має стати? (Червоним, 20 пікселів, прозорим).

📌 Що треба запам’ятати залізно:

Синтаксис! Фігурні дужки { } обмежують правила. Двокрапка : розділяє властивість і значення. Крапка з комою ; завершує команду.

h1 {
    color: blue;
    font-size: 50px;
}

🤔 Інтуїтивне розуміння: Каскад

Чому це називається Cascading Style Sheets (Каскадні таблиці)? Уявіть водоспад. Вода тече зверху вниз. Так само і браузер читає стилі зверху вниз. Якщо ви спочатку скажете «зроби текст червоним», а в наступному рядку «зроби текст зеленим» — виграє останній. Зелений. Це просте правило, але воно керує всім.

3. 🧪 Приклади: Від простого до реального

Приклад 1: Мінімум

У нас є заголовок.

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

Як це виглядає зараз? Просто чорний текст. Нудно. Давайте додамо трохи магії CSS.

h1 {
    color: red;
}

Що ви очікуєте побачити? Текст стане червоним. Все просто.

Приклад 2: Типова кнопка

А тепер реальна задача. У нас є посилання, яке має виглядати як крута кнопка «Купити».

HTML:

<a href="#" class="btn">Купити зараз</a>

CSS:

.btn {
    background-color: #007bff; /* Синій фон */
    color: white;              /* Білий текст */
    padding: 10px 20px;        /* Відступи всередині, щоб кнопка "дихала" */
    text-decoration: none;     /* Прибрати підкреслення посилання */
    border-radius: 5px;        /* Закруглені кути - це сучасно */
    font-family: sans-serif;   /* Нормальний шрифт без засічок */
}

Питання до вас: Чому ми використали крапку .btn, а не просто написали a? Відповідь: Якби ми написали a { ... }, то всі посилання на сайті стали б кнопками. А ми хочемо стилізувати тільки конкретний клас елементів. Клас — це як бейдж з ім'ям, який ми вішаємо на елементи, щоб стилізувати їх групою.

Приклад 3: Інтерактивність (Псевдокласи)

Ми хочемо, щоб кнопка реагувала, коли ми наводимо на неї мишку.

.btn:hover {
    background-color: #0056b3; /* Трохи темніший синій */
}

Що тут відбувається? :hover — це спеціальний стан. Браузер слідкує: «Ага, курсор над елементом? Застосуй цей стиль!». Це створює відчуття, що інтерфейс живий.

4. 🛠 Практична частина

Час забруднити руки кодом! Відкрийте редактор (VS Code або CodePen) і зробіть наступне:

Завдання 1: «Світлофор» Створіть три div елементи. За допомогою CSS зробіть їх круглими (border-radius: 50%) і дайте їм кольори: червоний, жовтий, зелений.

Завдання 2: «Зламаний стиль» Ось код, який не працює. Знайдіть помилку і виправте її.

h1 {
    color: blue
    font-size 20px;
}

Завдання 3: «Дизайнер новин» Візьміть звичайний параграф тексту (<p>). * Зробіть фон світло-сірим (#f0f0f0). * Додайте зліва кольорову лінію (border-left: 5px solid red). * Додайте відступи (padding), щоб текст не прилипав до країв. * Результат має виглядати як цитата в модному блозі.

Завдання 4: Міні-кейс «Темна тема» Створіть сторінку з чорним фоном і білим текстом. Але зробіть так, щоб один конкретний абзац залишився чорним на білому прямокутнику. (Підказка: використовуйте класи).

Завдання 5: Питання «А що, якщо...» Що станеться, якщо у вас буде такий код?

p { color: red; }
p { color: blue; }

Перевірте це на практиці. Який колір переможе і чому?

5. 💡 Мислення як у розробника

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

Типові помилки новачків:

Забули підключити файл. Ви написали CSS у файлі style.css, але забули додати <link rel="stylesheet" href="style.css"> у ваш HTML. Це як купити фарбу, але залишити її в магазині.
Пропущена крапка з комою. Одна пропущена ; може "вбити" весь код після неї.
Друкарські помилки. color: reed; (зайва 'e') — комп'ютер не здогадається, що ви мали на увазі червоний. Він просто проігнорує це.

Як думає профі:

Досвідчений розробник не намагається вгадати стилі в голові. Він використовує Developer Tools (Інструменти розробника). * Натисніть F12 (або праву кнопку миші -> "Inspect" / "Перевірити"). * Це ваш рентген. Ви можете змінювати стилі прямо в браузері в реальному часі, не переписуючи файл, щоб знайти ідеальний вигляд. Спробуйте це прямо зараз на будь-якому сайті!

Порада Девіда:

Не пишіть стилі для кожного окремого елемента (#button1, #button2). Мисліть шаблонами. Створіть один клас .card і використовуйте його для всіх карток товару. DRY (Don't Repeat Yourself) — не повторюй себе.

6. 🧩 Підсумок

Отже, що ми маємо? * HTML — це іменник (стіл, заголовок, картинка). * CSS — це прикметник (дерев'яний, великий, яскрава).

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

Але зачекайте... Ми навчилися розфарбовувати речі. Але як розмістити цю кнопку справа від картинки? Як зробити так, щоб три колонки стояли рівно в ряд, а не одна під одною?

Тут в гру вступає геометрія вебу — Блокова модель (Box Model) та Flexbox. І саме про це ми поговоримо на наступному уроці.

А поки що... це був CS50.