Однією з основних переваг CSS (особливо для розробників) є можливість застосовувати набір стилів (правил) до всіх елементів однакового типу в документі. Відредагувавши лише один рядок CSS, можна, наприклад, змінити колір усіх заголовків на сторінці.

Структура правила

Щоб краще зрозуміти, як формуються правила, розглянемо їхню структуру. Кожне правило складається з двох основних частин:

селектор,
селектор,
селектор { /* блок оголошення стилів */
     властивість: значення;
     властивість: значення;
     властивість: значення;
     властивість: значення;
     властивість: значення;
}

• Селектор (selector) – розташовується зліва і визначає, до яких елементів документа застосовується правило. Наприклад, селектор h1 вибирає всі елементи заголовків першого рівня.
• Блок оголошень (declaration block) – розташовується справа і містить одне або кілька оголошень. Кожне оголошення складається з властивості (property) та її значення (value), розділених двокрапкою та завершених крапкою з комою.

На малюнку показано приклад блоку оголошень з двома оголошеннями: перше вказує, що колір (color) вибраних елементів має бути синім (blue), а друге задає розмір шрифту (font-size) у 14px. Таким чином, всі елементи h1 будуть відображатися синім текстом розміром 14px.

Оголошення та ключові слова

Оголошення (Declarations)

Оголошення – це основа CSS-правил. Воно визначає, яку властивість елемента змінити і яке значення їй надати.

Кожне оголошення складається з:

властивість: значення;

Структура оголошення

1. Властивість (Property). Назва CSS-властивості, наприклад:

   color, margin, font-size, background.

2. Двокрапка (:). Розділяє властивість і значення.

   Допустимі варіанти:

   margin: 10px; /* Пробіли після двокрапки */
   padding: 20px; /* Пробіл перед двокрапкою */
   border: 2px solid red; /* Без пробілів */
   

3. Значення (Value)

   Може бути:

   • Одне ключове слово: auto, none, inherit.
   • Число з одиницею виміру: 24px, 50%, 2em.
   • Список значень: 1px solid #000 (для border).
   • Функція: rgb(255, 0, 0), calc(100% - 20px).

4. Крапка з комою (;)

   Завершує оголошення. Обов’язкова, навіть для останнього оголошення в блоці (кращі практики).