Использование CSS в HTML

CSS предоставляет стили для элементов HTML на странице.
Встраиваемый стиль, использующий атрибут style в тегах элементов, не рекомендуется.
Внутренние таблицы стилей используют тег <style> и применяется для объявления правил конкретной страницы.
Внешние таблицы стилей можно использовать с помощью тега <link>, который берет внешний файл CSS и применяет правила к документу. В этом разделе рассматривается использование всех трех методов подключения.

Используйте атрибут link в заголовке документа:

<head>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>

Вы также можете использовать таблицы стилей, предоставляемые с веб-сайтов через CDN (Cеть доставки содержимого). Например, Bootstrap:

<head>
 <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

Обычно CDN используется для поддержки фреймворка на своем веб-сайте.

Вы также можете использовать элементы CSS внутри HTML, используя тег <style>:

<head>
    <style type="text/css">
        body {
            background-color: gray;
        }
    </style>
</head>

Более того, на странице можно использовать несколько внутренних таблиц стилей:

<head>
    <style type="text/css">
        body {
            background-color: gray;
        }
    </style>
    <style type="text/css">
        p {
            background-color: blue;
        }
    </style> 
</head>

Вы можете указать определенный стиль для элемента, используя атрибут style:

<span style="color: red">Этот текст будет отображаться красным цветом.</span>

Примечание. Старайтесь избегать этого стиля - смысл CSS заключается в том, чтобы отделить содержимое от представления.

Можно загрузить несколько таблиц стилей:

<head>
    <link rel="stylesheet" type="text/css" href="general.css">
    <link rel="stylesheet" type="text/css" href="specific.css">
</head>

Обратите внимание, что более более поздние файлы и объявления будут отменять предыдущие. Поэтому, если general.css содержит:

body {
    background-color: red;
}

а specific.css содержит:

body {
    background-color: blue;
}

если используются оба файла, фон документа будет синим.