Lesson2

Урок 2: Селектори CSS і Специфічність — Хто в Хаті Господар?

Огляд

З поверненням, веб-майстре! 🎩 На першому уроці ти прикрасив свій HTML, зробивши його з “простого дядька” справжнім “столичним модником”. Тепер же пора розібратися з тим, хто насправді керує стилями на твоїй сторінці. У світі CSS селектори — це як бригадири на будівництві: кожен має свою роль і рівень влади, а отже, хто кого переб’є, залежить від специфічності. Словом, все як у селі: хто голосніше кричить, той і старший.

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

Крок 1: Знайомимося із Селекторами — Хто Тут Контролює Ситуацію?

Селектори — це як ті родичі, що завжди втручаються в кожну розмову, навіть якщо їх ніхто не питав. Вони вирішують які елементи HTML слід прикрасити і як. Ось деякі з найпоширеніших:

Селектори за Елементом (p, h1, div): Як дідусь на дачі, вчить однаково всіх. Всі p мають бути зеленими — і все тут.
Селектори за Класом (.назва-класу): Це ніби VIP-вхід у клуб — тільки для вибраних.
Селектори за ID (#назва-id): Головні «боси». Лише один елемент з цим ID отримує особливу увагу, а всі інші можуть тільки заздрити.
Селектори за Атрибутом ([type="text"]): Вибіркові охоронці, які пускають тільки тих, у кого правильний бейдж.

Крок 2: Пишемо Селектори Як Профі

Годі балачок! Час показати селекторам, хто тут командує. Відкривай свій файл styles.css і спробуймо застосувати трохи магії. Ваша сторінка index.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="styles.css">
</head>
<body>
    <h1 id="головний-заголовок">Селектори і Специфічність</h1>
    <p class="вступ">Ласкаво просимо у світ селекторів!</p>
    <p>Давайте подивимося, хто тут справжній господар.</p>
    <div class="контейнер">
        <p class="виділений">Я повинен бути виділений.</p>
        <p>Звичайний параграф, просто собі відпочиваю.</p>
    </div>
</body>
</html>

А тепер давайте подивимось, що ми можемо зробити у styles.css:

`styles.css`

/* Селектор за Елементом */
p {
    color: green; /* Всі <p> будуть зеленими. Навіть якщо вони того не хочуть. */
}

/* Селектор за Класом */
.виділений {
    background-color: yellow; /* Елементи з класом "виділений" світитимуть, як жовта стрічка на ярмарку. */
}

/* Селектор за ID */
#головний-заголовок {
    font-size: 36px; /* VIP-третування для головного заголовка. Додаємо важливості! */
}

/* Селектор за Атрибутом */
input[type="text"] {
    border: 2px solid blue; /* Лише <input> з типом "text" отримають цей стиль. Вибачте, решта кнопок. */
}

Збережи свій styles.css і онови сторінку у браузері. Має вийти кольоровий фестиваль. Але що, якщо ми їх перемішаємо?

Крок 3: Специфічність — Хто Головний у Цій Хаті?

Тепер уяви, що у тебе є <p> із класом і ID. Хто переможе? Це як суперечка за останній шматок вареника на святковому столі. Давай розберемося:

Inline-стилі: Це як сусідський пес, якщо гавкає — все село мовчить. Приклад:
```
<p style="color: red;">Я тут командую!</p>
```
Селектори за ID: Це як старший брат — якщо він хоче щось зробити, інші мають слухатися.
- Приклад: #головний-заголовок б’є .виділений.
Селектори за Класом: Це як старша сестра — авторитетна, але все ж поступається старшому брату.
- Приклад: .виділений може фарбувати текст, але якщо є ID, то тільки стояти в черзі.
Селектори за Елементом: Останні в черзі, вони слухаються всіх.

Коли Все Йде Навперейми (і Хочеться Кричати на Монітор)

Якщо колись ти думав: “Чому мій CSS не працює?!”, скоріш за все, проблема у специфічності. Спробуй підвищити вагу свого селектора:

Додавай додаткові класи (.контейнер .виділений), щоб додати сили.
Або використовуй !important… але тільки як останню надію (бо це як забивати цвях ложкою).

Крок 4: Запускаємо Проект із Caddy (Пора Показати Шедевр!)

Час побачити всю цю красу в дії. Відкрий свій проект за допомогою Caddy:

Відкрий термінал і перейдіть у папку з проєктом:
```
cd ~/Documents/my-css-project
```
Запусти Caddy, щоб підняти сервер:
```
caddy file-server --listen :8080
```
Відкрий браузер і введи:
```
http://localhost:8080
```

І все! Твоя сторінка готова до перегляду (хоча б у локальній мережі).

Висновок

Вітаю! 🎉 Ти не просто створив свою першу сторінку, ти розібрався, хто керує стилями у CSS. Знаючи, як працює специфічність, ти зможеш уникнути багатьох головних болів у майбутньому.

На наступному уроці ми зануримось у Flexbox та Grid — системи, які перетворять твій сайт у витвір мистецтва. Готуйся зробити свій сайт настільки гарним, що ним можна буде похвалитися на ярмарці!

Зустрінемося в наступному уроці, де речі стануть ще більш… гнучкими! 😎