mdn · chrisdavidmills · Nov 17, 2025 · Nov 13, 2025 · Nov 16, 2025 · Nov 16, 2025
@@ -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")}}

@@ -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.)

@@ -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")}}

@@ -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
 

@@ -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.
 

@@ -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
 

@@ -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", "&lt;url&gt;")}} 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
 

@@ -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
 

@@ -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)

@@ -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
 

@@ -19,7 +19,7 @@ Refer to [any CSS property](/en-US/docs/Web/CSS/Reference#index) definition to s
 
 When no value for an **inherited property** has been specified on an element, the element gets the [computed value](/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing#computed_value) of that property on its parent element. Only the root element of the document gets the [initial value](/en-US/docs/Web/CSS/Guides/Cascade/Property_value_processing#initial_value) given in the property's summary.
 
-A typical example of an inherited property is the [`color`](/en-US/docs/Web/CSS/Reference/Properties/color) property. Consider the following style rules and the markup:
+A typical example of an inherited property is the {{cssxref("color")}} property. Consider the following style rules and the markup:
 
 ```css
 p {
@@ -33,7 +33,7 @@ p {
 
 {{EmbedLiveSample("Inherited properties","",40)}}
 
-The words "emphasized text" will appear green, since the `em` element has inherited the value of the [`color`](/en-US/docs/Web/CSS/Reference/Properties/color) property from the `p` element. It does _not_ get the initial value of the property (which is the color that is used for the root element when the page specifies no color).
+The words "emphasized text" will appear green, since the `em` element has inherited the value of the {{cssxref("color")}} property from the `p` element. It does _not_ get the initial value of the property (which is the color that is used for the root element when the page specifies no color).
 
 ## Non-inherited properties
 
@@ -53,13 +53,13 @@ p {
 
 {{EmbedLiveSample("Non-inherited properties","",40)}}
 
-The words "emphasized text" will not have another border (since the initial value of [`border-style`](/en-US/docs/Web/CSS/Reference/Properties/border-style) is `none`).
+The words "emphasized text" will not have another border (since the initial value of {{cssxref("border-style")}} is `none`).
 
 ## 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 [`all`](/en-US/docs/Web/CSS/Reference/Properties/all) shorthand property, which applies its value to all properties. For example:
+You can control inheritance for all properties at once using the {{cssxref("all")}} shorthand property, which applies its value to all properties. For example:
 
 ```css
 p {
@@ -69,11 +69,11 @@ p {
 }
 ```
 
-This reverts the style of the paragraphs' [`font`](/en-US/docs/Web/CSS/Reference/Properties/font) property to the user agent's default unless a user stylesheet exists, in which case that is used instead. Then it doubles the font size and applies a [`font-weight`](/en-US/docs/Web/CSS/Reference/Properties/font-weight) of `"bold"`.
+This reverts the style of the paragraphs' {{cssxref("font")}} property to the user agent's default unless a user stylesheet exists, in which case that is used instead. Then it doubles the font size and applies a {{cssxref("font-weight")}} of `"bold"`.
 
 ### Overriding inheritance, an example
 
-Using our previous example with [`border`](/en-US/docs/Web/CSS/Reference/Properties/border), if we explicitly set the inheritance with `inherit`, we get the following:
+Using our previous example with {{cssxref("border")}}, if we explicitly set the inheritance with `inherit`, we get the following:
 
 ```css
 p {
@@ -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 error handling](/en-US/docs/Web/CSS/Guides/Syntax/Error_handling)
 - [Introducing the CSS cascade](/en-US/docs/Web/CSS/Guides/Cascade/Introduction)
 - [Learn: Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts)

@@ -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 {{cssxref("@layer", "cascade layers")}} 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.
 
@@ -353,7 +353,7 @@ Finally, {{cssxref("@charset")}} obeys specific algorithms and isn't affected by
 
 Presentational attributes are attributes in the source document that can affect styling. For example, when included, the deprecated `align` attribute sets the alignment on several HTML elements and the `fill` attribute defines the color used to paint SVG shapes and text and defines the final state for SVG animations. While they are author styles, presentational attributes do not participate in the cascade.
 
-If the HTML presentation attribute is supported by the user agent, valid presentational attributes included in HTML and SVG, such as the [`align`](/en-US/docs/Web/HTML/Reference/Elements/img#align) or [`fill`](/en-US/docs/Web/SVG/Reference/Attribute/fill) attributes, are translated to the corresponding CSS rules (all SVG presentation attributes are supported as CSS properties) and inserted in the author stylesheet prior to any other styles with a specificity equal to `0`.
+If the HTML presentation attribute is supported by the user agent, valid presentational attributes included in HTML and SVG, such as the [`align`](/en-US/docs/Web/HTML/Reference/Elements/img#align) or {{svgattr("fill")}} attributes, are translated to the corresponding CSS rules (all SVG presentation attributes are supported as CSS properties) and inserted in the author stylesheet prior to any other styles with a specificity equal to `0`.
 
 Presentational attributes cannot be declared `!important`.