CSS guides: change css links to macros (#41922)

* CSS guides: change css links to macros

* svg macros

* error checking

* example height

* example height

Author: estelle

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

@@ -42,7 +42,7 @@ The CSS anchor positioning module also introduces the `anchor-scope` property. C
 - [`anchor-center`](/en-US/docs/Web/CSS/Guides/Anchor_positioning/Using#centering_on_the_anchor_using_anchor-center)
 - [`<anchor-side>`](/en-US/docs/Web/CSS/Reference/Values/anchor#anchor-side)
 - [`<anchor-size>`](/en-US/docs/Web/CSS/Reference/Values/anchor-size#anchor-size)
-- [`<position-area>`](/en-US/docs/Web/CSS/Reference/Values/position-area_value)
+- {{cssxref("&lt;position-area&gt;")}}
 - [`<try-size>`](/en-US/docs/Web/CSS/Reference/Properties/position-try-order#try-size)
 - [`<try-tactic>`](/en-US/docs/Web/CSS/Reference/Properties/position-try-fallbacks#try-tactic)
 
@@ -86,7 +86,7 @@ The CSS anchor positioning module also introduces the `anchor-scope` property. C
   - {{cssxref("margin-inline")}}
   - {{cssxref("margin-inline-end")}}
   - {{cssxref("margin-inline-start")}}
-  - [Inset properties](/en-US/docs/Glossary/Inset_properties) glossary term
+  - {{glossary("Inset properties")}} glossary term
 - [CSS positioned layout](/en-US/docs/Web/CSS/Guides/Positioned_layout) module:
   - {{cssxref("top")}}
   - {{cssxref("left")}}

files/en-us/web/css/guides/anchor_positioning/try_options_hiding/index.md

@@ -264,7 +264,7 @@ The `--try-fallback-name` is a developer-defined name for the position try fallb
 The `descriptor-list` defines the property values for that individual custom try fallback option, including how the positioned element should be placed and sized, and any margins. The limited list of property descriptors allowed includes:
 
 - {{cssxref("position-area")}}
-- [Inset properties](/en-US/docs/Glossary/Inset_properties)
+- {{glossary("Inset properties")}}
 - Margin properties (e.g., {{cssxref("margin-left")}}, {{cssxref("margin-block-start")}})
 - [self-alignment](/en-US/docs/Web/CSS/Guides/Anchor_positioning/Using#centering_on_the_anchor_using_anchor-center) properties
 - Sizing properties ({{cssxref("width")}}, {{cssxref("block-size")}}, etc.)

files/en-us/web/css/guides/anchor_positioning/using/index.md

@@ -142,7 +142,7 @@ anchor(<anchor-name> <anchor-side>, <fallback>)
 ```
 
 - `<anchor-name>`
-  - : The [`anchor-name`](/en-US/docs/Web/CSS/Reference/Properties/anchor-name) property value of the anchor element you want to position the element's side relative to. This is a `<dashed-ident>` value. If omitted, the element's **default anchor** is used. This is the anchor referenced in its [`position-anchor`](/en-US/docs/Web/CSS/Reference/Properties/position-anchor) property, or associated with the element via the non-standard [`anchor`](/en-US/docs/Web/HTML/Reference/Global_attributes/anchor) HTML attribute.
+  - : The {{cssxref("anchor-name")}} property value of the anchor element you want to position the element's side relative to. This is a `<dashed-ident>` value. If omitted, the element's **default anchor** is used. This is the anchor referenced in its {{cssxref("position-anchor")}} property, or associated with the element via the non-standard [`anchor`](/en-US/docs/Web/HTML/Reference/Global_attributes/anchor) HTML attribute.
     > [!NOTE]
     > Specifying an `<anchor-name>` positions the element relative to that anchor, but does not provide element association. While you can position an element's sides relative to multiple anchors by specifying [different `<anchor-name>` values](/en-US/docs/Web/CSS/Reference/Values/anchor#positioning_an_element_relative_to_multiple_anchors) inside different `anchor()` functions on the same element, the positioned element is only associated with a single anchor.
 
@@ -306,7 +306,7 @@ If you only specify one value, the effect is different depending on which value
 - A value of `center` acts as if both values are set to `center` (so, `center center`).
 
 > [!NOTE]
-> See the [`<position-area>`](/en-US/docs/Web/CSS/Reference/Values/position-area_value) value reference page for a detailed description of all the available values. Mixing a logical value with a physical value will invalidate the declaration.
+> See the {{cssxref("&lt;position-area&gt;")}} value reference page for a detailed description of all the available values. Mixing a logical value with a physical value will invalidate the declaration.
 
 Let's demonstrate some of these values; this example uses the same HTML and base CSS styes as the previous example, except that we've included a {{htmlelement("select")}} element to enable changing the positioned element's `position-area` value.
 
@@ -553,7 +553,7 @@ anchor-size(<anchor-name> <anchor-size>, <length-percentage>)
 ```
 
 - `<anchor-name>`
-  - : The `<dashed-ident>` name set as the value of the [`anchor-name`](/en-US/docs/Web/CSS/Reference/Properties/anchor-name) property of the anchor element you want to size the element relative to. If omitted, the element's **default anchor**, which is the anchor referenced in the [`position-anchor`](/en-US/docs/Web/CSS/Reference/Properties/position-anchor) property, is used.
+  - : The `<dashed-ident>` name set as the value of the {{cssxref("anchor-name")}} property of the anchor element you want to size the element relative to. If omitted, the element's **default anchor**, which is the anchor referenced in the {{cssxref("position-anchor")}} property, is used.
 - [`<anchor-size>`](/en-US/docs/Web/CSS/Reference/Values/anchor-size#anchor-size)
   - : Specifies the dimension of the anchor element that the positioned element will be sized relative to. This can be expressed using physical (`width` or `height`) or logical (`inline`, `block`, `self-inline`, or `self-block`) values.
 - {{cssxref("length-percentage")}}

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("&lt;easing-function&gt;")}} 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/animations/using/index.md

@@ -31,7 +31,7 @@ The sub-properties of the {{cssxref("animation")}} property are:
 - {{cssxref("animation-fill-mode")}}
   - : Specifies how an animation applies styles to its target before and after it runs.
     > [!NOTE]
-    > In the case of animation [forwards](/en-US/docs/Web/CSS/Reference/Properties/animation-fill-mode#forwards) fill mode, animated properties behave as if included in a set [`will-change`](/en-US/docs/Web/CSS/Reference/Properties/will-change) property value. If a new stacking context was created during the animation, the target element retains the stacking context after the animation has finished.
+    > In the case of animation [forwards](/en-US/docs/Web/CSS/Reference/Properties/animation-fill-mode#forwards) fill mode, animated properties behave as if included in a set {{cssxref("will-change")}} property value. If a new stacking context was created during the animation, the target element retains the stacking context after the animation has finished.
 - {{cssxref("animation-iteration-count")}}
   - : Specifies the number of times an animation should repeat.
 - {{cssxref("animation-name")}}
@@ -399,7 +399,7 @@ And here's the live output.
 
 ### Animating display and content-visibility
 
-This example demonstrates how [`display`](/en-US/docs/Web/CSS/Reference/Properties/display) and [`content-visibility`](/en-US/docs/Web/CSS/Reference/Properties/content-visibility) can be animated. This behavior is useful for creating entry/exit animations where you want to for example remove a container from the DOM with `display: none`, but have it fade out smoothly with [`opacity`](/en-US/docs/Web/CSS/Reference/Properties/opacity) rather than disappearing immediately.
+This example demonstrates how {{cssxref("display")}} and {{cssxref("content-visibility")}} can be animated. This behavior is useful for creating entry/exit animations where you want to for example remove a container from the DOM with `display: none`, but have it fade out smoothly with {{cssxref("opacity")}} rather than disappearing immediately.
 
 Supporting browsers animate `display` and `content-visibility` with a variation on the [discrete animation type](/en-US/docs/Web/CSS/Guides/Animations/Animatable_properties#discrete). This generally means that properties will flip between two values 50% of the way through animating between the two.
 

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

@@ -109,8 +109,8 @@ The CSS basic user interface module also defines the {{CSSxRef("caret")}}, `nav-
 
 ## Related concepts
 
-- CSS [`cursor`](/en-US/docs/Web/CSS/Reference/Properties/cursor) property
-- SVG [`cursor`](/en-US/docs/Web/SVG/Reference/Attribute/cursor) attribute
+- CSS {{cssxref("cursor")}} property
+- SVG {{svgattr("cursor")}} attribute
 - CSS {{CSSxRef(":focus")}}, {{CSSxRef(":focus-within")}}, and {{CSSxRef(":focus-visible")}} pseudoclasses
 - {{DOMXref("CaretPosition")}} Interface
 

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

@@ -221,7 +221,7 @@ The CSS borders and box decorations module level 4 also introduces the `border-s
 - {{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
+- {{cssxref("&lt;image&gt;")}} data type
 - [`<position>`](/en-US/docs/Web/CSS/Reference/Properties/position) data type
 - [`currentColor`](/en-US/docs/Web/CSS/Reference/Values/color_value#currentcolor_keyword) keyword
 

files/en-us/web/css/guides/box_alignment/in_block_abspos_tables/index.md

@@ -12,7 +12,7 @@ The [CSS box alignment](/en-US/docs/Web/CSS/Guides/Box_alignment) module details
 
 The {{cssxref("justify-content")}} property does not apply to block containers or table cells.
 
-The {{cssxref("align-content")}} property applies to the block axis in order to align the contents of the box within its container. If a content distribution method such as `space-between`, `space-around` or `space-evenly` is requested then the fallback alignment will be used, as the content is treated as a single [alignment subject](/en-US/docs/Glossary/Alignment_Subject).
+The {{cssxref("align-content")}} property applies to the block axis in order to align the contents of the box within its container. If a content distribution method such as `space-between`, `space-around` or `space-evenly` is requested then the fallback alignment will be used, as the content is treated as a single {{glossary("alignment subject")}}.
 
 ## justify-self
 

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("&lt;box-edge&gt;")}}
   - [`<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/index.md

@@ -76,7 +76,7 @@ The opposite also occurs. Sometimes there are no declarations defining the value
   - : The most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts are resolved.
 
 - [Learn: Cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers)
-  - : Introduction to [cascade layers](/en-US/docs/Web/CSS/Reference/At-rules/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/Guides/Cascade/Introduction) and [CSS specificity](/en-US/docs/Web/CSS/Guides/Cascade/Specificity).
+  - : Introduction to {{cssxref("@layer", "cascade layers")}}, a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/Guides/Cascade/Introduction) and [CSS specificity](/en-US/docs/Web/CSS/Guides/Cascade/Specificity).
 
 ## Related concepts