Добавление CSS

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

Таблицы связанных стилей

Самый мощный и удобный способ определения стилей и правил для сайта. Стили хранятся в отдельном файле, который может быть использован для любых веб-страниц. Для подключения таблицы связанных стилей используется тег в заголовке страницы (пример 1).

Пример 1. Подключение таблицы связанных стилей

       
Hello, world!
  

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

Достоинства данного способа

1. Используется один файл со стилем для любого количества веб-страниц, также возможно его применять на других сайтах.
2. Можно изменять таблицу стилей без модификации веб-страниц.
3. При изменении стиля в одном единственном файле, стиль автоматически применяется ко всем страницам, где есть на него ссылка. Несомненно, удобно. Указываем размер шрифта в одном только месте, и он изменяется на всех сто или больше веб-страницах нашего сайта.
4. Файл со стилем при первой загрузке помещается в кэш на локальном компьютере, отдельно от веб-страниц, поэтому загрузка сайта происходит быстрее.

Таблицы глобальных стилей

Стиль определяется в самом документе и обычно располагается в заголовке веб-страницы. По своей гибкости и возможностям этот способ использования стиля уступает предыдущему, но также позволяет размещать все стили в одном месте. В данном случае, прямо в теле документа. Определение стиля задается тегом (пример 2).

Пример 2. Использование таблицы глобальных стилей

       
Hello, world!
  

В данном примере показано изменение стиля заголовка . На веб-странице теперь достаточно указать только этот тег и стили будут добавлены к нему автоматически.

Внутренние стили

Внутренний стиль являются по существу расширением для одиночного тега используемого на веб-странице. Для определения стиля используется атрибут style , а его значения указываются с помощью языка таблицы стилей (пример 3)..

Пример 3. Использование внутренних стилей

       
Hello, world!
  

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

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

Пример 4. Сочетание разных методов подключения стилей

     H1 
Hello, world!
 
Hello, world!
  

В приведенном примере первый заголовок задается красным цветом размером 36 пикселов, а следующий — зеленым цветом и другим шрифтом.

Как вставить css в html: 3 способа добавить css в html

Вы можете по разному добавить css в ваш html-файл. Есть быстрые варианты, есть правильные. Мы рассмотрим все возможные.

1. Подключение внешнего файлы

Самый распространенный и правильный вариант — это просто подключить внешний файл CSS.

Это делается внутри тега с помощью тега link.

Какие преимущества у этого способа? Во-первых, это просто удобно. Все ваши стили будут лежать в отдельном файле. Не потеряются, как минимум. Да и редактировать можно без вмешательства в html. Во-вторых, вы сможете этот файл закешировать и ускорить загрузку вашего сайта.

Частый вопрос: что делать, если файл index.html лежит не в корне, а в отдельной папке — как тогда подключить стили?

Ответ простой: нужно прописать правильный путь к файлу styles.css. Предположим ваш файл styles.css находится в папке css, а index.html в папке templates. Тогда внутри тега в html подключаете стили таким образом:

Здесь вы, как бы, поднялись на один уровень вверх с помощью вот этих символов: «../». Если нужно подняться на два уровня вверх, то пишите вот так: «../../»

2. Внутренние стили

Внутренние стили можно прописать для конкретной html-страницы. Вы не подключаете файл, как в предыдущем примере, а вставляете css код прямо внутрь html. Но делаете это с двумя правилами.

Первое правило: вставляйте внутри тега

Второе правило: вставляйте css стили внутри тега

Таким образом у вас должен получиться вот такой код:

 body < background-color: #cccccc; >h1 

И все это нужно вставить внутри тега .

Зачем так делают? Возможно, у вас нет доступа к редактированию файлов css, либо вы хотите, чтобы новый css код срабатывал только на этой странице, а возможно вы не хотите ждать, когда загрузится файл styles.css и вставляете css код прямо в html страницу. Отчасти это ускорит загрузку страницы, однако, такой подход затрудняет поддерживать и редактировать сайт в дальнейшем.

Если вы вставляете css код через на странице, к примеру, contact.html, то эти стили будут действительны только на этой конкретной странице. На странице about.html они уже не будут работать.

3. Встроенные стили

Встроенные стили задаются для конкретного элемента через атрибут style. Давайте сразу покажем, как это выглядит. Предположим у вас есть заголовок h1 и вы хотите изменить размер шрифта и разместить текст по центру блока. Тогда прописываем вот так:

Заголовок страницы

Таким образом эти стили будут применены к конкретно этому элементу. Другие H1 будут без изменений, так как мы встроили инлайновые стили только для конкретно вот этого заголовка.

Одно из преимуществ такого метода, это то, что инлайновые стили как бы перекрывают стили прописанные в css файле. То есть они считаются более весомыми.

Есть еще несколько «экзотичных» методов вставки css в html код. Однако, мы их не будем рассматривать.

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

Как вставить файл CSS в HTML

wikiHow работает по принципу вики, а это значит, что многие наши статьи написаны несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали, в том числе анонимно, 12 человек(а).

Количество просмотров этой статьи: 14 862.

В этой статье:

Язык гипертекстовой разметки (HTML) определяет, какие элементы присутствуют на веб-странице. Язык программирования «Каскадные таблицы стилей» (CSS) описывает, как должны выглядеть эти элементы. Файл CSS можно добавить в HTML в качестве внешней (CSS добавляют в виде отдельного файла) или внутренней таблицы стилей (CSS включают в файл HTML). Узнайте, как вставить в HTML файл CSS, чтобы изменить дизайн сайта.

Метод 1 из 2:

Как уставить внешнюю таблицу стилей

Создайте файл CSS. Подготовьте и сохраните файл CSS с расшиернием «.css».

Загрузите файл CSS на сайт.

• Хорошей практикой является удаление из адреса (URL) основного имени домена. Исходя из этого, адрес http://мойсайт.com/css/default.css будет сокращен до «/css/default.css». Не забудьте включить ведущий слэш («/»). Он называется относительным путем.

Вставьте в файл ссылку. Найдите в файле HTML метку и создайте пустую строку прямо над ней. Вставьте в эту строку , заменив «www.ваш. » на ссылку в файле CSS.

Сохраните файл HTML и загрузите его на сайт.

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

Метод 2 из 2:

Как вставить внутреннюю таблицу стиля

Создайте метку . Откройте файл HTML и найдите метку . Добавьте над ней несколько пустых строк и введите следующее:

STYLE type="text/css"> STYLE> 

Вставьте все свои CSS между этими двумя метками.

Сохраните файл HTML (с расширением .HTML).

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

• Всегда проверяйте внешний вид сайта в разных браузерах и на разных операционных системах. Некоторые браузеры подключаются к CSS немного по-разному. Это даже может произойти в одном и том же браузере, но на разных версиях Mac и Windows. Если в другом браузере ваш сайт выглядит иначе (например, промежуток между некоторыми объектами, такими как списки, имеет другой размер), тогда проблема заключается в настройках этого браузера. Найдите таблицу мастер-стилей и вставьте ее в начало файла CSS, чтобы изменить стандартные настройки браузера. Это делается для того, чтобы ваши настройки ничего не меняли в самом браузере.
• Вставьте внешнюю таблицу стилей, если у вас есть такая возможность. Это позволит вам менять внешний вид сайта, изменяя код в исходном файле. Так вам не придется менять CSS на каждой странице сайта.
• Если сайт не реагирует на CSS так, как вы того ожидали, перепроверьте всю кодировку, чтобы удостовериться в правильности ее написания. В частности, уделите особое внимание точкам с запятыми («;») и закрывающимся скобкам («>»). В CSS файле довольно просто пропустить один из этих символов.
• Сохраните файл HTML на компьютер, чтобы потом открыть его в различных веб-браузерах и перепроверить его внешний вид перед дальнейшей загрузкой. Но чтобы его загрузить, файл CSS необходимо вставлять в HTML в качестве внешней таблицы стилей.
• Если таблица стилей сама себе противоречит – например, сначала в ней говорится, что текст будет синим, а затем, что он будет красным – выполняться всегда будет последнее условие. Если одна команда представляет собой внешнюю таблицу стилей, а другая – внутреннюю, активной будет внутренняя таблица.

Предупреждения

• Не используйте «открытую» постановку CSS, то есть CSS, который включен в метку HTML. (Пример: «align=’center’» является открытой постановкой CSS). Это устаревший вариант с плохой синтаксической конструкцией. Если через некоторое время вам придется обновлять сайт, эту постановку будет трудно изменить.

Подключение стилей CSS к HTML документу. Как подключить CSS файл

Каскадные таблицы стилей CSS (Cascading Style Sheets) нужны для оформления страниц вашего сайта в соответствии с разработанным стилем, дизайном.

Таблицы стилей CSS являются неотъемлемой частью страниц современного сайта. Рассмотрим как подключить CSS к HTML странице сайта.

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

Подключение CSS через внешний файл стилей тегом link

Наиболее правильный вариант определения общих стилей для сайта — это подключение внешнего файла CSS с помощью тега .

Чтобы подключить CSS файл, в head области страницы используйте следующую конструкцию:

В атрибуте href необходимо указать URL адрес файла, содержащего набор стилей CSS. Атрибуты rel=»stylesheet» и type=»text/css» указывают, что указанный файл является таблицей стиля в формате CSS.

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

Добавление CSS с помощью тега style

Этот метод подойдет когда нужно вставить (определить) стили для группы уникальных элементов страницы, то есть, набор стилей, которые используются только в пределах одной страницы и не нужны для корректной работы остальных страниц сайта.

 
/* CSS код */ 

CSS стили для конкретного тега атрибутом style

Если вам нужно задать стиль для конкретного элемента контента страницы (одного конкретного тега), воспользуйтесь атрибутом style .

текст

Стили, заданные через атрибут style называют inline-стилями. Такие стили имеют приоритет перед стилями, заданными через внешний файл или с помощью тега , но есть исключения.

Inline-стили также обычно используются, когда вы редактируете контент через программы — визуальные редакторы WYSIWYG .

Стили CSS через JavaScript

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

В JavaScript, при использовании библиотеки jQuery, есть много различных функций для управления стилями HTML элементов. Например, функция .css() — задает CSS стиль для элемента, .hide() — добавление элементу CSS свойства display: none; (скрытие элемента) и др.

При использовании этих функций CSS свойства добавляются в style атрибут тега.

Пример подключения CSS к HTML странице описанными выше способами

Ниже приведен код простой HTML страницы с подключением CSS стилей различными способами.

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

 
 
 
 
 
 
 
  
 
Таблица моделей некоторых смартфонов Samsung.

 
 
 
 
.model_table margin: 10px; 
width: 100%; 
> 
.model_table tr:nth-child(even) background-color: #efefef; 
> 
.model_table tr:hover background-color: #cfcfcf; 
> 
 
 
 
Скрыть модели февраля
 
 
 
Модели февраля 
 
Samsung Galaxy A10 
2019, февраль 
 
Samsung Galaxy A30 
2019, февраль 
 
Samsung Galaxy A50 
2019, февраль 
  
 
Модели марта 
 
Samsung Galaxy A20 
2019, март 
 
Samsung Galaxy A40 
2019, март 
 
 
 
*В таблице указаны предварительные данные.

 
 
 
document.getElementById('model_table_hide_btn').addEventListener("click", function () document.getElementById('model_table_winter').style.display = 'none'; 
>); 

Результат приведенного выше кода:

Таблица моделей некоторых смартфонов Samsung.

Скрыть модели февраля

Модели февраля
Samsung Galaxy A10	2019, февраль
Samsung Galaxy A30	2019, февраль
Samsung Galaxy A50	2019, февраль

Модели марта
Samsung Galaxy A20	2019, март
Samsung Galaxy A40	2019, март

*В таблице указаны предварительные данные.

Подключение стилей CSS в HTML странице — шпаргалка для новичков

Не знаете как привязать CSS к HTML? Подключение CSS-кода на HTML-странице можно производить четырьмя способами: в тело документа, встроить код в заголовочную часть страницы ( header ), указать ссылку на внешний файл, а также импортировать CSS-файл .

Как добавить CSS в HTML — встроенные стили

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

HTML Styles with CSS

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

Как вставить CSS в HTML — встроенная стилизация

Этот метод, позволяющий осуществить подключение CSS к HTML подразумевает, что вы добавляете весь необходимый код стилизации одним большим фрагментом. Это позволяет стилизовать любой элемент на странице. Подобный подход можно реализовать путем встраивания CSS-кода с помощью в заголовочную часть страницы. Например, поместите приведенный ниже код в раздел HTML-документа :

 body < background-color: darkslategrey; color: azure; font-size: 1.1em; >h1 < color: coral; >#intro < font-size: 1.3em; >.colorful

Примерно так будет выглядеть код HTML страницы:

    body < background-color: darkslategrey; color: azure; font-size: 1.1em; >h1 < color: coral; >#intro < font-size: 1.3em; >.colorful 
Встроенная стилизация
 
Позволяет вам определять стили сразу для всей страницы.
 
Этот абзац оформлен при помощи класса.
  

Привязка CSS к HTML — внешние стили

Внешние стили – это один из самых распространенных способов подключения стилей CSS.

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

Чтобы добавить внешние стили на веб-страницу, воспользуйтесь тегом с указанием атрибутов href и rel=»stylesheet» :

     
Встроенная стилизация
 
Позволяет вам определять стили сразу для всей страницы.
 
Этот абзац оформлен при помощи класса.
  

Теперь в HTML-файле нет никакой информации относительно стилизации элементов. Подключение CSS файла позволяет не загромождать стилями исходный код веб-страницы.

Подключение CSS файла к HTML или импорт стилей

Также можно использовать CSS-правило @import , чтобы импортировать внешние таблицы стилей. Для этого воспользуйтесь тегом . Здесь будет уместен любой из следующих синтаксисов:

Здесь используются те же стили, что и в предыдущих примерах, но импортированные с помощью @import :

      
Встроенная стилизация
 
Позволяет вам определять стили сразу для всей страницы.
 
Этот абзац оформлен при помощи класса.
  

Учтите, что данный метод подключения шрифтов CSS может негативно сказываться на производительности сайта, поэтому рекомендуется использовать .

Однако правило @import можно использовать внутри самого внешнего файла таблиц стилей для встраивания одного кода CSS в другой, не влияя на производительность.

Не существует жестких правил относительно того, какие методы использовать. Лучше всего исходить из конкретной ситуации и выбирать наиболее оптимальные методы стилизации элементов.

Как вставить css в html: 3 способа добавить css в html

Вы можете по разному добавить css в ваш html-файл. Есть быстрые варианты, есть правильные. Мы рассмотрим все возможные.

1. Подключение внешнего файлы

Самый распространенный и правильный вариант — это просто подключить внешний файл CSS.

Это делается внутри тега с помощью тега link.

Какие преимущества у этого способа? Во-первых, это просто удобно. Все ваши стили будут лежать в отдельном файле. Не потеряются, как минимум. Да и редактировать можно без вмешательства в html. Во-вторых, вы сможете этот файл закешировать и ускорить загрузку вашего сайта.

Частый вопрос: что делать, если файл index.html лежит не в корне, а в отдельной папке — как тогда подключить стили?

Ответ простой: нужно прописать правильный путь к файлу styles.css. Предположим ваш файл styles.css находится в папке css, а index.html в папке templates. Тогда внутри тега в html подключаете стили таким образом:

Здесь вы, как бы, поднялись на один уровень вверх с помощью вот этих символов: «../». Если нужно подняться на два уровня вверх, то пишите вот так: «../../»

2. Внутренние стили

Внутренние стили можно прописать для конкретной html-страницы. Вы не подключаете файл, как в предыдущем примере, а вставляете css код прямо внутрь html. Но делаете это с двумя правилами.

Первое правило: вставляйте внутри тега

Второе правило: вставляйте css стили внутри тега

Таким образом у вас должен получиться вот такой код:

 body < background-color: #cccccc; >h1 

И все это нужно вставить внутри тега .

Зачем так делают? Возможно, у вас нет доступа к редактированию файлов css, либо вы хотите, чтобы новый css код срабатывал только на этой странице, а возможно вы не хотите ждать, когда загрузится файл styles.css и вставляете css код прямо в html страницу. Отчасти это ускорит загрузку страницы, однако, такой подход затрудняет поддерживать и редактировать сайт в дальнейшем.

Если вы вставляете css код через на странице, к примеру, contact.html, то эти стили будут действительны только на этой конкретной странице. На странице about.html они уже не будут работать.

3. Встроенные стили

Встроенные стили задаются для конкретного элемента через атрибут style. Давайте сразу покажем, как это выглядит. Предположим у вас есть заголовок h1 и вы хотите изменить размер шрифта и разместить текст по центру блока. Тогда прописываем вот так:

Заголовок страницы

Таким образом эти стили будут применены к конкретно этому элементу. Другие H1 будут без изменений, так как мы встроили инлайновые стили только для конкретно вот этого заголовка.

Одно из преимуществ такого метода, это то, что инлайновые стили как бы перекрывают стили прописанные в css файле. То есть они считаются более весомыми.

Есть еще несколько «экзотичных» методов вставки css в html код. Однако, мы их не будем рассматривать.

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

Как правильно подключить CSS к HTML

CSS – это таблица стилей. От нее зависит то, как будет выглядеть ваш сайт, цвета в оформлении, шрифты, расположение элементов и т.п. Поэтому обойтись без CSS при создании сайтов и веб-приложений не получится. Важно уметь правильно использовать этот инструмент в ходе разработки своего проекта.

Настраиваем стили в HTML

В HTML есть несколько глобальных тегов:

• – в него оборачивается вся страница.
• – в нем может храниться логика приложения или ссылка на отдельные скрипты.
• – блок, где можно прописать CSS-разметку.

В блоке вы можете использовать все существующие свойства CSS. Менять цвет отдельных элементов страницы, обращаться к селекторам и менять их размер, делать медиа-запросы для создания адаптивной верстки и выполнять массу других задач.

В коде это может выглядеть так:

 
Какой-то контент
 
Еще какой-то контент
  p < color: red; >.text

Мы применили CSS к странице. Дополнительно прикреплять стили к нашему сайту не нужно.

inline-стили

Необязательно прописывать стили в отдельном блоке. Можно вовсе не использовать тег . Можно использовать одноименный атрибут.

Атрибуты представляют собой параметры, указываемые в HTML-элементах. class или id являются атрибутами. Если вы захотите поменять стиль для блока div, то после его класса нужно написать style и поочередно указать стили в формате CSS. В реальном коде это может выглядеть так:

  
Приветики
 
 

Мы указали свойство flex у div-элемента и поменяли цвет текста внутри на синий.

Такой подход очень удобен, если нужно быстро скорректировать дизайн какого-то элемента или в череде одинаковых блоков с контентом выделить конкретный и стилизовать иначе. Применив стиль к одному div, все остальные вы не затронете. Если нужно более широко настроить стили, то придется все-таки использовать блок или отдельный файл с CSS-разметкой.

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Настраиваем стили в отдельном CSS-файле

Это наиболее распространенный метод подключения CSS к сайту или приложению. Он используется как при работе с классическим стеком HTML/CSS/JavaScript, так и при подключении фреймворков в духе React.

Подключение производится по-разному в зависимости от используемых технологий.

Стандартное подключение к HTML

Нужно в HTML-файле добавить метатег link. Метатег link – тип ссылки – адрес файла со стилями.

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

Подключение при помощи Webpack

Если в ходе разработки вы задействуете сборщик пакетов, то нужно зарегистрировать в нем специальный плагин. Например, css-loader, который преобразует все добавленные в него CSS-файлы в единый набор стилей, используемых в приложении.

Подключение к фреймворку React

В React используется стандарт ECMAScript2015. Для работы с CSS используется директива import.

Деление стилей на группы

Размещение стилей в отдельных CSS-файлах не только упрощает редактирование стилей и управление ими, но и позволяет не увеличивать количество кода в одном документе.

Чтобы это сделать, можно воспользоваться любым из описанных выше методов, но повторить его несколько раз. Например, написать директиву import несколько раз, указав разные адреса. Или же добавить в список метатегов дополнительные ссылки на CSS-документы.

Подключаем чужие CSS-стили

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

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

Также внешние стили могут применяться с целью добавить единый стиль из какой-то общепринятой дизайн-системы (часто компонентной).

Другие способы

Некоторые фреймворки подразумевают использование CSS без CSS-файлов в их привычном виде. По такому принципу работает фреймворк TailwindCSS. Сразу после установки он автоматически становится доступен в приложении на глобальном уровне, а вам лишь остается использовать добавленные классы в любой части приложения без необходимости отдельно подключать CSS.

Также некоторые компонентные библиотеки, такие как Vue и Svelte, не требуют хранить стили в отдельной директории и двигают пользователя к использованию стилей внутри блоков .

Вместо заключения

CSS бывает разным, и в некоторых ситуациях лучше использовать внешние стили, а в некоторых – прописывать их прямо в тегах с HTML-элементами. Вы поймете с опытом, какой метод лучше, и сможете варьировать методики в зависимости от используемых технологий. Главное – писать корректный CSS-код.

Как подключить CSS к HTML

Узнайте о трех основных способах подключения CSS к HTML и выберите наиболее подходящий для вас, чтобы создавать захватывающие веб-страницы.

Алексей Кодов
Автор статьи
22 мая 2023 в 9:55

Подключение стилей CSS к HTML-странице — это важный шаг в веб-разработке, который позволяет разработчикам контролировать внешний вид веб-сайта. В этой статье мы рассмотрим три основных способа подключения CSS к HTML.

1. Встроенный стиль (Inline CSS)

Этот метод заключается в добавлении стилей непосредственно в тег HTML-элемента через атрибут style . Встроенные стили имеют самый высокий приоритет, но не являются самыми удобными, так как затрудняют поддержку кода.

Текст с красным цветом и размером шрифта 18px
 

2. Внутренний стиль (Internal CSS)

Внутренний стиль подключается к HTML-странице с помощью тега внутри секции . В этом случае стили применяются ко всем элементам, указанным в селекторах CSS.

    p 
Текст с синим цветом и размером шрифта 20px
   

3. Внешний стиль (External CSS)

Самый распространенный и удобный способ подключения CSS — это использование внешнего файла с расширением .css . Внешний файл стилей подключается к HTML-странице с помощью тега внутри секции .

Пример подключения внешнего файла styles.css :

    
Текст с примененными стилями из файла styles.css