Как подключить CSS к HTML-файлу?
Совсем новичок: написал стили, но не понимаю, как связать CSS-файл с HTML, чтобы они применились. Есть же несколько способов? Какой правильный и куда что писать?
2 ответа
Есть три способа подключить стили, и рекомендуемый — внешний файл.
1. Внешний файл (лучший способ). Создаёте style.css и подключаете его в <head> тегом <link>:
<!-- index.html -->
<head>
<link rel="stylesheet" href="style.css">
</head>
/* style.css */
body { font-family: sans-serif; }
h1 { color: #4f46e5; }
Почему так: стили отделены от разметки, кешируются браузером и переиспользуются на всех страницах. href — путь к файлу относительно HTML.
2. Тег <style> прямо в <head> — для маленьких страниц или быстрых проб:
<head>
<style>
body { background: #f7f7f7; }
</style>
</head>
3. Инлайн через атрибут style — только для точечных исключений:
<p style="color: red;">Текст</p>
Инлайн неудобно поддерживать и он перебивает остальные правила, так что им злоупотреблять не стоит.
Если стили «не применяются», проверьте: правильный ли путь в href, лежит ли <link> внутри <head>, и нет ли опечатки в rel="stylesheet". Это три самые частые причины «почему CSS не работает».
Маленькое, но частое: путь в href считается относительно HTML-файла, а не от корня диска. Если CSS лежит в подпапке, пишите css/style.css; если на уровень выше — ../style.css. И загляните в консоль/вкладку Network инструментов разработчика — если файл не нашёлся, там будет ошибка 404, и сразу понятно, что дело в пути, а не в самих стилях.