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

Примітка

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

Визначення CSS

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

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

Погляньте на цю ілюстрацію:

Зліва ви бачите звичайний HTML, який забезпечує базову структуру. Праворуч - той самий HTML із застосуванням CSS, що перетворює його на щось візуально привабливе.

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

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

python
9
1
2
3
селектор {
  властивість: значення;
}

Давайте розберемо це на прикладі:

css
9
1
2
3
4
p {
  color: purple;
  background-color: green;
}

• p є селектором, який вказує на те, що це правило застосовується до всіх елементів <p>.

• color: purple; вказує, що колір тексту має бути фіолетовим.

• background-color: green; вказує, що колір фону має бути зеленим.

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

Що далі?

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