diff --git a/files/uk/web/css/cascade/index.md b/files/uk/web/css/cascade/index.md
new file mode 100644
index 000000000..5008d60d4
--- /dev/null
+++ b/files/uk/web/css/cascade/index.md
@@ -0,0 +1,428 @@
+---
+title: Знайомство з Каскадом CSS
+slug: Web/CSS/Cascade
+page-type: guide
+spec-urls: https://drafts.csswg.org/css-cascade/
+---
+
+{{CSSRef}}
+
+**Каскад** – це алгоритм, який визначає те, як користувацькі агенти поєднують значення властивостей, що походять з різних джерел. Він визначає походження та шар, які мають пріоритет, коли значення однієї властивості одного елемента задаються декількома [походженнями](#typy-pokhodzhen), [каскадними шарами](/uk/docs/Web/CSS/@layer) чи блоками {{CSSxRef("@scope")}}.
+
+Каскад лежить в основі CSS, як це підкреслює назва – **Каскадні** списки стилів. Коли [селектор](/uk/docs/Web/CSS/CSS_selectors) дає збіг з елементом, то застосовується значення властивості з походження, що має найвищий пріоритет, навіть якщо селектор з походження або шару з нижчим пріоритетом має більшу [специфічність](/uk/docs/Web/CSS/Specificity).
+
+Ця стаття пояснює те, чим є каскад, і порядок, в якому [оголошення](/uk/docs/Web/API/CSSStyleDeclaration) {{Glossary("CSS")}} каскадуються, охоплюючи каскадні шари та типи походжень. Розуміння пріоритету походжень є ключовим для розуміння каскаду.
+
+## Типи походжень
+
+Справа каскадного алгоритму CSS – вибирати оголошення CSS, аби визначати коректні значення властивостей CSS. Оголошення CSS надходять з походжень різних типів: **[Списків стилів користувацького агента](#spysky-styliv-korystuvatskoho-ahenta)**, **[Авторських списків стилів](#avtorski-spysky-styliv)** і **[Користувацьких списків стилів](#korystuvatski-spysky-styliv)**.
+
+Попри те, що списки стилів надходять з різних походжень, і в кожному з них можуть належати до різних [шарів](/uk/docs/Web/CSS/@layer), вони перекриваються щодо свого усталеного контексту; щоб це працювало, каскадний алгоритм визначає те, як вони взаємодіють. Перед тим, як розглядати ці взаємодії, у кількох наступних розділах будуть визначені деякі ключові терміни.
+
+### Списки стилів користувацького агента
+
+Користувацькі агенти, тобто браузери, мають базові списки стилів, які дають усталені стилі для будь-якого документа. Ці списки стилів називаються **списками стилів користувацького агента**. Більшість браузерів використовують для цього справжні списки стилів, тоді як інші імітують їх у своєму коді. Результат однаковий.
+
+Частина браузерів дозволяє користувачам змінювати список стилів користувацького агента, але це рідкісне явище, яке не можна контролювати.
+
+Попри те, що частина обмежень, накладених на списки стилів користувацького агента, задана специфікацією HTML, браузери мають багато свободи: це означає, що між браузерами існують деякі відмінності. Щоб спростити процес розробки, веброзробники можуть використовувати список стилів для скидання CSS, наприклад, [normalize.css](https://github.com/necolas/normalize.css), який приводить значення поширених властивостей до відомого стану для всіх браузерів, перш ніж починати вносити зміни, щоб задовольнити свої конкретні потреби.
+
+Якщо після властивості в списку стилів користувацького агента немає [`!important`](/uk/docs/Web/CSS/Specificity#vyniatok-important), що робило б таке оголошення "важливим", то стилі, оголошені авторськими стилями, в тому числі список стилів для скидання, мають пріоритет над стилями користувацького агента, незалежно від специфічності пов'язаного з ними селектора.
+
+### Авторські списки стилів
+
+**Авторські списки стилів** – це найпоширеніший тип списків стилів; це стилі, написані веброзробниками. Вони можуть скидати стилі користувацького агента, як згадувалося вище, і оголошувати стилі для дизайну даної вебсторінки чи застосунку. Автор, тобто веброзробник, визначає стилі для документа, використовуючи один або декілька під'єднаних або імпортованих списків стилів, блоків {{HTMLElement('style')}} і вбудованих стилів, оголошених за допомогою атрибута [`style`](/uk/docs/Web/HTML/Global_attributes/style). Ці авторські стилі визначають вигляд і враження від вебсайту – його тему.
+
+### Користувацькі списки стилів
+
+У більшості браузерів користувач (тобто читач) вебсайту може вирішити перевизначити стилі за допомогою **користувацького списку стилів**, розробленого для підігнання досвіду використання під побажання користувача. Залежно від користувацького агента, [користувацькі стилі можуть бути налаштовані](https://www.thoughtco.com/user-style-sheet-3469931) безпосередньо або додані за допомогою розширень браузера.
+
+### Каскадні шари
+
+Каскадний порядок заснований на типах походжень. Каскад у межах кожного типу походжень заснований на порядку оголошення [каскадних шарів](/uk/docs/Web/CSS/@layer) в межах відповідного типу. Для всіх походжень – користувацького агента, авторських або користувацьких – стилі можуть бути оголошені всередині або зовні названих або безіменних шарів. Коли вони оголошуються за допомогою [`layer`, `layer()`](/uk/docs/Web/CSS/@import) або [`@layer`](/uk/docs/Web/CSS/@layer), стилі поміщаються в зазначений названий шар, або в безіменний шар, якщо назва не вказана. Стилі, оголошені поза шаром, розглядаються як частина безіменного останнього оголошеного шару.
+
+Погляньмо на типи каскадних походжень, перш ніж зануритися в каскадні шари всередині кожного типу походжень.
+
+## Порядок каскадування
+
+Алгоритм каскадування визначає те, як шукати значення, що буде застосовано для кожної властивості для кожного елемента в документі. Для алгоритму каскадування застосовуються наступні кроки:
+
+1. **Відповідність**: Спочатку фільтруються всі правила з різних джерел, щоб зібрати лише ті правила, що застосовуються до даного елемента. Це означає правила, чий селектор дає збіг з даним елементом і які є частиною відповідної директиви `media`.
+
+2. **Походження та вага**: Потім ці правила сортуються згідно зі своєю вагою, тобто тим, чи стоїть після них `!important`, а також їх походженням. Коли поки що ігнорувати шари, то каскадний порядок – наступний:
+
+   | Порядок пріоритету (за зростанням) | Походження                     | Вага         |
+   | ---------------------------------- | ------------------------------ | ------------ |
+   | 1                                  | користувацький агент (браузер) | нормальна    |
+   | 2                                  | користувач                     | нормальна    |
+   | 3                                  | автор (розробник)              | нормальна    |
+   | 4                                  | анімації @keyframe CSS         |              |
+   | 5                                  | автор (розробник)              | `!important` |
+   | 6                                  | користувач                     | `!important` |
+   | 7                                  | користувацький агент (браузер) | `!important` |
+   | 8                                  | переходи CSS                   |              |
+
+3. **Специфічність:** У випадку рівності за походженням, для вибору серед варіантів певного значення враховується [специфічність](/uk/docs/Web/CSS/Specificity) правила. Порівнюються специфічності селекторів, і перемагає оголошення з найвищою специфічністю.
+4. **Контекстна наближеність:** Коли два селектори в одному шарі походження з пріоритетом мають однакову специфічність, то перемагає значення властивості, що має найменшу кількість стрибків по ієрархії DOM до контекстного кореня. Дивіться докладніше та приклад у [Як розв'язуються конфлікти `@scope`](/uk/docs/Web/CSS/@scope#yak-rozviazuiutsia-konflikty-scope).
+5. **Порядок появи:** У походженні з пріоритетом, якщо є конкурентні значення однієї властивості, що знаходяться в блоках стилів, що відповідають селекторам з однаковою специфічністю та контекстною наближеністю, то застосовується останнє оголошення в порядку стилів.
+
+Каскад має порядок зростання, тобто:
+
+- Анімації мають пріоритет над звичайними значеннями, незалежно від того, чи оголошені вони в стилях користувача, розробника чи користувацького агента.
+- Важливі значення мають пріоритет над анімаціями, незалежно від того, чи оголошені вони в стилях користувача, розробника чи користувацького агента.
+- Переходи мають пріоритет над важливими значеннями.
+
+> [!NOTE]
+>
+> **Переходи та анімації**
+>
+> Значення властивостей, задані {{cssxref('@keyframes')}} анімацій, мають більшу вагу, ніж усі звичайні стилі (ті стилі, на яких не задано [`!important`](/uk/docs/Web/CSS/Specificity#vyniatok-important)).
+>
+> Значення властивостей, задані в {{cssxref('transition', 'переході')}}, мають пріоритет над усіма іншими значеннями, навіть над тими, на яких задано `!important`.
+
+Каскадний алгоритм застосовується _до_ алгоритму специфічності, а отже, якщо `:root p { color: red;}` оголошено в користувацькому списку стилів (ряд 2) і менш специфічний стиль `p {color: blue;}` оголошено в авторському списку стилів (ряд 3), то абзаци будуть синіми.
+
+## Базовий приклад
+
+Перш ніж заглиблюватися в те, як каскадні шари впливають на каскад, розгляньмо приклад, що включає декілька джерел CSS з різними походженнями, і пройдімося по кроках каскадного алгоритму:
+
+Тут є список стилів користувацького агента, два авторські списки стилів і один користувацький, а в HTML вбудованих стилів немає:
+
+**CSS користувацького агента:**
+
+```css
+li {
+  margin-left: 10px;
+}
+```
+
+**Авторський CSS 1:**
+
+```css
+li {
+  margin-left: 0;
+} /* Це скидання */
+```
+
+**Авторський CSS 2:**
+
+```css
+@media screen {
+  li {
+    margin-left: 3px;
+  }
+}
+
+@media print {
+  li {
+    margin-left: 1px;
+  }
+}
+
+@layer namedLayer {
+  li {
+    margin-left: 5px;
+  }
+}
+```
+
+**Користувацький CSS:**
+
+```css
+.specific {
+  margin-left: 1em;
+}
+```
+
+**HTML:**
+
+```html
+<ul>
+  <li class="specific">1<sup>-й</sup></li>
+  <li>2<sup>-й</sup></li>
+</ul>
+```
+
+У цьому випадку повинні застосовуватися оголошення всередині правил `li` та `.specific`.
+
+Знову таки, каскадний алгоритм має п'ять кроків, в такому порядку:
+
+1. Відповідність
+2. Походження та вага
+3. Специфічність
+4. Контекстна наближеність
+5. Порядок появи
+
+Значення `1px` – для друку. Через відсутність _відповідності_ на основі його типу носія, це значення вилучається з розгляду.
+
+Жодне оголошення не позначено як `!important`, тому порядок пріоритету – авторські списки стилів понад користувацькими списками стилів понад списками стилів користувацького агента. Згідно з _походженням і вагою_, `1em` з користувацького списку стилів і `10px` зі списку стилів користувацького агента вилучаються з розгляду.
+
+Зверніть увагу на те, що навіть якщо користувацький стиль на `.specific` з `1em` має більшу специфічність, то це звичайне оголошення в користувацькому списку стилів. Таким чином, воно має менший пріоритет, ніж будь-які авторські стилі, і вилучається з розгляду на кроці алгоритму _походження та вага_, ще до того, як специфічність узагалі вступає в дію.
+
+У авторських списків стилів є три оголошення:
+
+```css
+li {
+  margin-left: 0;
+} /* з авторського css 1 */
+```
+
+```css
+@media screen {
+  li {
+    margin-left: 3px;
+  }
+}
+```
+
+```css
+@layer namedLayer {
+  li {
+    margin-left: 5px;
+  }
+}
+```
+
+Останнє з них, `5px`, є частиною каскадного шару. Звичайні оголошення в шарах мають менший пріоритет, ніж звичайні стилі, що не належать до шару в межах того ж типу походження. Це оголошення також вилучається 2 кроком алгоритму – _походження та вага_.
+
+Тоді залишаються значення `0` і `3px`, які мають однаковий селектор, а отже, однакову _специфічність_. Жодне з них не знаходиться всередині блоку `@scope`, тому контекстна наближеність також не впливає на цей приклад.
+
+Тоді дивимося на _порядок появи_. Друге оголошення, останній з двох нешарових авторських стилів, перемагає.
+
+```css
+margin-left: 3px;
+```
+
+> [!NOTE]
+> Оголошення, визначене в користувацькому CSS, хоч і може мати більшу специфічність, не обирається, оскільки _походження та вага_ каскадного алгоритму застосовуються до алгоритму _специфічності_. Оголошення, визначене в каскадному шарі, хоч і може з'явитися пізніше в коді, також не матиме пріоритету, оскільки звичайні стилі в каскадних шарах мають менший пріоритет, ніж звичайні нешарові стилі. _Порядок появи_ має значення лише тоді, коли як походження, так і вага, і специфічність рівні.
+
+## Авторські стилі: вбудовані стилі, шари та пріоритет
+
+[Таблиця в Порядку каскадування](#poriadok-kaskaduvannia) містить загальний огляд порядку пріоритету. У ній підсумовано стилі типи походження – користувацького агента, користувацькі та авторські – кожен у двох рядках: "тип походження – звичайна" і "тип походження – !important". Пріоритет всередині кожного типу походження має більше нюансів. Всередині відповідного типу походження стилі можуть міститися в шарах, а для авторських стилів також є проблема того, де в порядок каскадування впадають вбудовані стилі.
+
+Порядок оголошення шарів є важливим для визначення пріоритету. Звичайні стилі в шарі мають пріоритет над стилями, оголошеними в попередніх шарах; звичайні стилі, оголошені поза будь-яким шаром, мають пріоритет над звичайними стилями в шарах, незалежно від специфічності.
+
+У цьому прикладі автор скористався директивою CSS {{CSSXref('@import')}} для імпорту п'яти зовнішніх списків стилів усередину інформаційного елемента {{HTMLElement('style')}}.
+
+```html
+<style>
+  @import unlayeredStyles.css;
+  @import AStyles.css layer(A);
+  @import moreUnlayeredStyles.css;
+  @import BStyles.css layer(B);
+  @import CStyles.css layer(C);
+  p {
+    color: red;
+    padding: 1em !important;
+  }
+</style>
+```
+
+а потім у тілі документа маємо вбудовані стилі:
+
+```html
+<p style="line-height: 1.6em; text-decoration: overline !important;">Привіт</p>
+```
+
+У блоку коду CSS вище один за одним створені три каскадні шари з назвами "A", "B" і "C". Три списки стилів імпортовано безпосередньо в шари, а ще два – без створення або призначення шару.
+Рядок "Усі нешарові стилі" в списку нижче (пріоритет звичайних авторських стилів – порядок 4) включає стилі з цих двох списків стилів і додаткових нешарових блоків стилів CSS. Крім того, є два вбудовані стилі: звичайне оголошення `line-height` і важливе оголошення `text-decoration`:
+
+| Порядок пріоритету (за зростанням) | Авторський стиль   | Вага         |
+| ---------------------------------- | ------------------ | ------------ |
+| 1                                  | A – перший шар     | звичайна     |
+| 2                                  | B – другий шар     | звичайна     |
+| 3                                  | C – останній шар   | звичайна     |
+| 4                                  | Усі нешарові стилі | звичайна     |
+| 5                                  | вбудований `style` | звичайна     |
+| 6                                  | анімації           |              |
+| 7                                  | Усі нешарові стилі | `!important` |
+| 8                                  | C – останній шар   | `!important` |
+| 9                                  | B – другий шар     | `!important` |
+| 10                                 | A – перший шар     | `!important` |
+| 11                                 | вбудований `style` | `!important` |
+| 12                                 | переходи           |              |
+
+У всіх типах походжень звичайні стилі, вміщені в шарах, мають найменший пріоритет. У нашому прикладі звичайні стилі, пов'язані з першим оголошеним шаром (A), мають менший пріоритет, ніж звичайні стилі в другому оголошеному шарі (B), які мають менший пріоритет, ніж звичайні стилі в третьому оголошеному шарі (C). Ці шарові стилі мають менший пріоритет, ніж усі звичайні нешарові стилі, до яких належать звичайні стилі з `unlayeredStyles.css`, `moreUnlayeredStyles.css` і `color` елемента `p` в самому `<style>`.
+
+Якщо будь-які з шарових стилів у A, B або C мають селектори з вищою специфічністю, що дають збіг з елементом, подібно до `:root body p { color: black; }`, то це не має значення. Ці оголошення вилучаються з розгляду через _походження_; звичайні шарові стилі мають менший пріоритет, ніж звичайні нешарові стилі. А проте, якщо більш специфічний селектор `:root body p { color: black; }` знайдено в `unlayeredStyles.css`, оскільки _походження_ і _важливість_ мають однаковий пріоритет, то _специфічність_ означає, що переможе більш специфічне, чорне оголошення.
+
+Для стилів, оголошених як `!important`, порядок пріоритету шарів є оберненим. Важливі стилі, що перебувають у шарі, мають пріоритет над важливими оголошеннями, що перебувають поза шаром. Важливі оголошення, що перебувають у першому шарі (A) мають пріоритет над важливими оголошеннями, знайденими в шарі B, який має пріоритет над важливими оголошеннями, що перебувають у шарі C, який має пріоритет над важливими оголошеннями, розташованими поза шарами.
+
+### Вбудовані стилі
+
+Лише авторських стилів стосується поняття вбудованих стилів, оголошених за допомогою атрибута `style`. Звичайні вбудовані стилі мають пріоритет над будь-якими іншими звичайними стилями автора, незалежно від специфічності селектора. Якщо `line-height: 2;` оголошено в блоку селектора `:root body p` в будь-якому з п'яти імпортованих списків стилів, то висота рядка все одно буде `1.6`. Нормальні вбудовані стилі не мають пріоритету над анімованими та перехідними властивостями.
+
+Важливі вбудовані стилі мають пріоритет над усіма іншими стилями розробника, незалежно від того, чи є вони важливими, вбудованими або шаровими. Важливі вбудовані стилі також мають пріоритет над анімованими властивостями, але не над перехідними. Три речі можуть перемогти важливий вбудований стиль:
+
+- Важливий користувацький стиль.
+- Важливий стиль користувацького агента.
+- Перехідна властивість.
+
+### Вага та шари
+
+Порядок пріоритету типів походжень для важливих стилів є оберненим. Важливі стилі, оголошені поза будь-яким каскадним шаром, мають менший пріоритет, ніж ті, що оголошені як частина шару. Важливі стилі, що надходять у ранніх шарах, мають пріоритет над важливими стилями, оголошеними в подальших каскадних шарах.
+
+Погляньте на приклад у наступному CSS:
+
+```css
+p {
+  color: red;
+}
+
+@layer B {
+  :root p {
+    color: blue;
+  }
+}
+```
+
+Навіть попри те, що спершу оголошено червоний колір, і використано менш специфічний селектор, то оскільки нешаровий CSS має пріоритет над шаровим, абзац буде червоним. Якби ми додали на абзаці вбудований стиль, задавши інший колір, наприклад, `<p style="color: black">`, то цей абзац був би чорним.
+
+Коли до цього CSS додати `!important`, то порядок пріоритету змінюється на протилежний:
+
+```css
+p {
+  color: red !important;
+}
+
+@layer B {
+  :root p {
+    color: blue !important;
+  }
+}
+```
+
+Тепер абзац буде синім. Позначка `!important` в найранішому оголошеному шарі має пріоритет над наступними шарами та нешаровими важливими оголошеннями. Якби вбудований стиль мав !important, наприклад, `<p style="color: black !important">`, то абзац, знову таки, був би чорним. Вага вбудованого стилю має пріоритет над усіма іншими авторськими оголошеннями `!important`, незалежно від специфічності.
+
+> [!NOTE]
+>
+> Позначка `!important` обертає пріоритет каскадних шарів. У зв'язку з цим слід намагатися не використовувати `!important` для пересилювання зовнішніх стилів. Натомість слід користуватися {{cssxref("@import")}} вкупі з ключовим словом `layer` або функцією `layer()`, щоб імпортувати зовнішні списки стилів (з фреймворків, списків стилів віджетів, бібліотек тощо) до шарів. Імпортування стилів у шари як перше оголошення в CSS знижує їх пріоритет, і авторські шари, визначені далі в CSS, матимуть вищий пріоритет. Позначку `!important` слід використовувати обережно, якщо взагалі варто, лише щоб захистити обов'язкові стилі від подальших перевизначень, в першому оголошеному шарі.
+
+Стилі, що переходять, мають пріоритет над усіма важливими стилями, незалежно від того, хто і як їх оголосив.
+
+## Увесь порядок каскаду
+
+Тепер, коли ми краще розуміємо тип походження та пріоритет каскадних шарів, то усвідомлюємо, що таблицю в [Порядку каскадування](#poriadok-kaskaduvannia) можна було б точніше представити наступною таблицею:
+
+<table>
+<thead>
+  <tr><th>Порядок пріоритету <br/>(за зростанням)</th><th>Походження стилю</th><th>Вага</th></tr>
+</thead>
+<tbody>
+  <tr><td rowspan="3">1</td><td>користувацький агент – перший оголошений шар</td><td rowspan="3">звичайна</td></tr>
+  <tr><td>користувацький агент – останній оголошений шар</td></tr>
+  <tr><td>користувацький агент – нешарові стилі</td></tr>
+  <tr><td rowspan="3">2</td><td>user – перший оголошений шар</td><td rowspan="3">звичайна</td></tr>
+  <tr><td>користувач – останній оголошений шар</td></tr>
+  <tr><td>користувач – нешарові стилі</td></tr>
+  <tr><td rowspan="4">3</td><td>автор – перший оголошений шар</td><td rowspan="4">звичайна</td></tr>
+  <tr><td>автор – останній оголошений шар</td></tr>
+  <tr><td>автор – нешарові стилі</td></tr>
+  <tr><td>вбудований <code>style</code></td></tr>
+  <tr><td>4</td><td>анімації</td><td></td></tr>
+  <tr><td rowspan="4">5</td><td>автор – нешарові стилі</td><td rowspan="4"><code>!important</code></td></tr>
+  <tr><td>автор – останній оголошений шар</td></tr>
+  <tr><td>автор – перший оголошений шар</td></tr>
+  <tr><td>вбудований <code>style</code></td></tr>
+  <tr><td rowspan="3">6</td><td>користувач – нешарові стилі</td><td rowspan="3"><code>!important</td></tr>
+  <tr><td>користувач – останній оголошений шар</td></tr>
+  <tr><td>користувач – перший оголошений шар</td></tr>
+  <tr><td rowspan="3">7</td><td>користувацький агент – нешарові стилі</td><td rowspan="3"><code>!important</code></td></tr>
+  <tr><td>користувацький агент – останній оголошений шар</td></tr>
+  <tr><td>користувацький агент – перший оголошений шар</td></tr>
+  <tr><td>8</td><td>переходи</td><td></td></tr>
+</tbody>
+</table>
+
+## Які сутності CSS беруть участь у каскаді
+
+У каскаді беруть участь лише пари властивість-значення. Директиви-дескриптори не беруть участі в каскаді, й атрибути HTML, що впливають на стилізацію, також не беруть.
+
+### Директиви
+
+[Директиви][at-rules](/uk/docs/Web/CSS/At-rule) CSS, що вміщають сутності, відмінні від оголошень, наприклад, директива {{cssxref("@font-face")}}, що містить _дескриптори_, не беруть участі в каскаді.
+
+Переважно властивості та дескриптори, визначені в директивах, не беруть участі в каскаді. У ньому беруть участь лише директиви як такі. Наприклад, всередині директиви `@font-face` назви шрифтів позначаються дескрипторами [`font-family`](/uk/docs/Web/CSS/@font-face/font-family). Якщо визначено кілька правил `@font-face` з однаковим дескриптором, то розглядається лише найбільш відповідний `@font-face` як такий. Якщо ідентичну відповідність має більш ніж один дескриптор, то за допомогою кроків алгоритму 1, 2 і 4 порівнюються цілі оголошення `@font-face` (у директив немає специфічності).
+
+Попри те, що оголошення, присутні в більшості директив – таких як {{cssxref("@media")}}, {{cssxref("@document")}} і {{cssxref("@supports")}}, беруть участь у каскаді, директива може зробити весь селектор невідповідним, як це показано щодо стилю для друку в [базовому прикладі](#bazovyi-pryklad).
+
+Оголошення в {{cssxref("@keyframes")}} не беруть участі в каскаді. Як і в випадку з `@font-face`, каскадний алгоритм вибирає лише `@keyframes` як єдине ціле. [Порядок пріоритету анімації описано нижче](#animatsii-css-i-kaskad).
+
+Що до {{cssxref("@import")}}, то сама `@import` не бере участі в каскаді, але участь беруть усі імпортовані стилі. Якщо `@import` визначає [названий або безіменний шар](/uk/docs/Web/CSS/@layer), то вміст імпортованого списку стилів поміщається в зазначений шар. Уся решта CSS, імпортована за допомогою `@import`, розглядається як останній оголошений шар. Про це була мова вище.
+
+Насамкінець, {{cssxref("@charset")}} підкоряється особливим алгоритмам, каскадний алгоритм на неї не впливає.
+
+### Презентаційні атрибути
+
+Презентаційні атрибути – це атрибути в вихідному документі, що можуть впливати на стилізацію. Наприклад, нерекомендований атрибут `align`, коли є, задає вирівнювання для кількох елементів HTML, а атрибут `fill` визначає колір, що використовується для розфарбовування фігур і тексту SVG, а також визначає кінцевий стан для анімацій SVG. Хоча вони є авторськими стилями, проте презентаційні атрибути не беруть участі в каскаді.
+
+Якщо презентаційний атрибут HTML підтримується користувацьким агентом, то валідні презентаційні атрибути, включені в HTML та SVG, такі як атрибути [`align`](/uk/docs/Web/HTML/Element/img#align) і [`fill`](/uk/docs/Web/SVG/Attribute/fill), перекладаються на відповідні правила CSS (всі презентаційні атрибути SVG підтримуються як властивості CSS) та вставляються в авторський список стилів перед усіма іншими стилями зі специфічністю, рівною `0`.
+
+Презентаційні атрибути не можна оголошувати важливими (`!important`).
+
+## Анімації CSS і каскад
+
+[Анімації CSS](/uk/docs/Web/CSS/CSS_animations), що використовують директиви {{cssxref("@keyframes")}}, визначають анімації між станами. `@keyframes` не каскадує тобто в будь-яку мить CSS бере значення лише з одного-єдиного набору `@keyframes` і ніколи не змішує їх кілька. Якщо з однією назвою оголошено кілька наборів `@keyframes`, то застосовується останній набір з тих походження та шару, що мають пріоритет. Інші `@keyframes` ігноруються, навіть якщо анімують інші властивості.
+
+```css
+p {
+  animation: infinite 5s alternate repeatedName;
+}
+
+@keyframes repeatedName {
+  from {
+    font-size: 1rem;
+  }
+  to {
+    font-size: 3rem;
+  }
+}
+
+@layer A {
+  @keyframes repeatedName {
+    from {
+      background-color: yellow;
+    }
+    to {
+      background-color: orange;
+    }
+  }
+}
+
+@layer B {
+  @keyframes repeatedName {
+    from {
+      color: white;
+    }
+    to {
+      color: black;
+    }
+  }
+}
+```
+
+У цьому прикладі є три окремі оголошення анімацій, названих `repeatedName`. Коли до абзацу застосовується `animation: infinite 5s alternate repeatedName`, то застосовується лише одна анімація: анімація ключових кадрів, визначена в нешаровому CSS, має пріоритет над шаровими оголошеннями анімацій ключових кадрів, на основі порядку пріоритету походження та шарів. У цьому прикладі анімується лише розмір шрифту елемента.
+
+> [!NOTE]
+> Тут немає важливих анімацій, оскільки оголошення властивостей в блоку {{cssxref('@keyframes')}}, що містять `!important` як частину свого значення, ігноруються.
+
+## Скидання стилів
+
+Коли ваш вміст завершив змінювати стилі, можна опинитися в ситуації, коли необхідно повернути їх до якогось відомого стану. Це може статися в випадку анімацій, змін теми й так далі. Властивість CSS {{cssxref("all")}} дає змогу швидко повернути (майже) все в CSS до відомого стану.
+
+Властивість `all` дає змогу негайно відновити всі властивості до будь-якого з їх початкових (усталених) станів, стану, успадкованого з попереднього рівня каскаду, конкретного походження (списку стилів користувацького агента, авторського списку стилів або користувацького ), або навіть очистити значення властивостей повністю.
+
+## Специфікації
+
+{{Specifications}}
+
+## Дивіться також
+
+- [Навчання – Обробка конфліктів](/uk/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts)
+- [Навчання – каскадні шари](/uk/docs/Learn_web_development/Core/Styling_basics/Cascade_layers)
+- Модуль [Каскаду та успадкування CSS](/uk/docs/Web/CSS/CSS_cascade)
+- [Синтаксис CSS](/uk/docs/Web/CSS/Syntax)
+- [Специфічність](/uk/docs/Web/CSS/Specificity)
+- [Успадкування](/uk/docs/Web/CSS/Inheritance)
+- [Директиви](/uk/docs/Web/CSS/At-rule)
+- [Початкові](/uk/docs/Web/CSS/initial_value), [обчислені](/uk/docs/Web/CSS/computed_value), [вжиті](/uk/docs/Web/CSS/used_value) та [фактичні](/uk/docs/Web/CSS/actual_value) значення
diff --git a/uk_spelling_additions.txt b/uk_spelling_additions.txt
index 99328df41..79db9e29c 100644
--- a/uk_spelling_additions.txt
+++ b/uk_spelling_additions.txt
@@ -167,6 +167,7 @@
 Йолем
 картинки-в-картинці
 картинку-в-картинці
+каскадуються
 каскадують
 кастомізації
 кастомізаціям
@@ -370,6 +371,10 @@
 нечисло
 нечислом
 нешаровий
+нешаровими
+нешарових
+нешарові
+нешаровому
 нешарового
 нешістнадцяткову
 неюнікодними
@@ -393,6 +398,7 @@
 панорамовано
 парсинг
 парсингу
+перевизначень
 перевикористати
 перевикористовності
 передньогруди