Короткий опис

CSS (Cascading Style Sheets) — каскадні таблиці стилів, які застосовуються для візуального форматування документу в мовах розмітки. CSS використовується для того, щоб визначити кольори, шрифти, верстку та інші аспекти вигляду сторінки.

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

Основна ідея CSS в тому, щоб відокремити дизайн документу від його вмісту. Тобто CSS відповідає за оформлення і зовнішній вигляд, а HTML — за зміст і логічну структуру документу.

Візьмемо для прикладу наступний фрагмент HTML-документу:

<h1>Текст заголовку</h1>

<p>Коротенький абзац...</p>
<p>...і ще трішки тексту.</p>

В ньому ми бачимо декілька HTML-елементів — заголовок (h1) та два абзаци (p).

Спробуємо за допомогою CSS-коду трішки оформити ці елементи:

h1 {
    font-family: Georgia, serif;
}

p {
    color: #333333;
    font-family: "Times New Roman", Times, serif;
}

Таким чином ми даємо інструкцію браузеру, яким має бути шрифт для h1-заголовків і абзаців на цій сторінці, а також вказуємо колір для абзацу.

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

певний-селектор {
    властивість-1: значення-1;
    властивість-2: значення-2;
    ...
}

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

Блок оголошень слід "огорнути" фігурними дужками. Всередині цих дужок можна вказати одне або декілька оголошень, розділених між собою крапкою з комою.

Корисні посилання

• https://developer.mozilla.org/en-US/docs/Web/CSS (англ. ) — CSS: Cascading Style Sheets.

• https://web.dev/learn/css/ (англ. ) — довідник, щоб підвищити свій досвід у веб-стилях.