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

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

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

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

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

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

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

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

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

```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/> (англ. ) — довідник, щоб підвищити свій досвід у веб-стилях.