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

Селектор тегів

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

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

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

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

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

Більш точний спосіб стилізації елементів - це використання селекторів класів. Ці селектори націлені на елементи з певними іменами класів, що дозволяє нам застосовувати стилі вибірково.

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

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

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

Композиція класів

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

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

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

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

Селектор ID

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

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

У CSS посилайтеся на ідентифікатор за допомогою хештега (#) для визначення стилів:

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