Что такое css: синтаксис, примеры, особенности, методологии

Комментарии

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

Чтобы пометить, что текст является комментарием, применяют следующую конструкцию (пример 5.5).

Пример 5.5. Комментарии в CSS-файле

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

Правила применения стилей

1. Лучше записать все свойства для каждого селектора вместе (компактная форма записи). Эта форма записи более наглядная и удобная в использовании.

Пример:

td {
   background: olive;
   border: 1px solid black;
  }

2. Для селектора допускается добавлять каждое стилевое свойство и его значение по отдельности (расширенная форма записи). Однако такая запись не очень удобна, т.к. приходится повторять несколько раз один и тот же селектор.

Пример:

td {background: olive; }
td {border: 1px solid black; }

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

Пример:

p {color: green; }
p {color: red; }

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

4. У каждого свойства может быть только соответствующее его функции значение. Например, для color, который устанавливает цвет текста, в качестве значений недопустимо использовать числа.
5. При отладке применяйте комментарии, чтобы делать пояснения по поводу использования того или иного стилевого свойства, выделять разделы и т.п. Комментарии повышают разборчивость кода. Комментарии оформляют внутри конструкции /* … */. Комментарии можно добавлять в любое место CSS-документа, а также писать в несколько строк. Вложенные комментарии недопустимы.

Пример:

/* Стиль для сайта book.ru
   Блок для текста */
div {
  width: 200px; /* Ширина блока */
  margin: 10px; /* Поля  вокруг элемента */
  float: left;  /* Обтекание по правому краю */ 
  }
	

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

16) X

Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных пробелом. Можно прописать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Таким образом можно указать, что ссылка является внешней и ведет на изображение.

ссылка

С помощью такого приема мы можем выбирать элементы с нужными нам комбинациями атрибутов:

/* Выбрать элемент, атрибут data-info которого содержит значение external */
a {
color: green;
}
/* Выбрать элемент, атрибут data-info которого содержит значение image */
a {
border: 2px dashed black;
}

• Какими браузерами поддерживается:
• Chrome
• Firefox
• Safari
• Opera

Миксины (примеси)

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

CSS Output

To create a mixin you use the directive and give it a name. We’ve named our mixin . We’re also using the variable  inside the parentheses so we can pass in a transform of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with followed by the name of the mixin.

Часть 4. Рекомендации

Ну и конечно-же мои рекомендации. За всю практику верстки у меня накопились некоторые правила, которыми я с радостью поделюсь.

Старайтесь использовать только внешние подключаемые CSS файлы. Внутреннюю стилизацию применяйте только если это необходимо для корректного функционирования веб-сайта;
Старайтесь стилизовать только классы. Не стилизуйте идентификаторы (задаются через id=»решетку» и пишутся через #решетку). Старайтесь меньше стилизовать теги без классов. Например, если вы стилизуете тег h3, а в дальнейшем SEO специалист решит, что заголовок здесь не уместен, обычный div должен иметь такие-же свойства с классом заголовка и отображаться также. Как вариант можно сделать дубликаты HTML тегов в классы, например, .h1, .h2, .h3, .footer, .header, .aside и стилизовать их соответствующим образом;
Старайтесь стилизовать элементы максимально автономно, сокращайте цепочку каскада до одного блока, чтобы было меньше зависимостей от родительских элементов. Это необходимо для максимально эффективного повторного использования блоков на странице и их модификации в других местах верстки. Но без фанатизма. Не стоит задавать отдельные классы каждому тегу в блоке, если не предполагается его автономное использование. Если вы перенесете блок в другое место страницы, он должен отображаться также и не зависеть от родителя. В этом вам поможет использование какой-либо методологии именования классов

Не важно, будет это БЭМ, методология, либо разработанная на основе вашего личного опыта или простые правила, предложенные мной — это лучше, чем называть классы как попало и строить нелогичные и длинные цепочки классов;
Старайтесь называть классы тегов в зависимости от того, какую функцию выполняет блок, а не от того, какое в нем будет содержание. Например, если у вас есть секция с отзывами в виде карусели, не стоит называть селекторы, используя слова reviews, otzivy и т.д

Лучше назвать carousel-once, если планируется выводит по одному пункту карусели на странице. В дальнейшем, возможно вы будете использовать эту карусель не только для оформления отзывов, а задействуете этот код например, для вывода списка коллег компании. В таком случае наименование класса reviews будет несколько неуместным;
Используйте CSS препроцессоры, в этом нет ничего сложного. Мой выбор пал на препроцессор Sass уже довольно давно и я его рекомендую к использованию. У нас есть неплохой урок, в котором я рассказываю как легко пользоваться препроцессором и как он упрощает жизнь: Sass для самых маленьких — подробное руководство;
Используйте сброс стандартных стилей браузера или нормализацию, которая приводит стандартные стили к общему для всех браузеров знаменателю. Я использую в своих проектах Normalize.css, который входит в состав CSS фреймворка Bootstrap;
Когда почувствуете, что выполняете слишком много однообразной работы в процессе верстки — переходите к использованию какого-либо CSS фреймворка или разработайте свой с наиболее часто используемыми элементами, это ускорит вашу работу. Я использую в работе только сетку Bootstrap без стилистического оформления кнопок, панелей и прочих элементов. Этого вполне достаточно для эффективной работы. Хорошая адаптивность Bootstrap сетки по умолчанию также радует;
Самостоятельно экспериментируйте со свойствами. Открывайте CSS справочник и пробуйте. Только так можно наработать опыт, запомнить какое свойство что делает и довести написание стилей документа до автоматизма.

Другие уроки по теме «Верстка»

• Создание красивого сайта с 3D эффектом Parallax | Материалы урока
• Создание сайта с крутой анимацией скролла (GSAP) | Материалы урока
• Создание красивого сайта с горизонтальным Parallax эффектом | Материалы урока
• Создание сайта портфолио с крутой анимацией | Материалы урока
• Создание красивого сайта с Parallax эффектом при скролле | Материалы урока
• Создание Parallax эффекта на сайте при движении мыши | Материалы урока

Синтаксис html

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

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

Браузеру будет все равно. Он по-любому отобразит страницу правильно.

Но вам самим будет очень неудобно редактировать html код страницы. Поэтому рекомендую не лепить и делать аккуратно.

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

Все вложенные теги делайте отступом в одну табуляцию от родительского элемента.

То есть тег head должен идти отступом в одну табуляцию относительно тега html. Body идет на уровне с head поскольку он тоже вложен в контейнер html.

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

Исключение лишь могут составлять head и body.

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

При большой вложенности этот метод поможет сэкономить место и не потеряться в структуре html.

Как вы знаете, теги можно вкладывать друг в друга.

Например, текст и картинка находятся в разных тегах. Однако при этом они имеют общий родительский элемент.

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

Важно четко соблюдать порядок!

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

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

Правильный пример:

Неправильный пример:

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

Сначала мы открываем его. Затем вкладываем туда несколько тегов и потом закрываем.

Для наибольшей удобности дополнительно можно использовать html комментарии в коде.

Например, прописать за что отвечает данный кусок кода. Это очень полезно при разработке.

Сам комментарий может быть, как однострочным, так и многострочным.

Прописывается он между конструкциями <!— —>.

CSS-переменные

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

Для объявления CSS-переменной используются два дефиса , которые нужно указать перед её именем:

CSS

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

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

Теперь, мы можем использовать эту переменную в любом месте CSS-кода, используя функцию :

CSS

В данном примере мы задали цвет заголовку , равный значению переменной .

Эту переменную мы можем использовать не только в , но и в других частях нашего CSS-кода:

CSS

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

CSS

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

HTML

Вот стили, добавленные на страницу:

CSS

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

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

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

CSS

В данном примере цвет текста будет равен , если переменная не определена.

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

CSS Advanced

CSS Rounded CornersCSS Border ImagesCSS BackgroundsCSS ColorsCSS Color KeywordsCSS Gradients
Linear Gradients
Radial Gradients
Conic Gradients

CSS Shadows
Shadow Effects
Box Shadow

CSS Text EffectsCSS Web FontsCSS 2D TransformsCSS 3D TransformsCSS TransitionsCSS AnimationsCSS TooltipsCSS Style ImagesCSS Image ReflectionCSS object-fitCSS object-positionCSS MaskingCSS ButtonsCSS PaginationCSS Multiple ColumnsCSS User InterfaceCSS Variables
The var() Function
Overriding Variables
Variables and JavaScript
Variables in Media Queries

CSS Box SizingCSS Media QueriesCSS MQ ExamplesCSS Flexbox
CSS Flexbox
CSS Flex Container
CSS Flex Items
CSS Flex Responsive

Исходный пример.

Вот разметка простейшей HTML-страницы:

<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0″>
<title>Основы CSS</title>
<link rel=»stylesheet» href=»style.css»>
</head>
<body>
<h1>Основы CSS</h1>
<p>CSS — формальный язык описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки
(чаще всего HTML или XHTML). Также может применяться к любым XML-документам, например, к SVG или XUL.</p>
<img src=»https://progtips.ru/wp-content/uploads/2020/10/img-1-1.jpg» />
<h2>Способы подключения CSS к документу</h2>
<p>Стили CSS могут быть подключены или внедрены в описываемый ими веб-документ четырьмя способами:</p>
<ul>
<li>Когда описание стилей находится в отдельном файле, оно может быть подключено к документу посредством элемента
<link>, включённого в элемент <head>.</li>
<li>Когда файл стилей размещается отдельно от родительского документа, он может быть подключён к документу
инструкцией @import в элементе<style>.</li>
<li>Когда стили описаны внутри документа, они могут быть включены в элемент <style>, который, включается в
элемент <head>.</li>
<li>Когда стили описаны в теле документа, они могут располагаться в атрибутах отдельного элемента.</li>
</ul>
<footer>(c) <a href=»https://ru.wikipedia.org/wiki/CSS» target=»_blank»>Википедия</a></footer>
</body>
</html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<!DOCTYPE html> <html lang=»ru»> <head> <meta charset=»UTF-8″> <meta name=»viewport»content=»width=device-width, initial-scale=1.0″> <title>Основы CSS</title> <link rel=»stylesheet»href=»style.css»> </head> <body> <h1>Основы CSS</h1> <p>CSS — формальный язык описания внешнего вида документа (веб-страницы), написанного с использованием языка разметки     (чаще всего HTML или XHTML). Также может применяться к любым XML-документам, например, к SVG или XUL.</p> <img src=»https://progtips.ru/wp-content/uploads/2020/10/img-1-1.jpg» /> <h2>Способы подключения CSS к документу</h2> <p>Стили CSS могут быть подключены или внедрены в описываемый ими веб-документ четырьмя способами:</p> <ul> <li>Когда описание стилей находится в отдельном файле, оно может быть подключено к документу посредством элемента <link>, включённого в элемент <head>.</li> <li>Когда файл стилей размещается отдельно от родительского документа, он может быть подключён к документу       инструкцией @import в элементе<style>.</li> <li>Когда стили описаны внутри документа, они могут быть включены в элемент <style>, который, включается в       элемент <head>.</li> <li>Когда стили описаны в теле документа, они могут располагаться в атрибутах отдельного элемента.</li> </ul> <footer>(c) <a href=»https://ru.wikipedia.org/wiki/CSS»target=»_blank»>Википедия</a></footer> </body> </html>

Вот как такая страница выглядит в браузере:

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

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

Как работает CSS

В HTML-документе находятся данные только о структуре веб-страницы. Чтобы правильно вывести её на экран, с учётом дизайна сайта и особенности экрана пользовательского устройства, браузер объединяет HTML-документ с файлом стилей, который есть у любого сайта. Такое объединение происходит поэтапно. Вот основные шаги, как работает CSS:

Пользователь открывает сайт, например, переходя на него со страницы результатов поиска.
Браузер начинает загрузку HTML-документа.
Файл преобразуется в DOM (объектная модель документа в оперативной памяти).
Браузер анализирует все компоненты, на которые в HTML-документе есть URL, и которые связаны с этим документом. К таким ресурсам и компонентам как раз и относятся стили (а также, например, любые медиафайлы: картинки, GIF, видеофайлы)

Внимание: если в HTML-документе ссылки на стили нет, то браузер не сможет получить к ним доступ. JS-код обрабатывается далее, но не на этом этапе.
Браузер начинает проверять файл стилей

В частности, он пытается отсортировать правила, содержащиеся в нём (по их типу селектора). Каждое правило определяется в свою категорию (например, ID, элемент, класс). Далее, на этом промежуточном шаге, также происходит связывание обнаруженных селекторов с правилами. Правила применяются к определенным DOM-узлам, а затем к каждому из них привязывается определённый стиль. Всё, теперь браузер знает, как именно нужно отрисовывать страницу.
Происходит отрисовка страницы уже с настроенным дизайном её элементов.

Если вышеуказанная последовательность работы CSS показалась для вас слишком сложный, посмотрите на эту схему:

Последовательность работы со стилями элементов в браузере

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

Базовая стилизация

Базовая стилизация*

• Нормализация
• Нестандартные шрифты
• Преобладающие текстовые стили страницы
• Текстовые параметры, фоны, состояния элементов при взаимодействии

Нормализация стилей

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

Статья О Normalize.css

Сайт проекта:http://necolas.github.io/normalize.css

Цели normalize.css:

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

Выводы

• Одинаковое отображение сайта в разных браузерах не является целью нормализатора
• Контроль и переопределение стилей по умолчанию — задача верстальщика, а не нормализатора
• Использовать ли нормализатор или его фрагменты? Да!
• Использовать ли сброс? Нет! (в 99% случаев)

Подключение нестандартных шрифтов

Алгоритм работы со шрифтом

1. Проверяем, стандартный ли шрифт
2. Если нестандартный, ищем на внешних сервисах
3. Если нашли, подключаем из сервиса*
4. Если не нашли, конвертируем в веб-формат
5. Подключаем локально

В заключение

• Основной формат — woff2
• Чем меньше нестандартных шрифтов и их вариаций, тем лучше
• Иногда лучше вставить надпись картинкой, чем вставлять шрифт
• Каждая градация жирности — отдельный подключаемый шрифт
• Не полагайтесь на возможности браузера (жирность, наклонное начертание)

Абсолютные или относительные?

px или rem?

Три типа задач:

• Вёрстка без дизайна
• Вёрстка по дизайну
• Вёрстка по дизайну со специальными возможностями для слабовидящих

Вёрстка по дизайну

• Есть дизайн — есть требование соответствия макету
• Использовать нужно px
• Использовать rem не нужно:
  • усложняется разработка
  • поддержка становится дороже
  • фиксация размера шрифта обесценивает rem

Методологии CSS

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

В разное время существовали несколько популярных методологий. Часть из них — продолжает жить, другая часть — была забыта по разным причинам. Упоминать все существующие когда-либо методологии — не имеет смысла. Ведь в конце 2022 — начале 2023 разработчики активно используют только пять из них:

BEM. Вся суть этой методологии сразу становится понятна, если знать, как расшифровывается это название — модификатор блочных элементов. Посмотрите на этот код:

При помощи BEM мы формируем такие компоненты, которые можно задействовать повторно. Вернёмся к примеру выше

Обратите внимание — класс loginform включает в себя три компонента:

• loginform__username (используется для ввода имени пользователя).
• loginform__password (используется для ввода пароля пользователя).
• loginform__btn (используется для того, чтобы пользователь мог повторно отправить форму).

Systematic, она же систематическая. В этой методологии можно обнаружить большую часть принципов, заложенных в популярных SUIT CSS, OOCSS, SMACSS и конечно BEM. Systematic CSS — довольно интуитивная методология, которая является хорошей альтернативой искусственно усложненным системам. Вот как может выглядеть код CSS, согласно этой методологии, для вывода панели навигации и поисковой формы.

Пример кода по методологии Systematic 

Объектно-ориентированная, она же OOCSS. Хорошо продуманная методология, которая отличается гибкостью и возможностью заменять некоторые компоненты. Нужно просто привыкнуть к ней. Набор кода станет более логичным и прозрачным. Модульность — ещё одна черта OOCSS. Пример:

Как видим, мы установили стиль кнопки при помощи двух классов (button используем для показа структуры, а gret-btn — для настройки дизайна элемента).

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

SMA CSS. Неплохая методология для CSS. Чтобы не объяснять словами, сразу проведём пример кода, который хорошо иллюстрирует особенности этой методологии:

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

Мы определили цвет, задав значение в шестнадцатеричной системе. Примечательно, как реализован opacity-канал — он сделан через применение одноименного параметра к hex-цвету.

Основы вёрстки сайтов Записывайтесь и за 5 недель качественно освойте верстку на HTML и CSS, и получите первый проект в портфолио.

• Как устроен интернет

• HTML и CSS

• Кроссбраузерная вёрстка

• Работа с макетами

• Workflow

Записаться

1. Что такое HTML

HTML, он же HyperText Markup Languge — язык разметки гипертекста, используется для описания структуры содержимого веб-страниц, а именно, расположения элементов друг относительно друга, их внешнего представлния, их функций. Элементами веб-страницы могут быть заголовок, боковое меню, окошко поиска, странички с контентом, встроенное видео и т.д. HTML Определяет, как они будут отображаться (шрифт, размер, используемые стили), как они будут расположены на странице, как они будут взаимодействовать (ссылки, выпадающие списки, зависимые поля). Для красивого отображения элементов в HTML и страницы в целом обычно используеттся CSS (Cascading Style Sheets) — документ описания стилей. Также в веб-страницы можно встраивать динамические элементы, например, браузерные игры, перемещаемые пользовалелем окошки, кнопки со сложным поведением и т.д. Все это становится возможным благодаря использованию скриптов, написанных на JavaScript, которые также явно указываются в HTML-документе.

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

Что такое CSS?¶

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

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

Таблица стилей — это совокупность стилей, применимых к гипертекстовому документу.

Каскадирование — это порядок применения различных стилей к веб-странице. Браузер, поддерживающий таблицы стилей, будет последовательно применять их в соответствии с приоритетом: сначала связанные, затем внедренные и, наконец, встроенные стили. Другой аспект каскадирования — наследование (inheritance), — означает, что если не указано иное, то конкретный стиль будет применен ко всем дочерним элементами гипертекстового документа. Например, если вы примените определенный цвет текста в теге <div>, то все теги внутри этого блока будут отображаться этим же цветом.

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