Что такое CSS

HTML описывает, что находится на странице, а CSS (Cascading Style Sheets, «каскадные таблицы стилей») — как это выглядит: цвета, шрифты, отступы, расположение блоков. Стили пишут отдельно от разметки, поэтому оформление всего сайта можно поменять, не трогая содержимое.

Правило CSS

Стили состоят из правил. Правило начинается с селектора — он говорит, к каким элементам применить стиль. За ним в фигурных скобках { } идут объявления:

<style>
  p {
    color: crimson;
  }
</style>
 
<p>Этот абзац стал красным.</p>
<p>И этот тоже.</p>

Селектор p выбрал все абзацы сразу. Объявление color: crimson состоит из свойства (что меняем) и значения (на что меняем), между ними двоеточие, в конце — точка с запятой.

Несколько объявлений

В одном правиле может быть сколько угодно объявлений. Каждое пишут на отдельной строке — так их легче читать и менять:

<style>
  h2 {
    color: royalblue;
    font-size: 28px;
    text-align: center;
  }
</style>
 
<h2>Заголовок по центру</h2>

Заголовок получил сразу три изменения: цвет, размер шрифта и выравнивание по центру.

Где писать стили

Стили можно написать в теге <style>, как в примерах выше, или в атрибуте style самого элемента. Во втором случае селектор и скобки не нужны — стиль относится только к этому элементу:

<p style="color: seagreen; font-weight: bold;">Стиль прямо в теге.</p>
<p>Соседний абзац его не получил.</p>

Атрибут style удобен для быстрой проверки, но на настоящих сайтах его избегают: стили разбросаны по разметке, и их трудно найти.

Отдельный файл стилей

Основной способ — хранить стили в файле с расширением .css и подключить его в <head> тегом <link rel="stylesheet" href="styles.css">. Сам файл содержит только правила, без тега <style>:

/* styles.css */
body {
  font-family: Arial, sans-serif;
}
 
h1 {
  color: royalblue;
}

Один файл подключают ко всем страницам сайта, и одно изменение в нём обновляет их все.

Стили браузера

Даже без вашего CSS страница не голая: у браузера есть стили по умолчанию. Заголовки крупные и жирные, ссылки синие и подчёркнутые, у абзацев есть отступы:

<h1>Заголовок</h1>
<p>Абзац и <a href="#">ссылка</a> — всё это оформил сам браузер.</p>

Ваши правила не заменяют эти стили целиком, а меняют только указанные свойства.

Комментарии

Комментарий пишут между /* и */. Браузер его пропускает, а людям он объясняет код:

<style>
  /* Основной цвет текста */
  p { color: slategray; }
</style>
 
<p>Комментарий на странице не виден.</p>

Комментарием можно временно «выключить» правило, не удаляя его.

Частая ошибка

Пропущенная точка с запятой ломает соседнее объявление: браузер читает две строки как одно непонятное значение и отбрасывает обе.

<style>
  p {
    color: crimson
    font-size: 24px;
  }
</style>
 
<p>Ни цвет, ни размер не применились.</p>

Браузер не показывает ошибок в CSS — неверное объявление просто молча пропускается. Если стиль не сработал, первым делом проверьте точки с запятой и двоеточия.