2.2 Подключение CSS к HTML документу

Подключение стилей непосредственно к элементу

Для того, чтобы применить стили к какому-то элементу, необходимо прописать этому элементу атрибут style, в значении которого можно прописать правила его отображения:

<div style="color: red; background-color: black; width: 600px">...</div>

Мы рекомендуем отказаться от данного способа задания стилей. Отдайте их backend-разработчикам и JavaScript. Им это нужнее, а вам - неудобно.

Глобальные таблицы стилей

Данный вид подключения подразумевает создание элемента <style> в теге <head>, в котором вы будете прописывать стили:

...
<head>
    <style>
        div {
            color: red;
            background-color: black;
            width: 600px;
        }

        p {
            margin-left: 10px;
            background-color: grey;
            font-size: 14px;
        }
    </style>
    ...
</head>
...

И от этого вида подключения мы рекомендуем вам отказаться. Если вы будете писать крупный сайт, и вам вдруг придётся изменить один стиль отображения во всем сайте, то вам придётся изменять все файлы HTML, которые есть на этом сайте.

Внешние таблицы стилей

Для подключения таблиц, вынесенных в отдельный файл, необходимо в теге <head> разместить следующую строку:

<link rel="stylesheet" href="...">

Прежде чем так сделать, вам нужно создать файл с расширением .css, поместить его в нужную вам папку, и лишь затем можно указать путь к данному файлу в атрибуте href.

Именно этим способом подключения мы будем пользоваться в нашем курсе.

2.2 Подключение CSS к HTML документу