Как подключить стили к HTML-странице

23 ноября 2020

Допустим, вы написали HTML-код, но страница с текстом без оформления выглядит не очень. Значит, нужно подключить файл со стилями. Рассказываем, как это сделать проще всего.

Найдите в вашем коде тег <head>. Если его нет —semantiнапишите.

<!DOCTYPE html>
<html lang="ru">
  <head>

  </head>
  <body>
    Текст сайта.
  </body>
</html>

Допустим, файл со стилями находится в той же папке, что и наша страница, и называется style.css. Вставьте между тегами <head> строчку:

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

Получится так:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <link rel="stylesheet" href="outlines.css">
  </head>
  <body>
    Текст сайта.
  </body>
</html>

Сохраните файл и обновите страницу. Посмотрите, что изменилось:

Код простой странички и стили для самостоятельной тренировки можно найти по ссылке.

Это был самый простой способ подключить файл со стилями к странице. Другие способы — в тренажёре «Основы CSS». А чтобы научиться делать много других штук с HTML, попробуйте пройти бесплатный тренажёр «Знакомство с HTML и CSS».

Пройти тренажёр

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Телеграм Подкаст Бесплатные учебники