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

🔹 1. Що таке селектор і як працюють стилі

📘 У CSS усі стилі записуються у форматі: назва властивості: значення; Селектор визначає, до яких елементів застосовуються стилі.

✅ Сніпет:

p {
    color: red;
    font-size: 20px;
}

🧠 Селектор p означає "усі елементи <p> на сторінці". Стилі всередині {} визначають вигляд цих елементів.

---

🔹 2. Селектор за тегом

📘 Найпростіший селектор — за ім’ям HTML-тега. Застосовується до всіх елементів з відповідною назвою.

✅ Сніпет:

p {
    color: red;
}

---

🔹 3. Селектор за класом

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

✅ Сніпет:

.block {
    text-decoration: underline;
    color: blue;
}

---

🔹 4. Селектор за атрибутом

📘 Дозволяє стилізувати елементи, які мають конкретний атрибут або його значення.

✅ Сніпети:

[href="#"] {
    color: blue;
    font-weight: bold;
    font-size: 30px;
}

[href] {
    text-transform: uppercase;
}

---

🔹 5. Селектор за ID (ідентифікатором)

📘 Застосовується до елемента з унікальним атрибутом id. Перед назвою використовується символ #. Важливо: id має бути унікальним на сторінці.

✅ Сніпет:

#main-title {
    font-weight: bold;
    text-decoration: line-through;
}