chore: Replace links with cssxref macro in the learn area

files/en-us/learn_web_development/core/css_layout/flexbox/index.md

@@ -696,7 +696,7 @@ Have a look at what effect this has and remove it again when you've finished.
 - The value we've used above, `space-around`, is useful — it distributes all the items evenly along the main axis with a bit of space left at either end.
 - There is another value, `space-between`, which is very similar to `space-around` except that it doesn't leave any space at either end.
 
-The [`justify-items`](/en-US/docs/Web/CSS/Reference/Properties/justify-items) property is ignored in flexbox layouts.
+The {{cssxref("justify-items")}} property is ignored in flexbox layouts.
 
 We'd like to encourage you to play with these values to see how they work before you continue.
 

files/en-us/learn_web_development/core/css_layout/responsive_design/index.md

@@ -395,7 +395,7 @@ h1 {
 
 The problem with doing the above is that the user loses the ability to zoom any text set using the `vw` unit, as that text is always related to the size of the viewport. **Therefore you should never set text using viewport units alone**.
 
-There is a solution, and it involves using [`calc()`](/en-US/docs/Web/CSS/Reference/Values/calc). If you add the `vw` unit to a value set using a fixed size such as `em`s or `rem`s then the text will still be zoomable. Essentially, the `vw` unit adds on top of that zoomed value:
+There is a solution, and it involves using {{cssxref("calc()")}}. If you add the `vw` unit to a value set using a fixed size such as `em`s or `rem`s then the text will still be zoomable. Essentially, the `vw` unit adds on top of that zoomed value:
 
 ```css
 h1 {

files/en-us/learn_web_development/core/css_layout/supporting_older_browsers/index.md

@@ -156,7 +156,7 @@ Now that you have worked through our articles on CSS layout, it's time to test y
 
 ## See also
 
-- [`@supports`](/en-US/docs/Web/CSS/Reference/At-rules/@supports) at-rule
+- {{cssxref("@supports")}} at-rule
 - [CSS at-rules](/en-US/docs/Web/CSS/Guides/Syntax/At-rules)
 - [Using feature queries](/en-US/docs/Web/CSS/Guides/Conditional_rules/Using_feature_queries)
 - [CSS conditional rules](/en-US/docs/Web/CSS/Guides/Conditional_rules) module

files/en-us/learn_web_development/core/frameworks_libraries/ember_getting_started/index.md

@@ -162,7 +162,7 @@ Installing shared assets, as we're about to do, isn't normally a required step f
 
 3. Next, find the [ember-cli-build.js](https://github.com/ember-cli/ember-cli/blob/master/packages/app-blueprint/files/ember-cli-build.js) file inside the todomvc directory (it's right there inside the root) and open it in your chosen code editor. ember-cli-build.js is responsible for configuring details about how your project is built — including bundling all your files together, asset minification, and creating sourcemaps — with reasonable defaults, so you don't typically need to worry about this file.
 
-   We will however add lines to the ember-cli-build.js file to import our shared CSS files, so that they become part of our build without having to explicitly [`@import`](/en-US/docs/Web/CSS/Reference/At-rules/@import) them into the `app.css` file (this would require URL rewrites at build time and therefore be less efficient and more complicated to set up).
+   We will however add lines to the ember-cli-build.js file to import our shared CSS files, so that they become part of our build without having to explicitly {{cssxref("@import")}} them into the `app.css` file (this would require URL rewrites at build time and therefore be less efficient and more complicated to set up).
 
 4. In `ember-cli-build.js`, find the following code:
 

files/en-us/learn_web_development/core/frameworks_libraries/react_accessibility/index.md

@@ -51,9 +51,9 @@ To improve the experience for keyboard and assistive technology users, we should
 
 If you click the "All", "Active", or "Completed" filter buttons with your mouse, you _won't_ see a visible focus indicator, but you will do if you move between them with the <kbd>Tab</kbd> key on your keyboard. Don't worry — your code isn't broken!
 
-Our CSS file uses the [`:focus-visible`](/en-US/docs/Web/CSS/Reference/Selectors/:focus-visible) pseudo-class to provide custom styling for the focus indicator, and the browser uses a set of internal rules to determine when to show it to the user. Generally, the browser _will_ show a focus indicator in response to keyboard input, and _might_ show it in response to mouse input. `<button>` elements _don't_ show a focus indicator in response to mouse input, while `<input>` elements _do_.
+Our CSS file uses the {{cssxref(":focus-visible")}} pseudo-class to provide custom styling for the focus indicator, and the browser uses a set of internal rules to determine when to show it to the user. Generally, the browser _will_ show a focus indicator in response to keyboard input, and _might_ show it in response to mouse input. `<button>` elements _don't_ show a focus indicator in response to mouse input, while `<input>` elements _do_.
 
-The behavior of `:focus-visible` is more selective than the older [`:focus`](/en-US/docs/Web/CSS/Reference/Selectors/:focus) pseudo-class, with which you might be more familiar. `:focus` shows a focus indicator in many more situations, and you can use it instead of or in combination with `:focus-visible` if you prefer.
+The behavior of `:focus-visible` is more selective than the older {{cssxref(":focus")}} pseudo-class, with which you might be more familiar. `:focus` shows a focus indicator in many more situations, and you can use it instead of or in combination with `:focus-visible` if you prefer.
 
 ## Focusing between templates
 

files/en-us/learn_web_development/core/scripting/events/index.md

@@ -107,7 +107,7 @@ btn.addEventListener("click", () => {
 The HTML {{HTMLElement("button")}} element will fire a `click` event when the user clicks it. We call the `addEventListener()` method on it to add an event listener; this takes two parameters:
 
 - the string `"click"`, to indicate that we want to listen to the `click` event. Buttons can fire lots of other events, such as [`"mouseover"`](/en-US/docs/Web/API/Element/mouseover_event) when the user moves their mouse over the button, or [`"keydown"`](/en-US/docs/Web/API/Element/keydown_event) when the user presses a key and the button is focused.
-- a function to call when the event happens. In our case, the defined anonymous function generates a random RGB color and sets the [`background-color`](/en-US/docs/Web/CSS/Reference/Properties/background-color) of the page [`<body>`](/en-US/docs/Web/HTML/Reference/Elements/body) to that color.
+- a function to call when the event happens. In our case, the defined anonymous function generates a random RGB color and sets the {{cssxref("background-color")}} of the page [`<body>`](/en-US/docs/Web/HTML/Reference/Elements/body) to that color.
 
 You could also create a separate named function, and reference that in the second parameter of `addEventListener()`, like this:
 

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

@@ -176,7 +176,7 @@ In the example below we have used two different values for filter. The `first` i
 
 The second is `grayscale()`; by using a percentage we are setting how much color we want to be removed.
 
-Play with the percentage and pixel parameters in the example below to see how the images change. You could also swap the values for some others. Try `contrast(200%)`, `invert(100%)` or `hue-rotate(20deg)` on the live example above. Take a look at the MDN page for [`filter`](/en-US/docs/Web/CSS/Reference/Properties/filter) for many other options you could try.
+Play with the percentage and pixel parameters in the example below to see how the images change. You could also swap the values for some others. Try `contrast(200%)`, `invert(100%)` or `hue-rotate(20deg)` on the live example above. Take a look at the MDN page for {{cssxref("filter")}} for many other options you could try.
 
 ```html live-sample___filter
 <div class="wrapper">
@@ -230,7 +230,7 @@ img {
 
 {{EmbedLiveSample("filter", "", "260px")}}
 
-You can apply filters to any element and not just images. Some of the filter options available do very similar things to other CSS features, for example `drop-shadow()` works in a very similar way and gives a similar effect to [`box-shadow`](/en-US/docs/Web/CSS/Reference/Properties/box-shadow) or [`text-shadow`](/en-US/docs/Web/CSS/Reference/Properties/text-shadow). The really nice thing about filters however, is that they work on the exact shapes of the content inside the box, not just the box itself as one big chunk, so it is worth knowing the difference.
+You can apply filters to any element and not just images. Some of the filter options available do very similar things to other CSS features, for example `drop-shadow()` works in a very similar way and gives a similar effect to {{cssxref("box-shadow")}} or {{cssxref("text-shadow")}}. The really nice thing about filters however, is that they work on the exact shapes of the content inside the box, not just the box itself as one big chunk, so it is worth knowing the difference.
 
 In this next example we are applying our filter to a box, and comparing it to a box shadow. As you can see, the drop-shadow filter follows the exact shape of the text and border dashes. The box shadow just follows the square of the box.
 

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

@@ -37,11 +37,11 @@ In this lesson, we will take a look at some of the creative things you can do wi
 
 ## Background colors
 
-The {{cssxref("background-color")}} property defines the background color on any element in CSS. The property accepts any valid [`<color>`](/en-US/docs/Web/CSS/Reference/Values/color_value). A `background-color` extends underneath the content and padding box of the element.
+The {{cssxref("background-color")}} property defines the background color on any element in CSS. The property accepts any valid {{cssxref("&lt;color&gt;")}}. A `background-color` extends underneath the content and padding box of the element.
 
 In the example below, we have used various color values to add a background color to the box, a heading, and a {{htmlelement("span")}} element.
 
-Try editing the example and swapping out the specified colors with any available [`<color>`](/en-US/docs/Web/CSS/Reference/Values/color_value) values.
+Try editing the example and swapping out the specified colors with any available {{cssxref("&lt;color&gt;")}} values.
 
 ```html live-sample___color
 <div class="box">
@@ -268,7 +268,7 @@ Use the example below to play around with these values and move the star around
 
 A gradient — when used for a background — acts just like an image and is also set by using the {{cssxref("background-image")}} property.
 
-You can find out about the different types of gradient value and things you can do with them on the MDN page for the [`<gradient>`](/en-US/docs/Web/CSS/Reference/Values/gradient) data type.
+You can find out about the different types of gradient value and things you can do with them on the MDN page for the {{cssxref("gradient")}} data type.
 
 Try some different gradient values in the example below. Initially, we have a linear gradient that is stretched over the whole first box, and a radial gradient with a set size, repeating over the second box.
 

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

@@ -9,7 +9,7 @@ This lesson aims to introduce you to [cascade layers](/en-US/docs/Web/CSS/Refere
 
 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.
 
-Cascade layers are most relevant when you're working with CSS from multiple sources when there are conflicting CSS selectors and competing specificities, or when you're considering using [`!important`](/en-US/docs/Web/CSS/Reference/Values/important).
+Cascade layers are most relevant when you're working with CSS from multiple sources when there are conflicting CSS selectors and competing specificities, or when you're considering using {{cssxref("important", "!important")}}.
 
 <table>
   <tbody>
@@ -41,7 +41,7 @@ To understand cascade layers, you must understand the CSS cascade well. The sect
 The 'C' in CSS stands for "Cascading". It is the method by which styles cascade together. The user agent runs through several clearly defined steps to determine the values assigned to every property for every element. We will briefly list these steps here and then dig deeper into step 4, **Cascade layers**, which is what you came here to learn:
 
 1. **Relevance:** Find all the declaration blocks with a selector match for each element.
-2. **Importance:** Sort rules based on whether they are normal or important. Important styles are those that have the [`!important`](/en-US/docs/Web/CSS/Reference/Values/important) flag set.
+2. **Importance:** Sort rules based on whether they are normal or important. Important styles are those that have the {{cssxref("important", "!important")}} flag set.
 3. **Origin:** Within each of the two importance buckets, sort rules by author, user, or user-agent origin.
 4. **Cascade layers:** Within each of the six origin importance buckets, sort by cascade layer. The layer order for normal declarations is from the first layer created to the last, followed by unlayered normal styles. This order is inverted for important styles, with unlayered important styles having the lowest precedence.
 5. **Specificity:** For competing styles in the origin layer with precedence, sort declarations by [specificity](/en-US/docs/Web/CSS/Guides/Cascade/Specificity).
@@ -69,7 +69,7 @@ The "user-agent" is the browser. The "user" is the site visitor. The "author" is
 
 For each property, the declaration that "wins" is the one from the origin with precedence based on the weight (normal or important). Ignoring layers for the moment, the value from the origin with the highest precedence gets applied. If the winning origin has more than one property declaration for an element, the [specificity](/en-US/docs/Web/CSS/Guides/Cascade/Specificity) of the selectors for those competing property values are compared. Specificity is never compared between selectors from different origins.
 
-In the example below, there are two links. The first has no author styles applied, so only user-agent styles are applied (and your personal user styles, if any). The second has [`text-decoration`](/en-US/docs/Web/CSS/Reference/Properties/text-decoration) and [`color`](/en-US/docs/Web/CSS/Reference/Properties/color) set by author styles even though the selector in the author stylesheet has a specificity of [`0-0-0`](/en-US/docs/Web/CSS/Guides/Cascade/Specificity#selector_weight_categories). The reason why author styles "win" is because when there are conflicting styles from different origins, the rules from the origin with precedence are applied, irrespective of the specificity in the origin that doesn't have precedence.
+In the example below, there are two links. The first has no author styles applied, so only user-agent styles are applied (and your personal user styles, if any). The second has {{cssxref("text-decoration")}} and {{cssxref("color")}} set by author styles even though the selector in the author stylesheet has a specificity of [`0-0-0`](/en-US/docs/Web/CSS/Guides/Cascade/Specificity#selector_weight_categories). The reason why author styles "win" is because when there are conflicting styles from different origins, the rules from the origin with precedence are applied, irrespective of the specificity in the origin that doesn't have precedence.
 
 ```html live-sample___basic-cascade
 <p><a href="https://example.org">User agent styles</a></p>
@@ -139,9 +139,9 @@ The ability to create nested layers also removes the worry of having conflicting
 
 Layers can be created using any one of the following methods:
 
-- The [`@layer`](/en-US/docs/Web/CSS/Reference/At-rules/@layer) statement at-rule, declaring layers using `@layer` followed by the names of one or more layers. This creates named layers without assigning any styles to them.
+- The {{cssxref("@layer")}} statement at-rule, declaring layers using `@layer` followed by the names of one or more layers. This creates named layers without assigning any styles to them.
 - The `@layer` block at-rule, in which all styles within a block are added to a named or unnamed layer.
-- The [`@import`](/en-US/docs/Web/CSS/Reference/At-rules/@import) rule with the `layer` keyword or `layer()` function, which assigns the contents of the imported file into that layer.
+- The {{cssxref("@import")}} rule with the `layer` keyword or `layer()` function, which assigns the contents of the imported file into that layer.
 
 All three methods create a layer if a layer with that name has not already been initialized. If no layer name is provided in the `@layer` at-rule or `@import` with `layer()`, a new anonymous (unnamed) layer is created.
 
@@ -154,7 +154,7 @@ Let's cover the three ways of creating a layer in a little more detail before di
 
 The order of layers is set by the order in which the layers appear in your CSS. Declaring layers using `@layer` followed by the names of one or more layers without assigning any styles is one way to define the [layer order](#determining_the_precedence_based_on_the_order_of_layers).
 
-The [`@layer`](/en-US/docs/Web/CSS/Reference/At-rules/@layer) CSS at-rule is used to declare a cascade layer and to define the order of precedence when there are multiple cascade layers. The following at-rule declares three layers, in the order listed:
+The {{cssxref("@layer")}} CSS at-rule is used to declare a cascade layer and to define the order of precedence when there are multiple cascade layers. The following at-rule declares three layers, in the order listed:
 
 ```css
 @layer theme, layout, utilities;
@@ -294,9 +294,9 @@ In wide screens, the `site` layer is declared in the first line, meaning `site`
 
 ### Importing style sheets into named and anonymous layers with @import
 
-The [`@import`](/en-US/docs/Web/CSS/Reference/At-rules/@import) rule allows users to import style rules from other style sheets either directly into a CSS file or into a {{htmlelement('style')}} element.
+The {{cssxref("@import")}} rule allows users to import style rules from other style sheets either directly into a CSS file or into a {{htmlelement('style')}} element.
 
-When importing stylesheets, the `@import` statement must be defined before any CSS styles within the stylesheet or `<style>` block. The `@import` statement must come first, before any styles, but can be preceded by an `@layer` at-rule that creates one or more layers without assigning any styles to the layers. (`@import` can also be preceded by an [`@charset`](/en-US/docs/Web/CSS/Reference/At-rules/@charset) rule.)
+When importing stylesheets, the `@import` statement must be defined before any CSS styles within the stylesheet or `<style>` block. The `@import` statement must come first, before any styles, but can be preceded by an `@layer` at-rule that creates one or more layers without assigning any styles to the layers. (`@import` can also be preceded by an {{cssxref("@charset")}} rule.)
 
 You can import a stylesheet into a named layer, a nested named layer, or an anonymous layer. The following layer imports the style sheets into a `components` layer, a nested `dialog` layer within the `components` layer, and an un-named layer, respectively: