Как подключить CSS-файл к странице

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

Положите стили в отдельный файл, например styles.css, и подключите его в <head> тегом <link>:

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<p>Styles from styles.css apply to this page.</p>

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

Пути к файлу

• styles.css — файл лежит в той же папке, что и HTML.
• css/styles.css — в папке css рядом с HTML.
• ../styles.css — на уровень выше.
• /css/styles.css — от корня сайта, работает с любой страницы.

Стили внутри страницы

Небольшие стили можно написать прямо в странице, в теге <style>. Так сделаны примеры на этом сайте:

<style>
  p { color: steelblue; }
</style>
<p>Styled by the style tag.</p>

Если подключено несколько файлов, при равной специфичности побеждает правило из того, что подключён ниже.

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

Стили не применяются, а ошибки не видно. Почти всегда это неверный путь: файл называется style.css, а в href написано styles.css, или файл лежит в другой папке. Откройте инструменты разработчика (F12), вкладку «Сеть» (Network): файл со статусом 404 браузер не нашёл.