❌ Ошибка 1: всё писать в одном месте
Новички часто оформляют страницу прямо внутри HTML с помощью inline-стилей. Это работает, но повторять один и тот же стиль приходится у каждого элемента, и менять его потом мучительно.
Как ломается: чтобы перекрасить три заголовка, нужно править три атрибута style вручную — легко пропустить один.
Заголовок A
Заголовок B
Заголовок C (забыли поменять!)
<h4 style="color:#b91c1c">Заголовок A</h4>
<h4 style="color:#b91c1c">Заголовок B</h4>
<h4 style="color:#2563eb">Заголовок C</h4> <!-- забыли! -->✅ Как правильно
Оставьте в HTML структуру, а стиль задайте одним правилом в CSS — тогда все три заголовка меняются разом.
/* style.css */
h4 { color: #b91c1c; } /* одна правка — меняет всё */❌ Ошибка 2: забыть UTF-8
Без <meta charset="UTF-8"> русский текст может стать нечитаемым при открытии файла с диска.
Как ломается: браузер угадывает кодировку неверно, и вместо букв появляются «кракозябры»:
Привет, мир!
<head>
<!-- charset не указан → текст ломается -->
<title>Привет</title>
</head>✅ Как правильно
Ставьте мета-тег кодировки первой строкой в <head> — текст отрисуется как «Привет, мир!».
<head>
<meta charset="UTF-8">
<title>Привет</title>
</head>❌ Ошибка 3: абсолютные пути
Путь вроде /style.css при открытии через file:// ведёт не туда, куда вы ожидаете.
Как ломается: ведущий слэш указывает на корень диска (C:\), а не на папку проекта — стиль не подключается, страница остаётся без оформления.
✅ Как правильно
Используйте относительные пути: style.css, ./style.css, ../assets/style.css.
<!-- ❌ /style.css — ищет в корне диска -->
<!-- ✅ относительно текущего файла -->
<link rel="stylesheet" href="style.css">