Что такое CSS?

CSS (Каскадные таблицы стилей) — это язык описания внешнего вида HTML-документов. С помощью CSS можно задавать цвета, шрифты, отступы, расположение элементов, размеры, анимации и адаптивность веб-страниц. CSS отделяет содержание (HTML) от оформления.

🔹 Общая информация:

Полное название: Cascading Style Sheets (Каскадные таблицы стилей)
Создатель: Хокон Вьюм Ли (Håkon Wium Lie) в 1996 году
Поддерживается: W3C (World Wide Web Consortium)
Используется с: HTML и XML-документами

💡 Для чего нужен CSS?

Управление цветами, фонами, шрифтами
Задание отступов, размеров, выравнивания
Создание адаптивных (responsive) сайтов
Реализация анимаций и переходов
Поддержка темной/светлой темы, мобильной версии и пр.

🧠 История и развитие CSS:

Версия	Год	Возможности
CSS1	1996	Цвета, шрифты, отступы
CSS2	1998	Позиционирование, z-index, медиа-типы
CSS2.1	2004	Улучшения и исправления
CSS3	2012	Flexbox, Grid, анимации, градиенты
CSS4	(в разработке)	Новые селекторы и фичи

🧩 Синтаксис CSS:

селектор {
  свойство: значение;
}

Пример:

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

Это правило сделает текст всех абзацев синим и установит размер шрифта 18px.

🧰 Виды подключения CSS:

Тип	Описание	Пример
Встроенный	Через `style` прямо в HTML-теге	`<p style="color:red;">`
Внутренний	Внутри тега `<style>` в `<head>`	`<style> p { color: red; } </style>`
Внешний	В отдельном .css-файле	`<link rel="stylesheet" href="style.css">`

🖥️ Пример CSS в действии:

HTML:

<h1 class="title">Добро пожаловать!</h1>

CSS:

.title {
  color: green;
  text-align: center;
  font-size: 36px;
}

🔥 Современные возможности CSS:

Flexbox — гибкая разметка блоков по одной оси
CSS Grid — двумерные сетки
Media queries — адаптация к экранам (телефоны, планшеты)
Переменные CSS — --main-color: #333;
Анимации и переходы — transition, @keyframes
Собственные шрифты — через @font-face или Google Fonts
Темная тема — через prefers-color-scheme

✅ Преимущества CSS:

Разделение контента и оформления
Легкое изменение дизайна во всем сайте
Повышение скорости загрузки и кода
Поддержка адаптивности
Широкие возможности визуального оформления