Що таке CSS?

CSS (Cascading Style Sheets) — це мова стилів, що використовується для опису зовнішнього вигляду HTML-документів. У перекладі з англійської назва означає «каскадні таблиці стилів», що підкреслює головну особливість CSS: можливість комбінувати кілька джерел стилізації з різним рівнем пріоритету.

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

Для чого використовується CSS

CSS використовується для стилізації, макетування та адаптації вебсторінок під різні пристрої. Це інструмент, який перетворює «суху» HTML-структуру на візуально привабливий, зручний і сучасний інтерфейс. Ось основні напрями застосування CSS:

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

2. Макетування та позиціонування. Завдяки CSS можна гнучко керувати розміщенням елементів на сторінці. Сучасні інструменти, як-от Flexbox і CSS Grid, дозволяють створювати адаптивні сітки та інтерфейси без складної верстки.

3. Адаптивність (Responsive Design). Медіа-запити в CSS дають змогу змінювати стилі в залежності від ширини екрану або типу пристрою. Це ключ до створення мобільних і планшетних версій сайту без дублювання HTML.

4. Анімація та динамічні ефекти. CSS підтримує анімації, переходи (transitions) і псевдокласи (наприклад, :hover), які додають інтерактивності без використання JavaScript. Це підвищує користувацький досвід без збільшення навантаження на сайт.

5. Темізація та перевикористання. Використовуючи змінні CSS (custom properties), можна легко створювати теми оформлення або централізовано змінювати параметри стилю — наприклад, змінити кольорову схему всього сайту в одному місці.

4. Як CSS працює разом з HTML

HTML і CSS — це два основні стовпи фронтенд-розробки, які працюють у тандемі: HTML відповідає за структуру вебсторінки, а CSS — за її візуальне оформлення.

HTML — це каркас

HTML створює структуру: заголовки, абзаци, зображення, посилання, форми тощо. Наприклад:

<p>Привіт, світ!</p>

CSS — це зовнішній вигляд

CSS додає стилі до цих елементів. Наприклад:

p {
  color: blue;
  font-size: 18px;
}

Як CSS підключається до HTML

Inline-стилі (всередині елемента):

<p style="color: red;">Цей текст червоний</p>

Вбудовані стилі (у тегу <style> в <head>):
```
<style>
  p {
    color: green;
  }
</style>
```
Зовнішній CSS-файл (рекомендовано):
HTML:
```
<link rel="stylesheet" href="styles.css">
```
Файл styles.css:
```
p {
  color: orange;
}
```

У підсумку, HTML — це те, що ми бачимо, а CSS — це як ми це бачимо. Разом вони створюють логічно структурований і візуально привабливий інтерфейс.

Статті по CSS:

Основи синтаксису CSS
Селектори та їх застосування
Робота з кольорами та фонами
Макетування за допомогою Flexbox та Grid
Адаптивний дизайн та медіа-запити
Анімації та переходи
Найкращі практики та оптимізація CSS

Що таке CSS?

Для чого використовується CSS

4. Як CSS працює разом з HTML

HTML — це каркас

CSS — це зовнішній вигляд

Як CSS підключається до HTML

Що таке cелектори CSS та їх застосування

Базовий синтаксис CSS

Як підключити CSS

Медіа запити (media queries) в CSS