move guide: css custom props

files/en-us/_redirects.txt

@@ -561,7 +561,7 @@
 /en-US/docs/CSS/Using_CSS_multiple_backgrounds	/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds
 /en-US/docs/CSS/Using_CSS_transforms	/en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms
 /en-US/docs/CSS/Using_CSS_transitions	/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions
-/en-US/docs/CSS/Using_CSS_variables	/en-US/docs/Web/CSS/Using_CSS_custom_properties
+/en-US/docs/CSS/Using_CSS_variables	/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties
 /en-US/docs/CSS/Using_media_queries_from_code	/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries
 /en-US/docs/CSS/Using_the_CSS_multi-column_layout	/en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts
 /en-US/docs/CSS/Value_definition_syntax	/en-US/docs/Web/CSS/Value_definition_syntax
@@ -11973,8 +11973,9 @@
 /en-US/docs/Web/CSS/Understanding_CSS_z-index/Stacking_without_z-index	/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index
 /en-US/docs/Web/CSS/Understanding_CSS_z-index/The_stacking_context	/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
 /en-US/docs/Web/CSS/Using_CSS_Columns	/en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts
+/en-US/docs/Web/CSS/Using_CSS_custom_properties	/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties
 /en-US/docs/Web/CSS/Using_CSS_media_queries	/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries
-/en-US/docs/Web/CSS/Using_CSS_variables	/en-US/docs/Web/CSS/Using_CSS_custom_properties
+/en-US/docs/Web/CSS/Using_CSS_variables	/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties
 /en-US/docs/Web/CSS/Using_media_queries_from_code	/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries
 /en-US/docs/Web/CSS/Using_the_CSS_multi-column_layout	/en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts
 /en-US/docs/Web/CSS/_image	/en-US/docs/Web/CSS/image/image

files/en-us/_wikihistory.json

@@ -76243,6 +76243,66 @@
     "modified": "2020-07-07T12:03:44.891Z",
     "contributors": ["wbamberg", "mfluehr"]
   },
+  "Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties": {
+    "modified": "2020-10-15T21:21:03.349Z",
+    "contributors": [
+      "mfuji09",
+      "Geo1088",
+      "chrisdavidmills",
+      "Awk34",
+      "danielleleb",
+      "elharony",
+      "estelle",
+      "Sajag",
+      "cartinez",
+      "mfluehr",
+      "Rohitkrops",
+      "Sheppy",
+      "dan10gc",
+      "aleshkanet",
+      "chafic",
+      "cbb",
+      "equinusocio",
+      "joyously",
+      "pixelass",
+      "jhpratt",
+      "FlorTello",
+      "erikadoyle",
+      "gilbertginsberg",
+      "cPhost",
+      "Rishiahya",
+      "PhantomWatson",
+      "beingmrkenny",
+      "m_gol",
+      "jpmedley",
+      "stevemao",
+      "Sebastianz",
+      "igor9silva",
+      "JeroenNoten",
+      "keithjgrant",
+      "xDarkShadowKnightx",
+      "robertclaytonreed",
+      "teoli",
+      "Volker-E",
+      "Manuel_Strehl",
+      "TabAtkins",
+      "pldz",
+      "George8211",
+      "nhoizey",
+      "wesj",
+      "jonathanKingston",
+      "MTonly",
+      "jmccraw",
+      "watilde",
+      "Ekanan",
+      "kohei.yoshino",
+      "jfla",
+      "AlexPl",
+      "velvel53",
+      "HumanBlade",
+      "ethertank"
+    ]
+  },
   "Web/CSS/CSS_colors": {
     "modified": "2020-12-02T11:04:05.642Z",
     "contributors": ["peterbe", "wbamberg", "fscholz", "Sheppy", "mfluehr"]
@@ -78591,66 +78651,6 @@
       "BijuGC"
     ]
   },
-  "Web/CSS/Using_CSS_custom_properties": {
-    "modified": "2020-10-15T21:21:03.349Z",
-    "contributors": [
-      "mfuji09",
-      "Geo1088",
-      "chrisdavidmills",
-      "Awk34",
-      "danielleleb",
-      "elharony",
-      "estelle",
-      "Sajag",
-      "cartinez",
-      "mfluehr",
-      "Rohitkrops",
-      "Sheppy",
-      "dan10gc",
-      "aleshkanet",
-      "chafic",
-      "cbb",
-      "equinusocio",
-      "joyously",
-      "pixelass",
-      "jhpratt",
-      "FlorTello",
-      "erikadoyle",
-      "gilbertginsberg",
-      "cPhost",
-      "Rishiahya",
-      "PhantomWatson",
-      "beingmrkenny",
-      "m_gol",
-      "jpmedley",
-      "stevemao",
-      "Sebastianz",
-      "igor9silva",
-      "JeroenNoten",
-      "keithjgrant",
-      "xDarkShadowKnightx",
-      "robertclaytonreed",
-      "teoli",
-      "Volker-E",
-      "Manuel_Strehl",
-      "TabAtkins",
-      "pldz",
-      "George8211",
-      "nhoizey",
-      "wesj",
-      "jonathanKingston",
-      "MTonly",
-      "jmccraw",
-      "watilde",
-      "Ekanan",
-      "kohei.yoshino",
-      "jfla",
-      "AlexPl",
-      "velvel53",
-      "HumanBlade",
-      "ethertank"
-    ]
-  },
   "Web/CSS/Value_definition_syntax": {
     "modified": "2020-10-06T14:06:23.915Z",
     "contributors": [

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

@@ -346,7 +346,7 @@ The most popular pre-processor is [Sass](https://sass-lang.com/). This is not a
 
 #### Defining variables
 
-CSS now has native [custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties), making this feature increasingly less important. However, one of the reasons you might use Sass is to be able to define all of the colors and fonts used in a project as settings, then to use that variable around the project. This means that if you realize you have used the wrong shade of blue, you only need change it in one place.
+CSS now has native [custom properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties), making this feature increasingly less important. However, one of the reasons you might use Sass is to be able to define all of the colors and fonts used in a project as settings, then to use that variable around the project. This means that if you realize you have used the wrong shade of blue, you only need change it in one place.
 
 If we created a variable called `$base-color`, as in the first line below, we could then use it through the stylesheet anywhere that required that color.
 

files/en-us/learn_web_development/howto/solve_css_problems/css_faq/index.md

@@ -94,7 +94,7 @@ h1 {
 
 ## How do I derive one style from another?
 
-CSS does not exactly allow one style to be defined in terms of another. However, assigning multiple classes to a single element can provide the same effect, and [CSS Variables](/en-US/docs/Web/CSS/Using_CSS_custom_properties) now provide a way to define style information in one place that can be reused in multiple places.
+CSS does not exactly allow one style to be defined in terms of another. However, assigning multiple classes to a single element can provide the same effect, and [CSS Variables](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) now provide a way to define style information in one place that can be reused in multiple places.
 
 ## How do I assign multiple classes to an element?
 

files/en-us/mozilla/firefox/releases/29/index.md

@@ -26,7 +26,7 @@ _See the [Mozilla Hacks blog post](https://hacks.mozilla.org/2014/02/css-source-
 
 ### CSS
 
-- [CSS variables](/en-US/docs/Web/CSS/Using_CSS_custom_properties) have been implemented ([Firefox bug 773296](https://bugzil.la/773296)). Mozilla Hacks article can be found [here](https://hacks.mozilla.org/2013/12/css-variables-in-firefox-nightly/). They are enabled by default only for non-release builds (on release builds flip the pref `layout.css.variables.enabled` to `true` if you want to play with them).
+- [CSS variables](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) have been implemented ([Firefox bug 773296](https://bugzil.la/773296)). Mozilla Hacks article can be found [here](https://hacks.mozilla.org/2013/12/css-variables-in-firefox-nightly/). They are enabled by default only for non-release builds (on release builds flip the pref `layout.css.variables.enabled` to `true` if you want to play with them).
 - Flexboxes now support {{cssxref("visibility")}}`: collapse` ([Firefox bug 783470](https://bugzil.la/783470)).
 - The {{cssxref("box-sizing")}} property has been unprefixed ([Firefox bug 243412](https://bugzil.la/243412)).
 - The {{cssxref("will-change")}} property, a hint to that something will animate has been added. The preference `layout.css.will-change.enabled` must be switched to `true` to enable it. ([Firefox bug 940842](https://bugzil.la/940842))

files/en-us/mozilla/firefox/releases/55/index.md

@@ -29,7 +29,7 @@ Firefox 55 was released on August 8, 2017. This article lists key changes that a
 - Implemented the {{cssxref("text-justify")}} property ([Firefox bug 1343512](https://bugzil.la/1343512), [Firefox bug 276079](https://bugzil.la/276079)).
 - \[css-grid] {{cssxref("fit-content")}} unexpectedly reserves space for full clamp size in {{cssxref("repeat", "repeat()")}} ([Firefox bug 1359060](https://bugzil.la/1359060)).
 - The {{cssxref("float")}} / {{cssxref("clear")}} logical values — `inline-start` and `inline-end` — which were previously implemented but preffed off in release channels, are now available in all channels by default ([Firefox bug 1253919](https://bugzil.la/1253919)).
-- The `layout.css.variables.enabled` preference has been removed completely meaning that the [CSS variables](/en-US/docs/Web/CSS/Using_CSS_custom_properties) feature is enabled all the time and can no longer be disabled ([Firefox bug 1312328](https://bugzil.la/1312328)).
+- The `layout.css.variables.enabled` preference has been removed completely meaning that the [CSS variables](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) feature is enabled all the time and can no longer be disabled ([Firefox bug 1312328](https://bugzil.la/1312328)).
 - Implemented the proprietary `-moz-context-properties` property ([Firefox bug 1058040](https://bugzil.la/1058040)).
 - Zero (0) angle value without degree unit is not correctly interpreted in {{cssxref("gradient/linear-gradient")}} ([Firefox bug 1363292](https://bugzil.la/1363292)).
 - The {{cssxref("::cue")}} pseudo-element is now supported; it matches on text cues presented within a media element ([Firefox bug 1318542](https://bugzil.la/1318542)).

files/en-us/mozilla/firefox/releases/60/index.md

@@ -17,7 +17,7 @@ This article provides information about the changes in Firefox 60 that will affe
 ### Developer tools
 
 - In the CSS Pane rules view (see [Examine and edit CSS](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html)), the keyboard shortcuts for precise value increments (increase/decrease by 0.1) have changed from `Alt` + `Up`/`Down` to `Ctrl` + `Up`/`Down` on Linux and Windows, to avoid clashes with default OS-level shortcuts (see [Firefox bug 1413314](https://bugzil.la/1413314)).
-- Also in the CSS Pane rules view, [CSS variable names](/en-US/docs/Web/CSS/Using_CSS_custom_properties) will now auto-complete ([Firefox bug 1422635](https://bugzil.la/1422635)). If you enter `var(` into a property value and then type a dash (`-`), any variables you have declared in your CSS will then appear in an autocomplete list.
+- Also in the CSS Pane rules view, [CSS variable names](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) will now auto-complete ([Firefox bug 1422635](https://bugzil.la/1422635)). If you enter `var(` into a property value and then type a dash (`-`), any variables you have declared in your CSS will then appear in an autocomplete list.
 - In [Responsive Design Mode](https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/index.html), a _Reload when…_ dropdown has been added to allow users to enable/disable automatic page reloads when touch simulation is toggled, or simulated user agent is changed. See [Controlling page reload behavior](https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/index.html#controlling-page-reload-behavior) for more details ([Firefox bug 1428816](https://bugzil.la/1428816)).
 - The `view_source.tab` preference has been removed so you can no longer toggle [View Source](https://firefox-source-docs.mozilla.org/devtools-user/view_source/index.html) mode between appearing in a new tab or new window. Page sources will always appear in new tabs from now on ([Firefox bug 1418403](https://bugzil.la/1418403)).
 

files/en-us/web/api/css_typed_om_api/guide/index.md

@@ -331,7 +331,7 @@ The following examples reference `allComputedStyles`:
 
 ### CSSUnparsedValue
 
-The {{domxref('CSSUnparsedValue')}} represents [custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties):
+The {{domxref('CSSUnparsedValue')}} represents [custom properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties):
 
 ```js
 // CSSUnparsedValue

files/en-us/web/api/cssvariablereferencevalue/cssvariablereferencevalue/index.md

@@ -22,7 +22,7 @@ new CSSVariableReferenceValue(variable, fallback)
 - `variable`
   - : A [custom property name](/en-US/docs/Web/CSS/--*).
 - `fallback` {{optional_inline}}
-  - : A [custom property fallback value](/en-US/docs/Web/CSS/Using_CSS_custom_properties#custom_property_fallback_values).
+  - : A [custom property fallback value](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties#custom_property_fallback_values).
 
 ## Specifications
 

files/en-us/web/api/cssvariablereferencevalue/fallback/index.md

@@ -9,7 +9,7 @@ browser-compat: api.CSSVariableReferenceValue.fallback
 {{APIRef("CSSOM")}}
 
 The **`fallback`** read-only property of the
-{{domxref("CSSVariableReferenceValue")}} interface returns the [custom property fallback value](/en-US/docs/Web/CSS/Using_CSS_custom_properties#custom_property_fallback_values) of the {{domxref("CSSVariableReferenceValue")}}.
+{{domxref("CSSVariableReferenceValue")}} interface returns the [custom property fallback value](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties#custom_property_fallback_values) of the {{domxref("CSSVariableReferenceValue")}}.
 
 ## Value
 

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

@@ -89,5 +89,5 @@ Custom properties are scoped to the element(s) they are declared on, and partici
 
 - The {{cssxref("var", "var()")}} function
 - {{cssxref("@property")}} at-rule
-- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/Using_CSS_custom_properties) guide
+- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) guide
 - [CSS custom properties for cascading variables](/en-US/docs/Web/CSS/CSS_cascading_variables) module

files/en-us/web/css/@font-palette-values/index.md

@@ -20,7 +20,7 @@ The **`@font-palette-values`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/
 }
 ```
 
-The [<dashed-ident>](/en-US/docs/Web/CSS/dashed-ident) is a user defined identifier, that while it looks like a [CSS custom property](/en-US/docs/Web/CSS/Using_CSS_custom_properties) behaves in a different way and is not wrapped in a [CSS var() function](/en-US/docs/Web/CSS/var).
+The [<dashed-ident>](/en-US/docs/Web/CSS/dashed-ident) is a user defined identifier, that while it looks like a [CSS custom property](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) behaves in a different way and is not wrapped in a [CSS var() function](/en-US/docs/Web/CSS/var).
 
 ### Descriptors
 

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

@@ -141,5 +141,5 @@ For item three, the `--item-size` value gets set to `1000px`. While `1000px` is
 - [CSS Painting API](/en-US/docs/Web/API/CSS_Painting_API)
 - [CSS Typed Object Model](/en-US/docs/Web/API/CSS_Typed_OM_API)
 - [Houdini APIs](/en-US/docs/Web/API/Houdini_APIs)
-- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/Using_CSS_custom_properties) guide
+- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) guide
 - [CSS custom properties for cascading variables](/en-US/docs/Web/CSS/CSS_cascading_variables) module

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

@@ -29,7 +29,7 @@ The **`:root`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/Ps
 
 ### Declaring global CSS variables
 
-`:root` can be useful for declaring global [CSS variables](/en-US/docs/Web/CSS/Using_CSS_custom_properties):
+`:root` can be useful for declaring global [CSS variables](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties):
 
 ```css
 :root {

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

@@ -7,13 +7,13 @@ browser-compat: css.properties.all
 
 {{CSSRef}}
 
-The **`all`** [shorthand](/en-US/docs/Web/CSS/Shorthand_properties) [CSS](/en-US/docs/Web/CSS) property resets all of an element's properties except {{cssxref("unicode-bidi")}}, {{cssxref("direction")}}, and [CSS Custom Properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties). It can set properties to their initial or inherited values, or to the values specified in another cascade layer or stylesheet origin.
+The **`all`** [shorthand](/en-US/docs/Web/CSS/Shorthand_properties) [CSS](/en-US/docs/Web/CSS) property resets all of an element's properties except {{cssxref("unicode-bidi")}}, {{cssxref("direction")}}, and [CSS Custom Properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties). It can set properties to their initial or inherited values, or to the values specified in another cascade layer or stylesheet origin.
 
 {{EmbedInteractiveExample("pages/css/all.html")}}
 
 ## Constituent properties
 
-This property is a shorthand for all CSS properties except for {{cssxref("unicode-bidi")}}, {{cssxref("direction")}}, and [custom properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties).
+This property is a shorthand for all CSS properties except for {{cssxref("unicode-bidi")}}, {{cssxref("direction")}}, and [custom properties](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties).
 
 ## Syntax
 

files/en-us/web/css/at-rule/index.md

@@ -60,7 +60,7 @@ Block at-rules end in a `{}`-block that contain nested rules, other at-rules, or
 - {{cssxref("@position-try")}}
   - : Defines custom position options which can be used to define fallback positioning and alignment options for anchor-positioned elements ([CSS anchor positioning](/en-US/docs/Web/CSS/CSS_anchor_positioning)).
 - {{cssxref("@property")}}
-  - : Defines a [CSS custom property](/en-US/docs/Web/CSS/Using_CSS_custom_properties), allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not ([CSS custom properties for cascading variables](/en-US/docs/Web/CSS/CSS_cascading_variables)).
+  - : Defines a [CSS custom property](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties), allowing for property type checking and constraining, setting default values, and defining whether a custom property can inherit values or not ([CSS custom properties for cascading variables](/en-US/docs/Web/CSS/CSS_cascading_variables)).
 - {{cssxref("@scope")}}
   - : Defines a scope in which to apply them to selected elements and the styles to apply to the elements in that scope ([CSS cascading and inheritance](/en-US/docs/Web/CSS/CSS_cascade)).
 - {{cssxref("@starting-style")}}

files/en-us/web/css/calc-size/index.md

@@ -68,7 +68,7 @@ The first `calc-size()` argument can be one of the following intrinsic values:
 
 There are also a few special values that this argument can take:
 
-- A nested `calc-size()` value. This isn't something you'd be likely to do very often, but it is available ensuring using a [CSS variable](/en-US/docs/Web/CSS/Using_CSS_custom_properties) as the `<calc-size-basis>` will always work, provided the variable is a valid value for the property `calc-size()` is being set on. So for example, this will work:
+- A nested `calc-size()` value. This isn't something you'd be likely to do very often, but it is available ensuring using a [CSS variable](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties) as the `<calc-size-basis>` will always work, provided the variable is a valid value for the property `calc-size()` is being set on. So for example, this will work:
 
   ```css
   section {

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

@@ -109,7 +109,7 @@ As the slider's value changes from 0 up to 360, the value of the `--hue` [custom
 
 ## Guides
 
-- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/Using_CSS_custom_properties)
+- [Using CSS custom properties (variables)](/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties)
 
   - : Explains how to use custom properties in CSS and JavaScript, with hints on handling undefined and invalid values, fallbacks, and inheritance.
 

files/en-us/web/css/using_css_custom_properties/index.md → files/en-us/web/css/css_cascading_variables/using_css_custom_properties/index.md

@@ -1,6 +1,6 @@
 ---
 title: Using CSS custom properties (variables)
-slug: Web/CSS/Using_CSS_custom_properties
+slug: Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties
 page-type: guide
 ---