chore(cssxref): Update markdown links with cssxref in /web/css

files/en-us/web/css/guides/animations/index.md

@@ -280,7 +280,7 @@ All animations, even those with 0 seconds duration, throw animation events.
 ## Related concepts
 
 - {{cssxref("will-change")}} CSS property
-- [`<easing-function>`](/en-US/docs/Web/CSS/Reference/Values/easing-function) data type
+- {{cssxref("easing-function")}} data type
 - [`prefers-reduced-motion`](/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion) media query
 - {{glossary("Bezier curve")}} glossary term
 

files/en-us/web/css/guides/borders_and_box_decorations/index.md

@@ -219,10 +219,10 @@ The CSS borders and box decorations module level 4 also introduces the `border-s
 - {{cssxref("box-sizing")}} property
 - {{cssxref("box-decoration-break")}} property
 - {{cssxref("text-shadow")}} property
-- {{cssxref("url_value", "<url>")}} CSS type
-- [`<color>`](/en-US/docs/Web/CSS/Reference/Properties/color) data type
-- [`<image>`](/en-US/docs/Web/CSS/Reference/Values/image) data type
-- [`<position>`](/en-US/docs/Web/CSS/Reference/Properties/position) data type
+- {{cssxref("url_value", "&lt;url&gt;")}} data type
+- {{cssxref("&lt;color&gt;")}} data type
+- {{cssxref("image")}} data type
+- {{cssxref("&lt;position&gt;")}} data type
 - [`currentColor`](/en-US/docs/Web/CSS/Reference/Values/color_value#currentcolor_keyword) keyword
 
 [CSS backgrounds and borders](/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders) module

files/en-us/web/css/guides/box_model/index.md

@@ -35,7 +35,7 @@ The CSS box model module defines physical (or "page relative") properties such a
 
 ### Data types
 
-- [`<box-edge>`](/en-US/docs/Web/CSS/Reference/Values/box-edge)
+- {{cssxref("box-edge")}}
   - [`<visual-box>`](/en-US/docs/Web/CSS/Reference/Values/box-edge#visual-box)
   - [`<layout-box>`](/en-US/docs/Web/CSS/Reference/Values/box-edge#layout-box)
   - [`<paint-box>`](/en-US/docs/Web/CSS/Reference/Values/box-edge#paint-box)

files/en-us/web/css/guides/cascade/inheritance/index.md

@@ -57,7 +57,7 @@ The words "emphasized text" will not have another border (since the initial valu
 
 ## Notes
 
-The [`inherit`](/en-US/docs/Web/CSS/Reference/Values/inherit) keyword allows authors to explicitly specify inheritance. It works on both inherited and non-inherited properties.
+The {{cssxref("inherit")}} keyword allows authors to explicitly specify inheritance. It works on both inherited and non-inherited properties.
 
 You can control inheritance for all properties at once using the {{cssxref("all")}} shorthand property, which applies its value to all properties. For example:
 
@@ -99,7 +99,7 @@ We can see here another border around the word "emphasized text".
 
 ## See also
 
-- CSS values for controlling inheritance: [`inherit`](/en-US/docs/Web/CSS/Reference/Values/inherit), [`initial`](/en-US/docs/Web/CSS/Reference/Values/initial), [`revert`](/en-US/docs/Web/CSS/Reference/Values/revert), [`revert-layer`](/en-US/docs/Web/CSS/Reference/Values/revert-layer), and [`unset`](/en-US/docs/Web/CSS/Reference/Values/unset)
+- CSS values for controlling inheritance: {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("revert")}}, {{cssxref("revert-layer")}}, and {{cssxref("unset")}}
 - [CSS cascading and inheritance](/en-US/docs/Web/CSS/Guides/Cascade) module
 - [CSS error handling](/en-US/docs/Web/CSS/Guides/Syntax/Error_handling)
 - [Introduction to the CSS cascade](/en-US/docs/Web/CSS/Guides/Cascade/Introduction)

files/en-us/web/css/guides/cascade/introduction/index.md

@@ -39,7 +39,7 @@ In most browsers, the user (or reader) of the website can choose to override sty
 
 ### Cascade layers
 
-The cascade order is based on origin type. The cascade within each origin type is based on the declaration order of [cascade layers](/en-US/docs/Web/CSS/Reference/At-rules/@layer) within that type. For all origins - user-agent, author, or user - styles can be declared within or outside of named or anonymous layers. When declared using [`layer`, `layer()`](/en-US/docs/Web/CSS/Reference/At-rules/@import) or [`@layer`](/en-US/docs/Web/CSS/Reference/At-rules/@layer), styles are placed into the specified named layer, or into an anonymous layer if no name is provided. Styles declared outside of a layer are treated as being part of an anonymous last declared layer.
+The cascade order is based on origin type. The cascade within each origin type is based on the declaration order of [cascade layers](/en-US/docs/Web/CSS/Reference/At-rules/@layer) within that type. For all origins - user-agent, author, or user - styles can be declared within or outside of named or anonymous layers. When declared using [`layer`, `layer()`](/en-US/docs/Web/CSS/Reference/At-rules/@import) or {{cssxref("@layer")}}, styles are placed into the specified named layer, or into an anonymous layer if no name is provided. Styles declared outside of a layer are treated as being part of an anonymous last declared layer.
 
 Let's take a look at cascading origin type before diving into cascade layers within each origin type.
 

files/en-us/web/css/guides/cascade/property_value_processing/index.md

@@ -77,7 +77,7 @@ This involves:
 
 As a result of defaulting, every property is guaranteed to have a [specified value](#specified_value).
 
-Note that explicit defaulting keywords ([`initial`](/en-US/docs/Web/CSS/Reference/Values/initial), [`inherit`](/en-US/docs/Web/CSS/Reference/Values/inherit), [`unset`](/en-US/docs/Web/CSS/Reference/Values/unset), [`revert`](/en-US/docs/Web/CSS/Reference/Values/revert), [`revert-layer`](/en-US/docs/Web/CSS/Reference/Values/revert-layer)) are also resolved to their corresponding values to determine the [specified value](#specified_value).
+Note that explicit defaulting keywords ({{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}}, {{cssxref("revert-layer")}}) are also resolved to their corresponding values to determine the [specified value](#specified_value).
 
 ## Processing stages
 
@@ -282,6 +282,6 @@ CSS 2.0 defined _computed value_ as the last step in a property's calculation. C
 
 ## See also
 
-- CSS values for controlling inheritance: [`inherit`](/en-US/docs/Web/CSS/Reference/Values/inherit), [`initial`](/en-US/docs/Web/CSS/Reference/Values/initial), [`revert`](/en-US/docs/Web/CSS/Reference/Values/revert), [`revert-layer`](/en-US/docs/Web/CSS/Reference/Values/revert-layer), and [`unset`](/en-US/docs/Web/CSS/Reference/Values/unset)
+- CSS values for controlling inheritance: {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("revert")}}, {{cssxref("revert-layer")}}, and {{cssxref("unset")}}
 - [CSS cascading and inheritance](/en-US/docs/Web/CSS/Guides/Cascade) module
 - [CSS syntax](/en-US/docs/Web/CSS/Guides/Syntax) module

files/en-us/web/css/guides/cascade/specificity/index.md

@@ -28,13 +28,13 @@ The selector weight categories are listed here in the order of decreasing specif
 - TYPE column
   - : Includes [type selectors](/en-US/docs/Web/CSS/Reference/Selectors/Type_selectors), such as `p`, `h1`, and `td`, and pseudo-elements like `::before`, `::placeholder`, and all other selectors with double-colon notation. For each type or pseudo-element in a matching selector, add 0-0-1 to the weight value.
 - No value
-  - : The universal selector ({{CSSxRef("Universal_selectors", "*")}}) and the pseudo-class {{CSSxRef(":where", ":where()")}} and its parameters aren't counted when calculating the weight so their value is 0-0-0, but they do match elements. These selectors do not impact the specificity weight value.
+  - : The universal selector ({{CSSxRef("Universal_selectors", "*")}}) and the pseudo-class {{cssxref(":where()")}} and its parameters aren't counted when calculating the weight so their value is 0-0-0, but they do match elements. These selectors do not impact the specificity weight value.
 
 Combinators, such as {{CSSxRef("Next-sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", ">")}}, {{CSSxRef("Subsequent-sibling_combinator", "~")}}, [" "](/en-US/docs/Web/CSS/Reference/Selectors/Descendant_combinator), and {{CSSxRef("Column_combinator", "||")}}, may make a selector more specific in what is selected but they don't add any value to the specificity weight.
 
-The `&` nesting combinator doesn't add specificity weight, but nested rules do. In terms of specificity, and functionality, nesting is very similar to the {{CSSxRef(":is", ":is()")}} pseudo-class.
+The `&` nesting combinator doesn't add specificity weight, but nested rules do. In terms of specificity, and functionality, nesting is very similar to the {{cssxref(":is()")}} pseudo-class.
 
-Like nesting, the {{CSSxRef(":is", ":is()")}}, {{CSSxRef(":has", ":has()")}}, and negation ({{CSSxRef(":not", ":not()")}}) pseudo-classes themselves add no weight. The parameters in these selectors, however, do. The specificity weight of each comes from the selector parameter in the list of selectors with the highest specificity. Similarly, with nested selectors, the specificity weight added by the nested selector component is the selector in the comma-separated list of nested selectors with the highest specificity.
+Like nesting, the {{cssxref(":is()")}}, {{cssxref(":has()")}}, and negation ({{cssxref(":not()")}}) pseudo-classes themselves add no weight. The parameters in these selectors, however, do. The specificity weight of each comes from the selector parameter in the list of selectors with the highest specificity. Similarly, with nested selectors, the specificity weight added by the nested selector component is the selector in the comma-separated list of nested selectors with the highest specificity.
 
 The [`:not()`, `:is()`, `:has()` and CSS nesting exceptions](#the_is_not_has_and_css_nesting_exceptions) are discussed below.
 
@@ -122,7 +122,7 @@ input.myClass {
 
 ### The `:is()`, `:not()`, `:has()` and CSS nesting exceptions
 
-The matches-any pseudo-class {{CSSxRef(":is", ":is()")}}, the relational pseudo-class {{CSSxRef(":has", ":has()")}}, and the negation pseudo-class {{CSSxRef(":not", ":not()")}} are _not_ considered as pseudo-classes in the specificity weight calculation. They themselves don't add any weight to the specificity equation. However, the selector parameters passed into the pseudo-class parenthesis are part of the specificity algorithm; the weight of the matches-any and negation pseudo-class in the specificity value calculation is the weight of the parameter's [weight](#selector_weight_categories).
+The matches-any pseudo-class {{cssxref(":is()")}}, the relational pseudo-class {{cssxref(":has()")}}, and the negation pseudo-class {{cssxref(":not()")}} are _not_ considered as pseudo-classes in the specificity weight calculation. They themselves don't add any weight to the specificity equation. However, the selector parameters passed into the pseudo-class parenthesis are part of the specificity algorithm; the weight of the matches-any and negation pseudo-class in the specificity value calculation is the weight of the parameter's [weight](#selector_weight_categories).
 
 ```css
 p {
@@ -223,7 +223,7 @@ Instead of using `!important` to override foreign CSS (from external libraries,
 
 ### The `:where()` exception
 
-The specificity-adjustment pseudo-class {{CSSxRef(":where", ":where()")}} always has its specificity replaced with zero, `0-0-0`. It enables making CSS selectors very specific in what element is targeted without any increase to specificity.
+The specificity-adjustment pseudo-class {{cssxref(":where()")}} always has its specificity replaced with zero, `0-0-0`. It enables making CSS selectors very specific in what element is targeted without any increase to specificity.
 
 In creating third-party CSS to be used by developers who don't have access to edit your CSS, it's considered a good practice to create CSS with the lowest possible specificity. For example, if your theme includes the following CSS:
 

files/en-us/web/css/guides/cascading_variables/index.md

@@ -118,7 +118,7 @@ As the slider's value changes from 0 up to 360, the value of the `--hue` [custom
 ## Related concepts
 
 - [CSS Properties and Values API](/en-US/docs/Web/CSS/Guides/Properties_and_values_API) module
-  - [`@property`](/en-US/docs/Web/CSS/Reference/At-rules/@property) at-rule
+  - {{cssxref("@property")}} at-rule
   - [`CSS.registerProperty()`](/en-US/docs/Web/API/CSS/registerProperty_static) method
 
 ## Specifications

files/en-us/web/css/guides/cascading_variables/using_custom_properties/index.md

@@ -6,7 +6,7 @@ page-type: guide
 sidebar: cssref
 ---
 
-**Custom properties** (sometimes referred to as **CSS variables** or **cascading variables**) are entities defined by CSS authors that represent specific values to be reused throughout a document. They are set using the {{cssxref("@property")}} at-rule or by [custom property syntax](/en-US/docs/Web/CSS/Reference/Properties/--*) (e.g., **`--primary-color: blue;`**). Custom properties are accessed using the CSS {{cssxref("var", "var()")}} function (e.g., **`color: var(--primary-color);`**).
+**Custom properties** (sometimes referred to as **CSS variables** or **cascading variables**) are entities defined by CSS authors that represent specific values to be reused throughout a document. They are set using the {{cssxref("@property")}} at-rule or by [custom property syntax](/en-US/docs/Web/CSS/Reference/Properties/--*) (e.g., **`--primary-color: blue;`**). Custom properties are accessed using the CSS {{cssxref("var()")}} function (e.g., **`color: var(--primary-color);`**).
 
 Complex websites have very large amounts of CSS, and this often results in a lot of repeated CSS values. For example, it's common to see the same color used in hundreds of different places in stylesheets. Changing a color that's been duplicated in many places requires a search and replace across all rules and CSS files. Custom properties allow a value to be defined in one place, then referenced in multiple other places so that it's easier to work with. Another benefit is readability and semantics. For example, `--main-text-color` is easier to understand than the hexadecimal color `#00ff00`, especially if the color is used in different contexts.
 
@@ -15,8 +15,8 @@ The {{cssxref("@property")}} at-rule allows more control over the custom propert
 
 > [!NOTE]
 > Variables do not work inside media queries and container queries.
-> You can use the {{cssxref("var", "var()")}} function in any part of a value in any property on an element.
-> You cannot use {{cssxref("var", "var()")}} for property names, selectors, or anything aside from property values, which means you can't use it in a media query or container query.
+> You can use the {{cssxref("var()")}} function in any part of a value in any property on an element.
+> You cannot use {{cssxref("var()")}} for property names, selectors, or anything aside from property values, which means you can't use it in a media query or container query.
 
 ## Declaring custom properties
 
@@ -27,7 +27,7 @@ The following sections describe how to use these two methods.
 
 A custom property prefixed with two dashes begins with `--`, followed by the property name (e.g., `--my-property`), and a property value that can be any [valid CSS value](/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units).
 Like any other property, this is written inside a ruleset.
-The following example shows how to create a custom property `--main-bg-color` and uses a [`<named-color>`](/en-US/docs/Web/CSS/Reference/Values/named-color) value of `brown`:
+The following example shows how to create a custom property `--main-bg-color` and uses a {{cssxref("named-color")}} value of `brown`:
 
 ```css
 section {
@@ -52,7 +52,7 @@ This doesn't always have to be the case: you maybe have a good reason for limiti
 ### Using the `@property` at-rule
 
 The {{cssxref("@property")}} at-rule allows you to be more expressive with the definition of a custom property with the ability to associate a type with the property, set default values, and control inheritance.
-The following example creates a custom property called `--logo-color` which expects a [`<color>`](/en-US/docs/Web/CSS/Reference/Values/color_value):
+The following example creates a custom property called `--logo-color` which expects a {{cssxref("&lt;color&gt;")}}:
 
 ```css
 @property --logo-color {
@@ -67,7 +67,7 @@ You can read about how this works in the [CSS Properties and Values API](/en-US/
 
 ### Referencing custom properties with `var()`
 
-Regardless of which method you choose to define a custom property, you use them by referencing the property in a {{cssxref("var", "var()")}} function in place of a standard property value:
+Regardless of which method you choose to define a custom property, you use them by referencing the property in a {{cssxref("var()")}} function in place of a standard property value:
 
 ```css
 details {
@@ -293,7 +293,7 @@ The property is only set for the matching selector and its descendants.
 
 The `@property` at-rule lets you explicitly state whether the property inherits or not.
 The following example creates a custom property using the `@property` at-rule.
-Inheritance is disabled, there's a [`<color>`](/en-US/docs/Web/CSS/Reference/Values/color_value) data type defined, and an initial value of `teal`.
+Inheritance is disabled, there's a {{cssxref("&lt;color&gt;")}} data type defined, and an initial value of `teal`.
 
 The parent element sets `--box-color` to a value of `green` and uses `--box-color` as a value for its background color.
 The child element also uses `background-color: var(--box-color)`, and we would expect it to have the color `green` if inheritance was enabled (or if it was defined using the double dash syntax).

files/en-us/web/css/guides/colors/applying_color/index.md

@@ -190,7 +190,7 @@ CSS isn't the only web technology that supports color. Other examples include:
 
 ## See also
 
-- [`<color>`](/en-US/docs/Web/CSS/Reference/Values/color_value) data type
+- {{cssxref("&lt;color&gt;")}} data type
 - [CSS color values](/en-US/docs/Web/CSS/Guides/Colors/Color_values) guide
 - [Using color wisely](/en-US/docs/Web/CSS/Guides/Colors/Using_color_wisely)
 - [CSS color module](/en-US/docs/Web/CSS/Guides/Colors)

files/en-us/web/css/guides/colors/color_mixer/index.md

@@ -887,5 +887,5 @@ init();
 
 - {{CSSXref("<color>")}}
 - {{CSSXref("<color-interpolation-method>")}}
-- {{cssxref("<hue>")}}
+- {{cssxref("hue")}}
 - [CSS relative colors](/en-US/docs/Web/CSS/Guides/Colors/Using_relative_colors)