В этой статье рассмотрим три основных способа подключения CSS к HTML: внешние стили, встроенные стили и инлайн стили.
Внешние стили
Наиболее популярный и рекомендуемый метод подключения CSS – через внешний файл. Стили помещаются в отдельный файл с расширением .css, а затем подключаются к HTML-документу с помощью тега <link> внутри тега <head>. Это позволяет разделять контент HTML и стили, улучшая читаемость и удобство управления кодом. Одни стили можно использовать на многих страницах, что позволяет избежать дублирования кода и делает этот метод идеальным для крупных сайтов.
<head>
<link rel="stylesheet" href="styles.css">
</head>Встроенные стили
Этот метод подразумевает добавление стилей непосредственно в секцию <head> HTML-документа с использованием тега <style>. Подходит для стилизации одной страницы или небольшого проекта, где нет необходимости разделять стили для разных страниц. Но если нужно использовать одни и те же стили на нескольких страницах, придется дублировать код, что усложняет поддержку.
<head>
<style>
h1 {
color: blue;
text-align: center;
}
p {
font-size: 18px;
color: gray;
}
</style>
</head>Инлайн стили
Этот метод применяется непосредственно к конкретному HTML-элементу с использованием атрибута style. Встроенные стили пишутся прямо в HTML-теге и касаются только этого элемента. Такой подход может быть полезен для применения уникальных стилей к отдельным элементам или для быстрого тестирования. однако он не подходит для больших проектов из-за сложности поддержки.
<h1 style="color: blue; text-align: center;">Заголовок с встроенным стилем</h1>
<p style="font-size: 18px; color: gray;">Абзац с встроенным стилем.</p>