Передумови

• Ultimate HTML

Примітка

Якщо ви новачок у веб-розробці та ще не ознайомилися з HTML, рекомендуємо спочатку почати з HTML. HTML є основою для CSS, і ґрунтовне розуміння HTML покращить ваше навчання CSS.

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

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

Що таке CSS?

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

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

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

Зліва показано звичайний HTML, який забезпечує базову структуру. Справа — той самий HTML, оживлений за допомогою CSS, що демонструє його можливості стилізації.

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

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

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

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

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

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

Що далі?

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