Подключение CSS к HTML

Для включения (подключения) CSS в HTML можно воспользоваться следующими способами:

инлайновый стиль: применение CSS-стилей к конкретному элементу через атрибут style
через тег <style></style> в HTML-документе
через внешний файл

Использование инлайнового (inline) стиля считается плохой практикой, но в качестве примера стоит рассмотреть (особенно может быть полезно backend-разработчикам, которым необходимо что-то "по-быстрому" поправить). Для использования такого варианта подключения CSS необходимо в тег элемента добавить атрибут style, а в значение этого атрибута указать CSS-свойства и значения. Например, добавим для ссылки красный цвет шрифта:

<a href="example.html" style="color: red" rel="color: red">инлайновый стиль</a>

Второй вариант - через теги <style></style> - уже более приемлем, нежели первый способ. Чтобы таким образом подключить CSS к HTML-документу, необходимо в шапке HTML-документа (т.е. между тегами <head></head>) добавить пару тегов <style></style>, а внутри уже перечислять CSS-правила для необходимых элементов. Преимущества такого способа: можно сразу указать правила оформления для нескольких элементов на странице (в зависимости от типа селектора: по типу элемента, по классу, по идентификатору и т.д.). Например, добавим для элемента H1 красный цвет шрифта, а для всех элементов P добавим жирное выделение:

<style>
    h1 {
        color: red;
    }
    p {
        font-weight: 700;
    }
</style>

И третий вариант, который рекомендуется использовать, позволяет подключать внешние CSS-файлы. Чтобы включить CSS-файл в HTML-документ, необходимо в шапке HTML-документа добавить тег <link>, а через атрибут href указать путь к файлу, а при помощи атрибута rel указать тип отношения между текущим файлом и подключаемым файлом. Например, подключим CSS-файл main.css к документу:

<head>
    <meta charset="utf-8">
    <title>Пример включения внешнего CSS-файла</title>
    <link rel="stylesheet" href="main.css">
</head>

Есть еще один способ применение CSS-оформления в документе - через JavaScript, но это уже что-то из невероятного (в смысле так делать лучше не надо ;-) ).