Передумови

• Ultimate HTML

Ласкаво просимо у світ веб-дизайну

CSS (каскадні таблиці стилів) перетворює простий HTML на привабливі, зручні для користувача веб-сторінки. CSS керує кольорами, макетом, відступами та загальним виглядом — фактично оживляє ваші дизайни.

Що таке CSS?

CSS, скорочено від каскадні таблиці стилів, — це мова стилізації, яка використовується для визначення зовнішнього вигляду документів на HTML (Hypertext Markup Language). Але що це означає?

Уявіть собі HTML як фундамент будинку — він забезпечує основну структуру та макет вашої веб-сторінки. Тепер уявіть CSS як дизайнера інтер'єру цього будинку. Саме він відповідає за додавання стилів, кольорів та естетики до структури, роблячи її привабливою та візуально захопливою.

Ознайомтеся з цією ілюстрацією:

Ліва сторона ілюстрації показує звичайний HTML. Права демонструє, як CSS може перетворити той самий контент за допомогою стилю та кольору.

Розуміння синтаксису CSS

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

Розглянемо це на прикладі:

p {
  color: purple;
  background-color: green;
}

• p — це селектор, який вказує, що це правило застосовується до всіх елементів <p>;
• color: purple; визначає, що колір тексту має бути фіолетовим;
• background-color: green; визначає, що колір фону має бути зеленим.

Детальніше про селектори, властивості та значення ми поговоримо у наступних розділах, але наразі запам’ятайте: CSS дозволяє вибирати елементи та застосовувати стилі всередині фігурних дужок {}.

Що далі?

У наступних розділах буде розглянуто селектори, властивості, значення та практичні прийоми стилізації. Після завершення ви зможете перетворювати базову HTML-структуру на чистий, привабливий дизайн.