Передумови

• 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 на дизайн, який захоплює та надихає.