Move cascade under cascade module

files/en-us/_redirects.txt

@@ -469,7 +469,7 @@
 /en-US/docs/CSS/CSS_transitions	/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions
 /en-US/docs/CSS/CSS_values_serialization	/en-US/docs/Web/CSS
 /en-US/docs/CSS/CSS_values_syntax	/en-US/docs/Web/CSS
-/en-US/docs/CSS/Cascade	/en-US/docs/Web/CSS/Cascade
+/en-US/docs/CSS/Cascade	/en-US/docs/Web/CSS/CSS_cascade/Cascade
 /en-US/docs/CSS/Child_selectors	/en-US/docs/Web/CSS/Child_combinator
 /en-US/docs/CSS/Class_selectors	/en-US/docs/Web/CSS/Class_selectors
 /en-US/docs/CSS/Comments	/en-US/docs/Web/CSS/Comments
@@ -11929,6 +11929,7 @@
 /en-US/docs/Web/CSS/CSS_transform_functions	/en-US/docs/Web/CSS/transform
 /en-US/docs/Web/CSS/CSS_values_serialization	/en-US/docs/Web/CSS
 /en-US/docs/Web/CSS/CSS_values_syntax	/en-US/docs/Web/CSS
+/en-US/docs/Web/CSS/Cascade	/en-US/docs/Web/CSS/CSS_cascade/Cascade
 /en-US/docs/Web/CSS/Child_selectors	/en-US/docs/Web/CSS/Child_combinator
 /en-US/docs/Web/CSS/Common_CSS_Questions	/en-US/docs/Learn_web_development/Howto/Solve_CSS_problems/CSS_FAQ
 /en-US/docs/Web/CSS/Compositing_and_Blending	/en-US/docs/Web/CSS/CSS_compositing_and_blending

files/en-us/_wikihistory.json

@@ -76239,6 +76239,37 @@
       "Fredchat"
     ]
   },
+  "Web/CSS/CSS_cascade/Cascade": {
+    "modified": "2020-07-27T13:35:05.470Z",
+    "contributors": [
+      "wbamberg",
+      "jswisher",
+      "mfuji09",
+      "fazl",
+      "marcelobcortes",
+      "birtles",
+      "agarun",
+      "ExE-Boss",
+      "dashlee92",
+      "oliverbaptiste",
+      "01abhishekjain",
+      "michaeljgut",
+      "Sheppy",
+      "Biiinggg",
+      "mfluehr",
+      "chrisdavidmills",
+      "merelinguist",
+      "verv0eren",
+      "HarryPehkonen",
+      "malozaibi",
+      "Sebastianz",
+      "mrevan",
+      "rralian",
+      "nasifmdtanjim",
+      "velvel53",
+      "teoli"
+    ]
+  },
   "Web/CSS/CSS_cascade/Specificity": {
     "modified": "2020-11-14T16:01:00.890Z",
     "contributors": [
@@ -77854,37 +77885,6 @@
       "teoli"
     ]
   },
-  "Web/CSS/Cascade": {
-    "modified": "2020-07-27T13:35:05.470Z",
-    "contributors": [
-      "wbamberg",
-      "jswisher",
-      "mfuji09",
-      "fazl",
-      "marcelobcortes",
-      "birtles",
-      "agarun",
-      "ExE-Boss",
-      "dashlee92",
-      "oliverbaptiste",
-      "01abhishekjain",
-      "michaeljgut",
-      "Sheppy",
-      "Biiinggg",
-      "mfluehr",
-      "chrisdavidmills",
-      "merelinguist",
-      "verv0eren",
-      "HarryPehkonen",
-      "malozaibi",
-      "Sebastianz",
-      "mrevan",
-      "rralian",
-      "nasifmdtanjim",
-      "velvel53",
-      "teoli"
-    ]
-  },
   "Web/CSS/Child_combinator": {
     "modified": "2020-10-15T21:04:19.088Z",
     "contributors": [

files/en-us/glossary/semantics/index.md

@@ -24,7 +24,7 @@ In HTML, for example, the {{htmlelement("Heading_Elements", "h1")}} element is a
 <h1>This is a top level heading</h1>
 ```
 
-By default, most browser's [user agent stylesheet](/en-US/docs/Web/CSS/Cascade#user-agent_stylesheets) will style an {{htmlelement("Heading_Elements", "h1")}} with a large font size to make it _look_ like a heading (although you could style it to look like anything you wanted).
+By default, most browser's [user agent stylesheet](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user-agent_stylesheets) will style an {{htmlelement("Heading_Elements", "h1")}} with a large font size to make it _look_ like a heading (although you could style it to look like anything you wanted).
 
 On the other hand, you could make any element _look_ like a top level heading. Consider the following:
 

files/en-us/learn_web_development/core/styling_basics/cascade_layers/index.md

@@ -6,7 +6,7 @@ page-type: learn-module-chapter
 
 {{LearnSidebar}}
 
-This lesson aims to introduce you to [cascade layers](/en-US/docs/Web/CSS/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/Cascade) and [CSS specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity).
+This lesson aims to introduce you to [cascade layers](/en-US/docs/Web/CSS/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) and [CSS specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity).
 
 If you are new to CSS, working through this lesson may seem less relevant immediately and a little more academic than some other parts of the course. However, knowing the basics of what cascade layers are should you encounter them in your projects is helpful. The more you work with CSS, understanding cascade layers and knowing how to leverage their power will save you from a lot of pain managing a code base with CSS from different parties, plugins, and development teams.
 
@@ -53,7 +53,7 @@ For each step, only the declarations "still in the running" move on to "compete"
 
 ### Origin and cascade
 
-There are three [cascade origin types](/en-US/docs/Web/CSS/Cascade#origin_types): user-agent stylesheets, user stylesheets, and author stylesheets. The browser sorts each declaration into six origin buckets by origin and importance. There are eight levels of precedence: the six origin buckets, properties that are transitioning, and properties that are animating. The order of precedence goes from normal user-agent styles, which have the lowest precedence, to styles within currently applied animations, to important user-agent styles, and then styles being transitioned, which have the highest precedence:
+There are three [cascade origin types](/en-US/docs/Web/CSS/CSS_cascade/Cascade#origin_types): user-agent stylesheets, user stylesheets, and author stylesheets. The browser sorts each declaration into six origin buckets by origin and importance. There are eight levels of precedence: the six origin buckets, properties that are transitioning, and properties that are animating. The order of precedence goes from normal user-agent styles, which have the lowest precedence, to styles within currently applied animations, to important user-agent styles, and then styles being transitioned, which have the highest precedence:
 
 1. user-agent normal styles
 2. user normal styles

files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md

@@ -41,15 +41,15 @@ While working through this lesson may seem less relevant immediately and a littl
 
 CSS stands for **Cascading Style Sheets**, and that first word _cascading_ is incredibly important to understand — the way that the cascade behaves is key to understanding CSS.
 
-At some point, you will be working on a project and you will find that the CSS you thought should be applied to an element is not working. Often, the problem is that you create two rules that apply different values of the same property to the same element. [**Cascade**](/en-US/docs/Web/CSS/Cascade) and the closely-related concept of [**specificity**](/en-US/docs/Web/CSS/CSS_cascade/Specificity) are mechanisms that control which rule applies when there is such a conflict. The rule that's styling your element may not be the one you expect, so you need to understand how these mechanisms work.
+At some point, you will be working on a project and you will find that the CSS you thought should be applied to an element is not working. Often, the problem is that you create two rules that apply different values of the same property to the same element. [**Cascade**](/en-US/docs/Web/CSS/CSS_cascade/Cascade) and the closely-related concept of [**specificity**](/en-US/docs/Web/CSS/CSS_cascade/Specificity) are mechanisms that control which rule applies when there is such a conflict. The rule that's styling your element may not be the one you expect, so you need to understand how these mechanisms work.
 
 Also significant here is the concept of [**inheritance**](/en-US/docs/Web/CSS/Inheritance), which means that some CSS properties by default inherit values set on the current element's parent element and some don't. This can also cause some behavior that you might not expect.
 
 Let's start by taking a quick look at the key things we are dealing with, then we'll look at each in turn and see how they interact with each other and your CSS. These can seem like a tricky set of concepts to understand. As you get more practice writing CSS, the way it works will become more obvious to you.
 
 ### Cascade
 
-Stylesheets [**cascade**](/en-US/docs/Web/CSS/Cascade) — at a very simple level, this means that the origin and the order of CSS rules matter. When two rules both have equal specificity, the one that is defined last in the stylesheet is the one that will be used. There are other concepts that have an effect, such as [cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers), but these are more advanced and we won't cover them in any detail here.
+Stylesheets [**cascade**](/en-US/docs/Web/CSS/CSS_cascade/Cascade) — at a very simple level, this means that the origin and the order of CSS rules matter. When two rules both have equal specificity, the one that is defined last in the stylesheet is the one that will be used. There are other concepts that have an effect, such as [cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers), but these are more advanced and we won't cover them in any detail here.
 
 In the below example, we have two rules that could apply to the `<h1>` element. The `<h1>` content ends up being colored blue. This is because both the rules are from the same source, have an identical element selector, and therefore, carry the same specificity, but the last one in the source order wins.
 
@@ -200,7 +200,7 @@ CSS provides five special universal property values for controlling inheritance.
   - : Resets the property to its natural value, which means that if the property is naturally inherited it acts like `inherit`, otherwise it acts like `initial`.
 
 > [!NOTE]
-> See [Origin types](/en-US/docs/Web/CSS/Cascade#origin_types) for more information on each of these and how they work.
+> See [Origin types](/en-US/docs/Web/CSS/CSS_cascade/Cascade#origin_types) for more information on each of these and how they work.
 
 We can look at a list of links and explore how universal values work. The live example below allows you to play with the CSS and see what happens when you make changes. Playing with code really is the best way to better understand HTML and CSS.
 

files/en-us/learn_web_development/core/styling_basics/index.md

@@ -65,7 +65,7 @@ These tutorials are not part of the learning pathway, but they are interesting n
 - [Advanced styling effects](/en-US/docs/Learn_web_development/Core/Styling_basics/Advanced_styling_effects)
   - : This article will give you guidance on how to go about debugging a CSS problem, and show you how the DevTools included in all modern browsers can help you to find out what is going on.
 - [Cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers)
-  - : This lesson aims to introduce you to [cascade layers](/en-US/docs/Web/CSS/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/Cascade) and [CSS specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity).
+  - : This lesson aims to introduce you to [cascade layers](/en-US/docs/Web/CSS/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) and [CSS specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity).
 - [Handling different text directions](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_different_text_directions)
   - : In recent years, CSS has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as Japanese) — these different directionalities are called writing modes. As you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them in this article.
 - [Organizing CSS](/en-US/docs/Learn_web_development/Core/Styling_basics/Organizing)

files/en-us/mozilla/add-ons/webextensions/api/scripting/insertcss/index.md

@@ -45,7 +45,7 @@ await browser.scripting.insertCSS(
 
       - : `string`. The style origin for the injection, either `USER`, to add the CSS as a user stylesheet, or `AUTHOR`, to add it as an author stylesheet. Defaults to `AUTHOR`.
 
-        - `USER` enables you to prevent websites from overriding the CSS you insert: see [Cascading order](/en-US/docs/Web/CSS/Cascade#cascading_order).
+        - `USER` enables you to prevent websites from overriding the CSS you insert: see [Cascading order](/en-US/docs/Web/CSS/CSS_cascade/Cascade#cascading_order).
         - `AUTHOR` stylesheets behave as if they appear after all author rules specified by the web page. This behavior includes any author stylesheets added dynamically by the page's scripts, even if that addition happens after the `insertCSS` call completes.
 
     - `target`

files/en-us/mozilla/add-ons/webextensions/api/tabs/insertcss/index.md

@@ -48,7 +48,7 @@ let inserting = browser.tabs.insertCSS(
 
       - : `string`. This can take one of two values: "user", to add the CSS as a user stylesheet or "author" to add it as an author stylesheet. If this option is omitted, the CSS is added as an author stylesheet.
 
-        - "user" enables you to prevent websites from overriding the CSS you insert: see [Cascading order](/en-US/docs/Web/CSS/Cascade#cascading_order).
+        - "user" enables you to prevent websites from overriding the CSS you insert: see [Cascading order](/en-US/docs/Web/CSS/CSS_cascade/Cascade#cascading_order).
         - "author" stylesheets behave as if they appear after all author rules specified by the web page. This behavior includes any author stylesheets added dynamically by the page's scripts, even if that addition happens after the `insertCSS` call completes.
 
     - `file` {{optional_inline}}

files/en-us/web/api/animation/commitstyles/index.md

@@ -10,7 +10,7 @@ browser-compat: api.Animation.commitStyles
 
 The `commitStyles()` method of the [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)'s {{domxref("Animation")}} interface writes the [computed values](/en-US/docs/Web/CSS/computed_value) of the animation's current styles into its target element's [`style`](/en-US/docs/Web/HTML/Global_attributes/style) attribute. `commitStyles()` works even if the animation has been [automatically removed](/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API#automatically_removing_filling_animations).
 
-`commitStyles()` can be used in combination with `fill` to cause the final state of an animation to persist after the animation ends. The same effect could be achieved with `fill` alone, but [using indefinitely filling animations is discouraged](https://drafts.csswg.org/web-animations-1/#fill-behavior). Animations [take precedence over all static styles](/en-US/docs/Web/CSS/Cascade#cascading_order), so an indefinite filling animation can prevent the target element from ever being styled normally.
+`commitStyles()` can be used in combination with `fill` to cause the final state of an animation to persist after the animation ends. The same effect could be achieved with `fill` alone, but [using indefinitely filling animations is discouraged](https://drafts.csswg.org/web-animations-1/#fill-behavior). Animations [take precedence over all static styles](/en-US/docs/Web/CSS/CSS_cascade/Cascade#cascading_order), so an indefinite filling animation can prevent the target element from ever being styled normally.
 
 Using `commitStyles()` writes the styling state into the element's [`style`](/en-US/docs/Web/HTML/Global_attributes/style) attribute, where they can be modified and replaced as normal.
 

files/en-us/web/api/document/adoptedstylesheets/index.md

@@ -16,7 +16,7 @@ The **`adoptedStyleSheets`** property of the {{domxref("Document")}} interface i
 The same constructed stylesheets can also be shared with one or more {{domxref("ShadowRoot")}} instances using the [`ShadowRoot.adoptedStyleSheets`](/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets) property.
 Changing an adopted stylesheet will affect all the objects that adopt it.
 
-Stylesheets in the property are evaluated along with the document's other stylesheets using the [CSS cascade algorithm](/en-US/docs/Web/CSS/Cascade).
+Stylesheets in the property are evaluated along with the document's other stylesheets using the [CSS cascade algorithm](/en-US/docs/Web/CSS/CSS_cascade/Cascade).
 Where the resolution of rules considers stylesheet order, `adoptedStyleSheets` are assumed to be ordered after those in [`Document.styleSheets`](/en-US/docs/Web/API/Document/styleSheets).
 
 Only stylesheets created using the [`CSSStyleSheet()` constructor](/en-US/docs/Web/API/CSSStyleSheet/CSSStyleSheet) within the context of the current {{domxref("Document")}} may be adopted.

files/en-us/web/api/web_animations_api/using_the_web_animations_api/index.md

@@ -239,7 +239,7 @@ The background elements also have `playbackRate`s that are impacted when you cli
 When animating elements, a common use case is to persist the final state of the animation, after the animation has finished. One method sometimes used for this is to set the animation's [fill mode](/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect#fill) to `forwards`. However, it is not recommended to use fill modes to persist the effect of an animation indefinitely, for two reasons:
 
 - The browser has to maintain the state of the animation while it is still active, so the animation continues to consume resources even though it is no longer animating. Note that this is somewhat alleviated by the browser [automatically removing filling animations](#automatically_removing_filling_animations).
-- Styles applied by animations have a [higher precedence in the cascade](/en-US/docs/Web/CSS/Cascade#cascading_order) than specified styles, so it can be difficult to override them when needed.
+- Styles applied by animations have a [higher precedence in the cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade#cascading_order) than specified styles, so it can be difficult to override them when needed.
 
 A better approach is to use the {{domxref("Animation.commitStyles()")}} method. This writes the computed values of the animation's current styles into its target element's [`style`](/en-US/docs/Web/HTML/Global_attributes/style) attribute, after which the element can be restyled normally.
 

files/en-us/web/css/@font-face/font-weight/index.md

@@ -161,7 +161,7 @@ The other three declarations use the light, bold, and extra-bold versions of the
 - the bold font is associated with the range 500-700
 - the extra-bold font is associated with the range 700-1000
 
-The CSS [cascade](/en-US/docs/Web/CSS/Cascade) ensures that the three latter declarations override parts of the range that was set in the `FiraSans-Regular` declaration.
+The CSS [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) ensures that the three latter declarations override parts of the range that was set in the `FiraSans-Regular` declaration.
 
 ```css
 @font-face {

files/en-us/web/css/@layer/index.md

@@ -213,7 +213,7 @@ In the following example, two layers are created with no rules applied, then CSS
 - {{domxref("CSSLayerStatementRule")}}
 - [`!important`](/en-US/docs/Web/CSS/important)
 - [`revert-layer`](/en-US/docs/Web/CSS/revert-layer)
-- [Introducing the CSS cascade](/en-US/docs/Web/CSS/Cascade)
+- [Introducing the CSS cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade)
 - [Learn: Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts)
 - [Learn: Cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers)
 - [The future of CSS: Cascade layers](https://www.bram.us/2021/09/15/the-future-of-css-cascade-layers-css-at-layer/) on bram.us (2021)

files/en-us/web/css/actual_value/index.md

@@ -13,7 +13,7 @@ The **actual value** of a [CSS](/en-US/docs/Web/CSS) property is the [used value
 
 The {{glossary("user agent")}} performs four steps to calculate a property's actual (final) value:
 
-1. First, the [specified value](/en-US/docs/Web/CSS/specified_value) is determined based on the result of [cascading](/en-US/docs/Web/CSS/Cascade), [inheritance](/en-US/docs/Web/CSS/Inheritance), or using the [initial value](/en-US/docs/Web/CSS/initial_value).
+1. First, the [specified value](/en-US/docs/Web/CSS/specified_value) is determined based on the result of [cascading](/en-US/docs/Web/CSS/CSS_cascade/Cascade), [inheritance](/en-US/docs/Web/CSS/Inheritance), or using the [initial value](/en-US/docs/Web/CSS/initial_value).
 2. Next, the [computed value](/en-US/docs/Web/CSS/computed_value) is calculated according to the specification (for example, a `span` with `position: absolute` will have its computed `display` changed to `block`).
 3. Then, layout is calculated, resulting in the [used value](/en-US/docs/Web/CSS/used_value).
 4. Finally, the used value is transformed according to the limitations of the local environment, resulting in the actual value.