Как подключить таблицу стилей CSS к HTML

Подключение CSS-стилей к HTML

Стили, относящиеся к CSS, могут присутствовать на HTML странице в качестве независимого кода. Либо их можно задать, подключив, как отдельный файл, если таковой есть. Именно о том, как подключить таблицу стилей CSS к HTML и будет данный урок.

Инлайновые стили

Что касается первого варианта, то такие стили называются не подключенными, а встроенными. Еще можно встретить название «инлайновые». Задаются такие стили внутри тега <style> с помощью обычного CSS-кода. А сам этот тег, в свою очередь, находится внутри тега <head>.

Наглядный пример встроенного (инлайнового) стиля:

<head>
  <style>
    CSS-код
  </style>
</head>

Надо отметить, что стили такого типа задействуются не очень часто. Как правило, чтобы оптимизировать скорость загрузки страницы. В большинстве случаев используются внешние стили, подключаемые из файла.

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

Как правило, стили хранятся в файле с расширением .css. И именно он подключается посредством тега <link>. На примере это выглядит вот так:

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

Ссылка на файл задается с помощью атрибута href. Также обязательным является использование атрибута rel="stylesheet". Он служит своего рода индикатором, благодаря которому браузер определяет, что подключаются именно стили.

Я рекомендую осуществлять подключение стилей внутри тега <head>, но это не принципиально, так как работа тега <link> будет осуществляться в любом месте страницы.

Подробнее стили мы рассмотрим чуть позже. Пока что вам достаточно знать, что такая возможность есть.

Присоединяйтесь к нам в Twitter, ВКонтакте, Facebook и Google+, а также вступайте в наш чат в Telegram, чтобы не пропустить новые уроки и быть в курсе последних новостей из мира веб-разработки.