Что такое CSS и какими способами его можно подключить?

Вопрос

Что такое CSS, зачем он нужен и какими способами его можно подключить к HTML?

Короткий ответ

CSS (Cascading Style Sheets) — язык описания внешнего вида HTML-документа: цвета, отступы, шрифты, расположение элементов. Подключить стили можно тремя способами: инлайн-атрибутом style, тегом <style> внутри документа или внешним файлом через <link>.

Подробный ответ

CSS отделяет представление от структуры документа: HTML описывает содержимое и семантику, а CSS — как это содержимое выглядит. Один и тот же HTML можно оформить совершенно по-разному, просто подключив другой набор стилей.

Три способа подключения:

• Инлайн-стили (style="color: red") — задаются прямо в атрибуте тега. Имеют максимальный вес в каскаде, но их невозможно переиспользовать и тяжело поддерживать. Подходят разве что для точечных динамических правок через JS.
• Внутренние стили (<style>...</style> в <head>) — действуют в пределах одной страницы. Удобны для небольших демо или критического CSS, встраиваемого для ускорения первой отрисовки.
• Внешний файл (<link rel="stylesheet" href="styles.css">) — стили вынесены в отдельный .css-файл. Основной способ в реальных проектах: браузер кэширует файл, стили переиспользуются на всех страницах, легче поддерживать и разбивать на модули.

Базовый синтаксис правила CSS:

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

Селектор указывает, к каким элементам применяется правило, а тело в фигурных скобках — набор пар "свойство: значение", разделённых точкой с запятой. Селекторы бывают по тегу (p), классу (.card), id (#header), атрибуту ([type="text"]), а также их комбинации.

Пример

/* внешний файл styles.css, подключается через <link> */

/* по тегу */
p {
  margin: 0 0 16px;
}

/* по классу */
.card {
  padding: 16px;
  border-radius: 8px;
  background-color: #f5f5f5;
}

/* по id */
#main-header {
  font-size: 24px;
}

/* по атрибуту */
input[type="email"] {
  border: 1px solid #ccc;
}

<!-- инлайн -->
<p style="color: red;">Текст</p>

<!-- внутренние стили -->
<head>
  <style>
    p { color: blue; }
  </style>
</head>

<!-- внешний файл -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

Дополнительные вопросы

• В каком порядке браузер применяет стили из разных источников, если они конфликтуют?
• Почему инлайн-стили считаются плохой практикой в продакшене?
• Что такое критический CSS и зачем его инлайнят в <head>?