Подключение CSS - Часть 1

25 июля, 201825 июля, 2018 Vertex Academy

Данная статья написана командой Vertex Academy.
Это одна из статей из нашего Самоучителя по HTML&CSS.
Надеемся, что данная статья Вам будет полезна. Приятного прочтения!

Привет! В этой статье мы продолжим знакомство с CSS, а именно научимся подключать CSS стили.

Приведем аналогию из нашей обычной жизни. У всех у нас дома есть розетки и бытовые приборы (электрочайник, стиральная машинка и т.д.). Так вот, если розетка отдельно, а штепсель от элетроприбора отдельно, как бы пользы от этого мало 🙂 Надо чтоб они были подключены. Верно?

Точно так же и с HTML и CSS.

Вы уже знаете:

с помощью HTML мы задаем структуру страницы
с помощью CSS мы стилизуем данную страницу

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

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

Существует 3 способа подключения CSS к HTML. Рассмотрим каждый способ по порядку.

Способ №1 - Создаем CSS-файл и подключаем его к HTML-файлу

Вы уже знаете, что все HTML-файлы имеют расширение .html. Например:

index.html
contacts.html
page-2.html

Точно также для CSS-стилей мы можем создать отдельный файл, только с расширением .css. Например, style.css.

На картинке ниже показан пример, как можно подключить файл style.css к файлу index.html.

Как видите, в теге <head> нам необходимо написать следующее:

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

<head>

</head>

<link> - это специальный тег, который используется для подключения CSS-стилей.
rel = "stylesheet" - это аттрибут rel со значением "stylesheet", что значит таблица стилей. То есть таким образом мы говорим браузеру, что мы хотим подлючить таблицу стилей.
href = "style.css" - в аттрибуте href мы прописали путь к файлу style.css.

Как бы и все 🙂 Файл style.css будет подключен к файлу index.html.

Теперь сделайте это на практике - всего 3 шага:

Шаг 1: Создадим 2 файла: index.html и style.css.

Структура файла index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Название страницы</title>
</head>
<body>
    <p>Утром надо быть особенно осторожным. Одно неловкое движение - и ты снова спишь.</p>
    <p>Вот так всегда. Запланируешь 20 дел. Сделаешь 30. И ни одного из 20 запланированных.</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Название страницы</title>

</head>

<body>

Утром надо быть особенно осторожным. Одно неловкое движение - и ты снова спишь.

Вот так всегда. Запланируешь 20 дел. Сделаешь 30. И ни одного из 20 запланированных.

</body>

</html>

Структура файла style.css

p {
    font-family: Georgia;
    font-size: 18px;
    color: green;
}

p {

font-family: Georgia;

font-size: 18px;

color: green;

}

Шаг 2: Подключаем файл style.css к файлу index.html.

Для этого в файле index.html добавьте тег <link> c необходимыми аттрибутами:

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Название страницы</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p> Утром надо быть особенно осторожным. Одно неловкое движение - и ты снова спишь. </p>
    <p>Вот так всегда. Запланируешь 20 дел. Сделаешь 30. И ни одного из 20 запланнированных. </p>
</body>
 
</html>

<!DOCTYPE html>

<head>

<title>Название страницы</title>

</head>

<body>

Утром надо быть особенно осторожным. Одно неловкое движение - и ты снова спишь.

Вот так всегда. Запланируешь 20 дел. Сделаешь 30. И ни одного из 20 запланнированных.

</body>

</html>

Шаг 3: Открываем файл index.html в браузере. В браузере Вы увидите 2 текста параграфов, написанные:

шрифтом: Georgia
размером шрифта: 18px
цветом: зеленым

Поздравляем! Вы уже умеете подключать CSS к HTML.

Данный способ подключения CSS к HTML является самым распространенным и правильным. Однако мы Вам покажем и 2 других способа, просто чтоб Вы знали как они выглядят, если увидите в коде.

Следующие 2 способа подключения CSS мы опишем в следующей статье.

Надеемся, данная статья была Вам полезна! Читайте дальше наши статьи или приходите учиться к нам на курсы по Front-End. Детальнее о наших курсах у нас на сайте здесь.