Содержание

что это такое: зачем используется каскадные таблицы стилей, структура языка, как подключить

Если вы искали в интернете сайт, наконец-то нашли его, а открылась страничка, сверкающая белизной и синюшными, будто престарелая курица, ссылками — скорее, всего вы открыли страницу, для которой не подключены CSS. Разберемся с вопросом!

CSS — Cascading Style Sheets, или каскадные таблицы стилей — это язык разметки, который используется для оформления сайтов различных типов: посадочных страниц, интернет-магазинов, корпоративных сайтов и т. д.

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

Слева страница с CSS, а справа HTML only. Разница налицо!

Присоединяйтесь к нашему Telegram-каналу!

  • Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
  • Для этого вам необходимо подписаться на наш канал.

Для чего используется CSS

CSS сепарирует визуал веб-страниц с их содержимым. Если мы имеем дело только с HTML, там определяются как элементы, так и способы их отображения через свойства тегов (шрифты и их кегли, цвета, размещения блоков и т. п.). Когда сайт делается на CSS, от языка гипертекстовой разметки требуется только описание порядка объектов. Все же их свойства описываются в каскадных таблицах стилей. В HTML единожды задается класс без постоянного перечисления всех имеющихся стилей.

Все это нужно для того, чтобы:

  1. Упростить процедуру разработки. Достаточно один раз настроить стили, чтобы потом применять их автоматически для множества однотипных веб-страниц.
  2. Обеспечить удобство редактирования страниц. В файле с CSS достаточно поправить нужное место, что оформление автоматически применяется на все остальные.
  3. Упростить код, потому что в CSS уменьшается дублирование элементов. Это работает в плюс для роботов (в плане обхода) и людей (проще программировать).
  4. Увеличить скорость и уменьшить время загрузки, потому что CSS загружается в кэш браузера, когда страница первый раз открывается, а далее прогружаются только структура и данные страниц.
  5. Создавать богатое разнообразие вариантов визуализации контента.
  6. Создать возможность настраивать разные стили в рамках одной страницы. 

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

Читайте также:

Как оформить главную страницу: элементы, правила и нюансы для разных типов сайтов

Структура CSS

Типичная запись в каскадной таблице стилей состоит из трех частей, описывающих внешний вид веб-элемента:

  1. Селектор.
  2. Свойство.
  3. Значение.
десь селектором является тег p (параграф), свойство — цвет, а значение свойства — «красный»

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

Простота каскадных таблиц стилей — следствие понятного синтаксиса. Потренируйтесь в записи CSS:

селектор {

  свойство: значение;

}

  1. Селектор — ссылка на HTML-элемент, который требуется оформить.
  2. Свойство — изменяемая характеристика элемента (начертание, шрифт, цвета).
  3. Значение — выраженное словами или цифрами обозначение свойства. 

Изменение шрифта на фиолетовый в CSS будет выглядеть так:

section {

  color: purple;

}

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

Читайте также:

Мобильные версии сайтов 2021: интересные тенденции и неожиданные выводы

Селекторы

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

  • Если одному тегу нужно задавать разные стили или же задать единый стиль для разных элементов, применяются классы и следующая запись: Тег.Класс {свойство: значение}. При этом имя класса записывается на латыни, допускаются нижнее подчеркивание или дефисы.
  • Если не указывается тег, т.е. запись начинается с «.Класс», правило допустимо использовать для всех тегов.
  • Если для одного тега перечисляются несколько классов, то к нему будут применены всех объявленные стили.
     

Блок объявлений

Он состоит из тандема «свойство: значение» (обратите внимание — они прописываются только через двоеточие), записываемого в фигурных скобках {}. Все записи заканчиваются точкой с запятой.

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

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

  1. В теле тега при помощи атрибута style. Здесь селектор можно не прописывать.
  2. Инициировать тег <style> с атрибутом type=”text/css”.
  3. Сделать подключение внешней таблицы стилей через ссылку типа <link rel=»stylesheet» href=»путь к файлу style.css» type=»text/css»/>.

Самый используемый вариант — третий, потому что он позволяет максимально точно работать с содержанием  формой элементов, создавая нужные визуалы и функциональные наборы.

Самое лучшее, что можно сделать после прочтения этой статьи — посмотреть собственный и чужой сайты и найти в них элементы, оформленные через CSS: изображения, таблицы, шрифты текста и заголовков и т. д.. Вы еще раз убедитесь, что без CSS интернет существовал бы на уровне, не 2021, а 2001 года. Олды поймут и вспомнят.

Создание сайтов

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


CSS Flexbox — полный курс и практика его использования

Полный разбор всех особенностей вёрстки на CSS Flexbox и её применение на реальных проектах

рейтинг 5.0 на основании отзывов на платфоре Udemy

Что в курсе?

Неограниченный по времени доступ к материалам

Практические упражнения и примеры на реальных проектах

Небольшие структурированные лекции для простого освоения

Поддержка в чате студетов

CSS Flexbox — направлен на обеспечение более эффективного способа размещения, выравнивания и распределения пространства между элементами в контейнере, даже если их размер неизвестен и / или динамичен (Flex значит «гибкий»). В этом курсе мы разберём все особенность вёрстки на CSS Flexbox и используем её на практике. Курс разбит на несколько разделов, каждый из которых фокусируется на одном из аспектов работы с CSS FlexBox. В конце каждого блока вас ждёт тест. Так же курс содержит несколько практических упражнений для закрепления материала и применения на реальных макетах.

Вы научитесь

  • Уверенно использовать CSS Flexbox для вёрстки
  • Позиционировать элементы внутри контейнера
  • Создавать сложный сетки
  • Применять CSS Flexbox на практике
  • Работать с адаптивным дизайном на Flexbox

Требования

Минимальные требования для прохожлдения курса: Базовые знания HTML и CSS;

Бесплатно

Гарантия возврата денег — 30 дней

2

часа

видео лекций

3

тестовых

заданий

2

упражнения

Сертификат об окончании

О школе

Более 10 000 студентов

Со всего мира прошли курсы на площадках PurpleSchool, Udemy и Stepik

Гарантия возврата денег

Если курс вам не подойдёт, мы вернём вам деньги в течение 30 дней

Практический опыт

Получите бесценный опыт реальных проектов в каждом курсе

План курса

Что такое Flexbox?

Как устроен курс?

Настройка окружения

Обзор курсов

Сертификат о прохождении курса по окончанию!

Об авторе курса

Антон Ларичев

Технический директор и профессиональный разработчик

Последние отзывы

Андрей Соловьев

С флексами я был уже до этого, но на работе понадобилось их применять в проекте, поэтому решил пройти ваш курс. Пока меня всё устраивает, узнал про новое значение поля display: inline -flex. Оно как раз мне понадобилось)

Anastasiia Kostina

Курс поэтапно и доходчиво объясняет основную информацию и привлекает внимание к неочевидным деталям, которые пригодятся на практике. Благодаря нему появилось более чёткое видение как строить flex-ы.

Vladimir Muratov

Решил пройти этот курс в надежде получить подробное разъяснение по работе с flexbox. Ожидания оправдались. Автор довольно подробно и доходчиво объясняет. Курс нравится. Заслуживает высокой оценки.

Александр Жуков

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

Денис Сорокин

Полезный курс и хорошее объяснение. Помогает знания разложить по «полочкам». Огромное спасибо Антону!

Сергей Еромченко

Отличный курс, Антон весьма понятно и доходчиво объясняет. Прохожу его, чтобы освежить в памяти флексы. Прям 10/10.

Частые вопросы

Цель этих курсов – покрыть небольшие темы, которые не раскрываются в других курсах и дать новые знания. Информации в них не так много, как в моих других курсах и поэтому я готов отдать его совершенно бесплатно.

Остались вопросы? Их можно задать в чате Telegram

Другие курсы

Цена:1 290 ₽

Подробнее

18

часов

видео лекций

12

тестовых

заданий

17

упражнений

Цена:9 000 ₽ / мес

Подробнее

21

час

видео лекций

9

тестовых

заданий

15

упражнений

Цена:1 290 ₽

Подробнее

15

часов

видео лекций

12

тестовых

заданий

7

упражнений

Цена:1 290 ₽

Подробнее

18

часов

видео лекций

9

тестовых

заданий

8

упражнений

Цена:1 290 ₽

Подробнее

20

часов

видео лекций

9

тестовых

заданий

6

упражнений

Цена:1 290 ₽

Подробнее

15

часов

видео лекций

5

тестовых

заданий

4

упражнения

Цена:1 290 ₽

Подробнее

14

часов

видео лекций

9

тестовых

заданий

5

упражнений

Бесплатно

история, преимущества и недостатки в 2022 году

Что такое CSS?

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

Основной целью, которая послужила для разработки языка CSS, являлось разделение разметки содержимого (которое написанного на HTML или другом языке программирования) и представления документа (написанного на CSS). Результат этого разделения помогает увеличить доступность документа, предоставить большую гибкость, а также уменьшить сложность и повторяемость в структурном содержимом, создает удобное описание дизайна и стилистики web-страницы и ее содержимого. Еще CSS дает возможность предоставить один документ в различных стилях или методах вывода (например, таких как экранное представление, чтение голосом, печать).

Типичный код СSS может выглядеть так:

#columns-3 {

   text-align: justify;

   -moz-column-count: 3;

   -moz-column-gap: 12px;

   -moz-column-rule: 1px solid #c4c8cc;

   -webkit-column-count: 3;

   -webkit-column-gap: 12px;

   -webkit-column-rule: 1px solid #c4c8cc;}

История создания и развития CSS

В 1990-х возникла необходимость стандартизировать web-инструменты, создать общие правила, с помощью которых программисты и web-дизайнеры могли бы создавать сайты. Как результат этой необходимости, появились языки HTML 4.01 и XHTML, а также стандарт CSS.

Первое упоминание о CSS было в 1994 году, когда Хоком Виум Ли предложил использовать CSS (Каскадные таблицы стилей) для стилистического оформления web-страниц. У него не сразу получилось продвинуть свою технологию, — только через пару лет ему удалось привлечь внимание к CSS. Итак, 17 декабря 1996 года опубликована первая спецификация (CSS1) и она была рекомендована к использованию Консорциумом Всемирной паутины (W3C).

После небольшого успеха  положение дел у технологии CSS пошли куда лучше и 12 мая 1998 года (через 2 года)  была принята рекомендация W3C для CSS2. Следующим этапом была CSS 2.1 — версия W3C от 8 сентября 2009 года, она была построена на базе CSS2, и была работой над исправлением существующих ошибок.

Сегодня актуальна версия CSS3, которая максимально расширена по сравнению с предыдущими версиями. CSS3 включают эффекты теней, а также скругленные углы у блоков. В CSS3 появилась возможность устанавливать изображения в качестве фона и использовать их как границы. Намного проще и удобнее стала работа с анимацией – теперь для ее создания достаточно возможностей самой CSS3, стало не нужно работать с языком Java Script.

Плюсы и минусы использования CSS

До того, как появился CSS, оформление web-страниц могло осуществляться  непосредственно внутри содержимого документа, появление же технологии CSS дало возможность разделению содержания и представления документа. Благодаря этой возможности стало реальным простое применение единого стиля оформления для большинства подобных документов, и стало доступно быстрое изменение их оформления. Использование CSS в разработке сайтов имеет свои плюсы и минусы.

Преимущества CSS:

  • Простота самого языка CSS вместе с принципом отделения оформления от содержания дает возможность сократить время на разработку и поддержку сайта.
  • Имеется несколько  вариантов дизайнов страницы для просмотра на разных устройствах. Например, дизайн на экране компьютера рассчитан на одну ширину, и будет полностью выводиться на экран, а на мобильных устройствах он будет подстраиваться к размерам экрана и некоторые элементы будут исключены от показа, также и при печати, будет печататься нужный текст, без лишнего (например, без шапки меню).
  • Уменьшается время загрузки страниц web-сайта за счет переноса правил представления данных в отдельный CSS-файл. Благодаря этому браузер  загружает только структуру документа, а также данные, хранимые на странице, а представление этих данных загружается браузером только один раз и может бать закеширован, — благодаря этому уменьшается трафик, время загрузки, а также  нагрузка на сервер.
  • Простота изменения дизайна. Один CSS управляет отображением множества HTML-страниц.  Когда возникает необходимость изменить дизайн сайта, то незачем  править каждую страницу. Для последующего изменения дизайна всего лишь нужно изменить CSS-файл, и как результат, изменение дизайна делается быстрее.
  • CSS предоставляет дополнительные возможности форматирования, о которых при использовании только самих атрибутов даже и не приходилось  мечтать.
  • Повышение совместимости с разными платформами за счет использования web-стандартов.

Недостатки CSS:

  • Различное отображение вёрстки в разных браузерах. Если браузеры устаревшие, то возможно, что одни и те же данные CSS по-разному ими интерпретируются.
  • Необходимость исправлять не только один CSS-файл, но и теги HTML. Часто встречается на практике необходимость исправлять не только один CSS-файл, но и теги HTML, которые связаны с селекторами CSS. Иногда это значительно увеличивает время редактирования, а также и тестирования.

Итак, CSS – это сильнейший инструмент и один из основных составляющих практически любого web-сайта. Без CSS  просто невозможно представить современную деятельность web-разработчиков. Сегодня  CSS – это общепринятый стандарт разработки, который принимается всеми без исключения компаниями-разработчиками, что явно показывает его значимость и необходимость.

CSS для начинающих: что такое CSS и как его использовать в веб-разработке? | Джем Эйги | Стартап

Photo by Fabian Grohs on Unsplash

HTML, CSS и JavaScript … 3 основных языка Web Front-end Development . В этой статье я расскажу об основах CSS. Так что, если вы не имеете представления о CSS или не знаете, как им пользоваться, эта статья для вас 🙂

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

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

CSS не является языком программирования, как C++ или JavaScript. Однако CSS не так прост, как кажется. Если вы попытаетесь использовать его без понимания, у вас возникнут трудности в веб-разработке. Поэтому изучение CSS так же важно, как изучение языка программирования.

Давайте продолжим пример, чтобы показать влияние CSS на веб-сайт. Ниже вы видите, как веб-страница Facebook выглядит как обычно (с CSS):

https://www.facebook.com/

А здесь вы видите, как Facebook выглядит без CSS: Facebook без CSS

Как мы Как видите, CSS значительно улучшает визуальное представление веб-сайта.

Давайте напишем наш первый код CSS. Например, я хотел бы изменить цвет из

9тег 0004. 

 
Я заголовок

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

Итак, ниже я определяю селектор для HTML-элемента на основе его имени тега

: 

 h2 { } // Пример селектора

После этого мы можем объявить правила CSS в скобках селектора, каждый из которых заканчивается точкой с запятой:

 h2 { // Правила CSS в скобках 
  color:  red; 
 }

Итак, основываясь на определенном селекторе ( h2 ), CSS теперь может понять, где применять новые правила:

Существует много разных способов определить селектор CSS, ниже вы можете увидеть несколько примеров типов селекторов. :

  • Селектор класса: находит элементы HTML по их атрибуту класса
  • Селектор идентификаторов: находит элементы по их конкретному идентификатору
  • Селектор элементов: находит элементы по имени их тега.

    Теперь вы узнали, зачем и как определять селектор, и написать код CSS. Но этого недостаточно. Нам также нужно добавить CSS внутри HTML, иначе он не распознает изменения.

    Мы можем добавить CSS в файл HTML тремя различными способами:

    1. Внешний файл CSS:

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

    Мы можем создать отдельный файл CSS с расширением .css и включить его в HTML. Например, мы можем создать файл CSS, подобный этому: index.css

    Внутри index.css мы можем написать наш код CSS:

      p  { 
     color: red; 
     }

    Затем мы можем импортировать index.css в HTML с тегом , как показано ниже:

      
        
      
     
     Я текст

    Итак, теперь файл HTML содержит код CSS, и изменения будут применяться к элементам.

    2. Внутренний CSS с тегом

    Я текст

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

    Третий способ — написать правила CSS непосредственно внутри элемента HTML, с атрибутом стиля . В этом методе мы определяем правила CSS непосредственно внутри тега, и нам не нужно создавать для него класс.

     
     style="цвет: синий; размер шрифта: 22px;"  > Я текст

    Этот подход не является примером чистого кода и его не рекомендуется использовать.

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

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

    Если вы хотите узнать больше о веб-разработке, не стесняйтесь следуйте за мной на Youtube !

    Большое спасибо и до следующего раза!

    Эта история опубликована в The Startup, крупнейшем издании о предпринимательстве на Medium, за которым следят 446 678 человек.

    Как работает CSS? | Berkeley Coding Bootcamp

    Как работает CSS? | Учебный курс по программированию в Беркли

    CSS или «Каскадные таблицы стилей» используются для оформления и компоновки веб-страниц. Его можно использовать для настройки размера содержимого, интервалов, цвета и шрифта или добавления декоративных функций, таких как анимация или разделение содержимого на столбцы.

    Более глубокое понимание CSS

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

    Влияние CSS на HTML

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

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

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

    Правила CSS хранятся в таблице стилей, которая определяет внешний вид веб-страницы. При некотором опыте и обучении типичный синтаксис CSS становится очевидным.

    Ниже мы рассмотрим базовый пример кода CSS с двумя правилами:

    Часть h2 в начале первого правила указывает, что стилистические элементы, описанные в коде CSS, применяются ко всему, что помечено

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

    Второе правило в приведенном выше примере применяется к элементам HTML, помеченным

    , поскольку оно начинается с p. Это правило относительно простое, так как оно просто устанавливает оранжевый цвет текста.

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

  • и
      ), чтобы включить в свой CSS еще больше наборов правил.

      Как на самом деле работает CSS

      После того как вы загрузили и проанализировали содержимое HTML и стили CSS, процесс их объединения происходит в два отдельных этапа. Сначала браузер преобразует их в объектную модель документа (DOM). Как только DOM объединит содержимое и стиль документа и станет представлением документа в памяти компьютера, браузер отобразит содержимое.

      Понимание DOM

      DOM играет решающую роль в функциональности CSS. DOM имеют древовидную структуру, состоящую из узлов. Каждый фрагмент текста, атрибут и элемент языка разметки (например, HTML) станет отдельным узлом DOM.

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

      Рассмотрим следующий HTML-код: 

      В DOM узел, соответствующий HTML-элементу

      , будет родительским. Дочерними узлами будут текстовые узлы, а также те, которые соотносятся с элементами . Каждый узел также служит родителем, каждый из которых имеет дочерние узлы в виде текстовых узлов. Браузер интерпретирует приведенный выше фрагмент HTML как дерево DOM ниже.

      P

      ├─ «Скажем:»

      ├─ SPAN

      | └─ «Hello»

      ├─ SPAN

      └─ «World»

      Без добавления какого-либо кода CSS браузер просто интерпретирует фрагмент HTML как обычный текст через DOM, отображая его как «Let сказать: Hello World» без каких-либо изменений в цвете, шрифте или стиле.

      Применение CSS к DOM

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

      Примените следующий CSS:

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

      Благодаря CSS вместо простого обычного текста «Скажем: Hello World» к нему будут прикреплены стилистические элементы: каждое «Hello» и «World» появится в рамке с красным цветом внутри и граница представляет собой сплошную розовую линию толщиной 1 пиксель.

      Методы применения CSS к HTML

      Существует несколько методов применения кода CSS для стилистических изменений в HTML.

      Через внешние таблицы стилей

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

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

      Через внутренние таблицы стилей

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