Щоб ефективно застосовувати стилі, необхідно розуміти CSS-селектори, які визначають, до яких HTML-елементів застосовуватиметься стилізація. Розглянемо основні типи селекторів.

Селектор тегу

Один зі способів застосування стилів — використання самого тегу елемента. Стилі, задані через селектор тегу, впливають на всі елементи з цим тегом. Це корисно для забезпечення однакового оформлення елементів на всьому сайті.

Синтаксис: У HTML маємо елемент p:

<p>It was all in my head.</p>

Щоб застосувати стилі у CSS-файлі, використовуйте назву тегу (p) як селектор:

p {
  property: value;
}

Запустіть наступний приклад і перевірте, як це працює.

Селектор класу

Більш точний спосіб стилізації елементів — використання селекторів класу. Такі селектори дозволяють застосовувати стилі лише до елементів із певними іменами класів, забезпечуючи вибірковість оформлення.

Синтаксис: У HTML додайте атрибут class із відповідною назвою класу:

<p class="text">This song is another hit.</p>

У CSS звертайтеся до імені класу за допомогою крапки (.), щоб визначити стилі:

.text {
  property: value;
}

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

Усі елементи з атрибутом class="text" стилізуються червоним кольором тексту, розміром шрифту 24px і фоном кольору пшениці. Назва класу text визначена у файлі index.css з використанням префікса ..

Комбінування класів

Можна також поєднувати кілька класів на одному елементі, що робить композицію класів потужним інструментом для застосування стилів — імена класів у атрибуті class розділяються пробілами.

Синтаксис: У HTML додайте кілька імен класів до елемента:

<p class="text font">A robot created chemicals.</p>

У CSS визначте стилі для кожного класу окремо:

.text {
  property: value;
}

.font {
  property: value;
}

Запустіть наступний приклад і перегляньте результат. Елементи з класами text і font отримають відповідні стилі.

Елемент <p> з класами text і font отримує стилі від обох селекторів. Клас text встановлює колір navy, а клас font встановлює розмір шрифту 24px.

Селектор Id

Хоча використання селектора id для стилізації можливе, зазвичай це не рекомендується. Id повинні бути унікальними на сторінці, що обмежує їх повторне використання.

Синтаксис: У HTML додайте атрибут id до елемента:

<p id="title">Choose from different themes.</p>

У CSS зверніться до id за допомогою хештега (#), щоб визначити стилі:

#title {
  property: value;
}

Запустіть наступний приклад і спостерігайте, як він працює. У цьому прикладі стилі застосовуються до унікального елемента з id title.

Атрибут id="title" однозначно ідентифікує елемент <p>, і стилі, визначені селектором #title, застосовуються лише до цього конкретного елемента.