Модуль 2

Підключення CSS: inline, internal, external

Ось готовий урок, написаний у стилі CS50, де ми розбираємо способи підключення CSS так, щоб ви не просто запам’ятали синтаксис, а зрозуміли архітектуру вебу.

🎓 CS50: Архітектура стилів. Де живе CSS?

Вітаю! Сьогодні ми поговоримо не просто про код, а про порядок.

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

І тут виникає головне питання: Як саме ми передаємо будівельникам (браузеру) інструкції щодо дизайну?

1. 🔥 Вступ: Проблема «Брудного Коду»

Уявіть, що ви менеджер готелю, де є 100 номерів. Ви хочете, щоб у кожному номері штори були синього кольору.

У вас є три варіанти дій: 1. Варіант "Божевілля": Зайти в кожен зі 100 номерів і прикріпити на вікно стікер: «Тут штори сині». 2. Варіант "Локальний": Написати інструкцію для кожного поверху окремо. 3. Варіант "Архітектор": Написати одну головну книгу стандартів готелю, де сказано: «У всіх номерах штори — сині».

Як ви думаєте, що станеться, якщо завтра власник готелю скаже: «Синій вийшов з моди, давайте все перефарбуємо в зелений»? У першому випадку вам доведеться бігати у 100 номерів і переписувати стікери. У третьому — ви зміните один рядок в одному файлі.

Ось чому ця тема критична. Ми вчимося не просто розфарбовувати кнопки, ми вчимося писати код, який легко підтримувати, коли проєкт розростеться до розмірів Facebook чи Google.

2. 🧠 Теоретична база: Три кити стилізації

У світі веб-розробки існує рівно три способи сказати браузеру, як має виглядати елемент. Давайте заглянемо «під капот».

1. Inline (Вбудовані стилі) — «Стікер на стіні»

Ви пишете стиль прямо всередині HTML-тегу. * Як це виглядає: Атрибут style="...". * Логіка: Це найсильніша вказівка для конкретного елемента, але це жах для розробника. * Аналогія: Ви татуюєте собі на лобі напис "Я люблю піцу". Це назавжди з вами, але змінити це важко.

2. Internal (Внутрішні стилі) — «Інструкція для кімнати»

Ви пишете стилі вгорі HTML-файлу, в «голові» сторінки (<head>). * Як це виглядає: Тег <style>...</style>. * Логіка: Діє тільки на цю конкретну сторінку. * Аналогія: Ви одягаєте смокінг на вечірку. Це ваш стиль на цей вечір, але завтра вдома ви будете в іншому.

3. External (Зовнішні стилі) — «Конституція проєкту» 🏆

Ви створюєте окремий файл (наприклад, style.css) і підключаєте його до HTML. * Як це виглядає: Тег <link rel="stylesheet" href="...">. * Логіка: Один файл керує виглядом сотень сторінок. Це «Золотий стандарт». * Аналогія: Шкільна форма. Прописана в статуті школи (окремий документ), і всі учні (сторінки) виглядають відповідно до неї.

❗️ Що треба запам'ятати залізно: Браузер читає код зверху вниз. Але Inline завжди перебиває External. Чому? Бо він "ближче" до тіла елемента.

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

Давайте подивимось, як це працює на практиці.

Етап 1: Inline (Не робіть так, якщо не змушують!)

Ми хочемо червоний заголовок.

<!-- index.html -->
<h1 style="color: red; font-size: 20px;">Привіт, світ!</h1>

Запитання: Що буде, якщо у нас 50 заголовків, і ми захочемо змінити розмір шрифту на 22px? Відповідь: Біль і страждання. Нам доведеться правити 50 рядків.

Етап 2: Internal (Добре для односторінкових сайтів)

Виносимо стилі в <head>.

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: blue;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Тепер я синій і по центру!</h1>
    <h1>І я теж!</h1>
</body>
</html>

Що змінилось? Ми змінили колір в одному місці, а змінилися обидва заголовки. Магія? Ні, це принцип DRY (Don't Repeat Yourself).

Етап 3: External (Професійний підхід)

Розділяємо структуру та вигляд.

Файл 1: style.css (Тут тільки краса)

body {
    background-color: #f0f0f0;
}
p {
    color: green;
    font-family: sans-serif;
}

Файл 2: index.html (Тут тільки структура)

<!DOCTYPE html>
<html>
<head>
    <!-- Ось цей магічний місток 👇 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>Я зелений текст на сірому фоні.</p>
</body>
</html>

Запитання: А що, якщо я створю файл about.html і підключу до нього той самий style.css? Відповідь: Він автоматично отримає той самий дизайн! Ви створили брендинг.

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

Час забруднити руки кодом! Відкрийте редактор (VS Code, Notepad++, або пісочницю CodePen) і виконайте ці завдання.

Завдання 1: "Швидка латка" Створіть кнопку <button>Натисни мене</button>. Використовуючи Inline стиль, зробіть її фон чорним, а текст білим.

Завдання 2: "Міні-сторінка" Створіть HTML-файл з трьома параграфами <p>. Використовуючи Internal стиль (тег <style>), зробіть так, щоб усі параграфи мали розмір шрифту 18px і сірий колір.

Завдання 3: "Проєкт" 1. Створіть файл main.css. Задайте там червоний колір для всіх посилань <a>. 2. Створіть файл index.html. Підключіть до нього main.css. 3. Додайте посилання в HTML і перевірте, чи стало воно червоним.

Завдання 4: "Битва стилів" (Кейс на розуміння) Що буде, якщо зробити таке? * У style.css написано: h1 { color: blue; } * В HTML написано: <h1 style="color: red;">Заголовок</h1> * Якого кольору буде заголовок? Перевірте це на практиці!

Завдання 5: "А що, якщо..." Спробуйте підключити зовнішній CSS файл, якого не існує (наприклад, зробіть помилку в назві файлу в атрибуті href). Що покаже браузер? (Спойлер: він не вибухне, але буде виглядати "голим").

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

Як відрізнити новачка від профі, просто глянувши на код?

Новачок думає: «Мені треба, щоб цей текст був жирним. Додам style="font-weight: bold" прямо сюди, так швидше». Досвідчений розробник думає: «Цей текст — це "важливе попередження". Я створю клас .warning у зовнішньому файлі, щоб потім використовувати його скрізь».

Чому External — це найкращий вибір? 1. Кешування: Браузер завантажує файл style.css один раз. Коли користувач переходить на іншу сторінку вашого сайту, браузер не качає стиль знову. Він дістає його з пам'яті. Сайт працює миттєво! 2. Командна робота: Поки ви пишете HTML структуру, ваш колега-дизайнер може писати CSS в іншому файлі. Ви не заважаєте одне одному.

Типові помилки: * Забути закрити тег <style>. * Написати шлях до файлу CSS неправильно (наприклад, css/style.css замість style.css). * Використовувати Inline стилі для всього підряд. Inline дозволено тільки для email-розсилок (там старі технології) або динамічних змін через JavaScript.

6. 🧩 Підсумок

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

Ми розібрали: * ✅ Inline: Швидко, брудно, точково. * ✅ Internal: Зручно для однієї сторінки. * ✅ External: Професійно, масштабовано, швидко.

Тепер ви вмієте підключати "фарбу" до ваших "стін". Але стривайте... Ми навчилися підключати файл, але як сказати: «Я хочу пофарбувати тільки цей заголовок, а не всі заголовки на світі»? Або «тільки ту кнопку, що в меню»?

Для цього нам потрібні Селектори (Класи та ID). Це наша наступна велика тема.

Це був CS50. Побачимось на наступному уроці! 👋

← До списку уроків Наступний урок →