С помощью тега <style> можно добавить стили для одного HTML-документа. Это — внутренние стили. Они будут применены ко всему содержимому страницы. Но только одной страницы.

На практике тебе прийдется создавать сотни HTML-документов и использовать одни и те же стили в них, например, для параграфов или заголовков. Было бы очень удобно добавить стили один раз для всех похожих страниц.

Начни Учить Full-Stack JavaScript СЕЙЧАС!

Например, ты создаешь свой блог. Все страницы с постами должны быть стилизованы одинаково.

<!DOCTYPE html>
<html>
  <head>
		<title>Мой личный блог</title>
  </head>
  <body>
    <h1>Пост о обучении HTML и CSS</h1>
    <h6>Дата публикации: 20.12.2020</h6>
    <p>Мне очень нравится учить HTML верстку!</p>
  </body>
</html>

Я уверен, что ты с легкостью сможешь добавить стили для элементов <h1>, <h6> и <p> на странице с помощью внутренних стилей. Но наша сегодняшняя цель — создать такие стили, которые можно будет использовать и на других страницах.

На всех страницах блога заголовки и параграфы должны выглядеть одинаково.

— Наверное нам надо вынести все эти стили в какой-нибудь отдельный файл?

— Верно, все стили выносятся в отдельный файл с расширением .css. Назвать его можно как угодно. Часто используют имя styles.css.

Правила написания стилей в нем точно такие же, как и для стилей в теге <style>:

  • сначала указываем имя тега
  • потом в фигурных скобках перечисляем свойства со значениями

Начнем с выравнивания <h1> заголовков по-середине страницы. Для этого можно использовать свойство стилей text-align, со значением center.

Создадим файл styles.css и добавим в него 3 строки:

h1 {
  text-align: center;
}

Подключение внешних стилей

После создания файла styles.css, его нужно подключить к HTML документу.

Представим такую структуру документов нашего сайта:

|--my-blog
   |-- post-1.html
   |-- styles.css

Для подключения файла styles.css к файлу post-1.html нам нужен одинарный тег <link>.

Стили всегда размещаются внутри контейнера <head>.

Для подключения стилей нам необходимо выполнить несколько действий с тегом <link>:

  • добавляем атрибут type со значением text/css.

  • добавляем атрибут rel (расшифровывается как relationship - отношение) со значением stylesheet.

  • добавляем атрибут href, чтобы указать путь к файлу стилей.

Вот так будет выглядеть post-1.html с подключенными стилями из styles.css:

<!DOCTYPE html>
<html>
  <head>
		<title>Мой личный блог</title>
    <link rel="stylesheet" type="text/css" href="./styles.css">
  </head>
  <body>
    <h1>Пост о обучении HTML и CSS</h1>
    <h6>Дата публикации: 20.12.2020</h6>
    <p>Мне кажется, что я делаю потрясающий прогресс в изучении верстки</p>
  </body>
</html>

Даже если у тебя есть одна страница, то все равно лучше использовать внешние стили. Так, ты сможешь немного уменьшить размер и ускорить загрузку HTML-документа.