[pull] main from mdn:main

files/en-us/glossary/block-level_content/index.md

@@ -11,7 +11,7 @@ In a block layout, boxes are laid out one after the other, vertically, beginning
 A block-level element always starts on a new line. In horizontal writing modes, like English or Arabic, it occupies the entire horizontal space of its parent element (container) and vertical space equal to the height of its contents, thereby creating a "block".
 
 > [!NOTE]
-> The above behavior of block layout changes if the containing block's [`writing-mode`](/en-US/docs/Web/CSS/writing-mode) is set to value other than [the default value](/en-US/docs/Web/CSS/writing-mode#formal_definition).
+> The above behavior of block layout changes if the containing block's [`writing-mode`](/en-US/docs/Web/CSS/Reference/Properties/writing-mode) is set to value other than [the default value](/en-US/docs/Web/CSS/Reference/Properties/writing-mode#formal_definition).
 
 > [!NOTE]
 > HTML (_HyperText Markup Language_) elements historically were categorized as either "block-level" elements or "inline" elements. As a presentational characteristic, this is now specified by CSS.
@@ -46,4 +46,4 @@ p {
   - {{glossary("Inline-level content")}}
 - [Block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context)
 - {{cssxref("display")}}
-- [`writing-mode`](/en-US/docs/Web/CSS/writing-mode)
+- [`writing-mode`](/en-US/docs/Web/CSS/Reference/Properties/writing-mode)

files/en-us/glossary/composite_operation/index.md

@@ -18,5 +18,5 @@ In CSS, the value of a property in a CSS rule is the _underlying value_ of that
 
 ## See also
 
-- [`animation-composition`](/en-US/docs/Web/CSS/animation-composition)
+- [`animation-composition`](/en-US/docs/Web/CSS/Reference/Properties/animation-composition)
 - [`KeyframeEffect.composite`](/en-US/docs/Web/API/KeyframeEffect/composite)

files/en-us/glossary/first_paint/index.md

@@ -5,7 +5,7 @@ page-type: glossary-definition
 sidebar: glossarysidebar
 ---
 
-**First Paint** is the time between navigation and when the browser first renders pixels to the screen, rendering anything that is visually different from the default [background color](/en-US/docs/Web/CSS/background-color) of the [body](/en-US/docs/Web/API/Document/body). It is the first key moment in page load and will answer the question "Has the browser started to render the page?"
+**First Paint** is the time between navigation and when the browser first renders pixels to the screen, rendering anything that is visually different from the default [background color](/en-US/docs/Web/CSS/Reference/Properties/background-color) of the [body](/en-US/docs/Web/API/Document/body). It is the first key moment in page load and will answer the question "Has the browser started to render the page?"
 
 ## See also
 

files/en-us/glossary/ink_overflow/index.md

@@ -7,7 +7,7 @@ sidebar: glossarysidebar
 
 The **ink overflow** of a box refers to the part of the box and its contents that creates a visual effect outside of the box's border box. Being visual only, ink overflow does not affect layout as it has no impact on box model properties.
 
-Ink overflow is the overflow of painting effects such as [box shadows](/en-US/docs/Web/CSS/box-shadow), [border images](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders), [text decoration](/en-US/docs/Web/CSS/CSS_text_decoration), [outlines](/en-US/docs/Web/CSS/outline), etc. that do not affect layout or otherwise extend the scrollable overflow area. Ink overflow is also the overhanging of glyphs, such as ascenders and descenders extending outside the em box.
+Ink overflow is the overflow of painting effects such as [box shadows](/en-US/docs/Web/CSS/Reference/Properties/box-shadow), [border images](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders), [text decoration](/en-US/docs/Web/CSS/CSS_text_decoration), [outlines](/en-US/docs/Web/CSS/Reference/Properties/outline), etc. that do not affect layout or otherwise extend the scrollable overflow area. Ink overflow is also the overhanging of glyphs, such as ascenders and descenders extending outside the em box.
 
 As {{ glossary("replaced elements")}} always establish an independent [formatting context](/en-US/docs/Web/CSS/CSS_display/Introduction_to_formatting_contexts), any overflow of replaced content is always ink overflow (as opposed to [scrollable overflow](/en-US/docs/Learn_web_development/Core/Styling_basics/Overflow)).
 

files/en-us/glossary/raster_image/index.md

@@ -7,4 +7,4 @@ sidebar: glossarysidebar
 
 A **_raster image_** is an image file defined as a grid of pixels. They're also referred to as _bitmaps_. Common raster image formats on the Web are {{Glossary("JPEG")}}, {{Glossary("PNG")}}, {{Glossary("GIF")}}, and [ICO](<https://en.wikipedia.org/wiki/ICO_(file_format)>).
 
-Raster image files usually contain one set of dimensions, but the ICO and CUR formats, used for favicons and [CSS cursor images](/en-US/docs/Web/CSS/cursor), can contain multiple sizes.
+Raster image files usually contain one set of dimensions, but the ICO and CUR formats, used for favicons and [CSS cursor images](/en-US/docs/Web/CSS/Reference/Properties/cursor), can contain multiple sizes.

files/en-us/glossary/vendor_prefix/index.md

@@ -30,7 +30,7 @@ Sample usage:
 transition: all 4s ease;
 ```
 
-If you encounter the above code in a code base, you can safely remove all but the last line. All browsers support [transitions](/en-US/docs/Web/CSS/transition#browser_compatibility) without vendor prefixes:
+If you encounter the above code in a code base, you can safely remove all but the last line. All browsers support [transitions](/en-US/docs/Web/CSS/Reference/Properties/transition#browser_compatibility) without vendor prefixes:
 
 ```css
 transition: all 4s ease;

files/en-us/learn_web_development/core/accessibility/html/index.md

@@ -492,7 +492,7 @@ Links (the [`<a>`](/en-US/docs/Web/HTML/Reference/Elements/a) element with an `h
 
 ### Link styling
 
-By default, links are visually different from other text in both color and [text-decoration](/en-US/docs/Web/CSS/text-decoration), with links being blue and underlined by default, purple and underlined if visited, and with a [focus-ring](/en-US/docs/Web/CSS/:focus) when they receive keyboard focus.
+By default, links are visually different from other text in both color and [text-decoration](/en-US/docs/Web/CSS/Reference/Properties/text-decoration), with links being blue and underlined by default, purple and underlined if visited, and with a [focus-ring](/en-US/docs/Web/CSS/:focus) when they receive keyboard focus.
 
 Color should not be used as the sole method of distinguishing links from non-linking content. Link text color, like all text, has to be significantly different from the background color ([a 4.5:1 contrast](/en-US/docs/Web/Accessibility/Guides/Understanding_WCAG/Perceivable/Color_contrast)). In addition, links should visually be significantly different from non-linking text, with a minimum contrast requirement of 3:1 between link text and surrounding text and between default, visited, and focus/active states and a 4.5:1 contrast between all those state colors and the background color.
 

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

@@ -169,9 +169,9 @@ This single declaration gives us everything we need. Incredible, right? We have
 
 Let's recap what's happening here. Adding a {{cssxref("display")}} value of `flex` to an element makes it a flex container. The container is displayed as [Block-level content](/en-US/docs/Glossary/Block-level_content) in terms of how it interacts with the rest of the page. When the element is converted to a flex container, its children are converted to (and laid out as) flex items.
 
-You can make the container inline using an [outside `display` value](/en-US/docs/Web/CSS/display#outside) (e.g., `display: inline flex`), which affects how the container itself is laid out in the page.
+You can make the container inline using an [outside `display` value](/en-US/docs/Web/CSS/Reference/Properties/display#outside) (e.g., `display: inline flex`), which affects how the container itself is laid out in the page.
 The legacy `inline-flex` display value displays the container as inline as well.
-We'll focus on how the contents of the container behave in this tutorial, but if you want to see the effect of inline versus block layout, you can have a look at the [value comparison](/en-US/docs/Web/CSS/display#display_value_comparison) on the `display` property page.
+We'll focus on how the contents of the container behave in this tutorial, but if you want to see the effect of inline versus block layout, you can have a look at the [value comparison](/en-US/docs/Web/CSS/Reference/Properties/display#display_value_comparison) on the `display` property page.
 
 The next sections explain in more detail what flex items are and what happens inside an element when you make it a flex container.
 
@@ -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/justify-items) property is ignored in flexbox layouts.
+The [`justify-items`](/en-US/docs/Web/CSS/Reference/Properties/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/introduction/index.md

@@ -53,7 +53,7 @@ By default, a [block-level element](/en-US/docs/Glossary/Block-level_content)'s
 
 If you want to control the `display` property of an inline-level element in this manner, use CSS to set it to behave like a block-level element (e.g., with `display: block;` or `display: inline-block;`, which mixes characteristics from both).
 
-That explains how elements are structured individually, but how about the way they're structured when they interact with one another? The normal layout flow (mentioned in the layout introduction article) is the system by which elements are placed inside the browser's viewport. By default, block-level elements are laid out in the _block flow direction_, which is based on the parent's [writing mode](/en-US/docs/Web/CSS/writing-mode) (_initial_: horizontal-tb). Each element will appear on a new line below the last one, with each one separated by whatever margin that's been specified. In English, for example, (or any other horizontal, top to bottom writing mode) block-level elements are laid out vertically.
+That explains how elements are structured individually, but how about the way they're structured when they interact with one another? The normal layout flow (mentioned in the layout introduction article) is the system by which elements are placed inside the browser's viewport. By default, block-level elements are laid out in the _block flow direction_, which is based on the parent's [writing mode](/en-US/docs/Web/CSS/Reference/Properties/writing-mode) (_initial_: horizontal-tb). Each element will appear on a new line below the last one, with each one separated by whatever margin that's been specified. In English, for example, (or any other horizontal, top to bottom writing mode) block-level elements are laid out vertically.
 
 Inline elements behave differently. They don't appear on new lines; instead, they all sit on the same line along with any adjacent (or wrapped) text content as long as there is space for them to do so inside the width of the parent block level element. If there isn't space, then the overflowing content will move down to a new line.
 

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

@@ -659,7 +659,7 @@ body {
 
 {{ EmbedLiveSample('Scrolling_index', '100%', 200) }}
 
-Sticky elements are "sticky" relative to the nearest ancestor with a "scrolling mechanism", which is determined by its ancestors' [overflow](/en-US/docs/Web/CSS/overflow) property.
+Sticky elements are "sticky" relative to the nearest ancestor with a "scrolling mechanism", which is determined by its ancestors' [overflow](/en-US/docs/Web/CSS/Reference/Properties/overflow) property.
 
 > [!NOTE]
 > You can see this example live at [`7_sticky-positioning.html`](https://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html) ([see source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/positioning/7_sticky-positioning.html)).

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

@@ -279,7 +279,7 @@ This scales media elements to ensure they never overflow their containers.
 Other useful tips:
 
 - Always make sure to use an appropriate image format for your website images (such as PNG or JPG), and make sure to optimize the file size using a graphics editor before you put them on your website.
-- You can make use of CSS features like [gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients) and [shadows](/en-US/docs/Web/CSS/box-shadow) to implement visual effects without using images.
+- You can make use of CSS features like [gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients) and [shadows](/en-US/docs/Web/CSS/Reference/Properties/box-shadow) to implement visual effects without using images.
 - You can use media queries inside the media attribute on {{htmlelement("source")}} elements nested inside {{htmlelement("video")}}/{{htmlelement("audio")}} elements to serve video/audio files as appropriate for different devices (responsive video/audio).
 
 ## Responsive typography

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/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 [`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.
 
 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/structuring_content/general_embedding_technologies/index.md

@@ -103,7 +103,7 @@ The [Security](#security_concerns) section below goes into more detail about why
 
 The example includes the bare essentials needed to use an `<iframe>`:
 
-- [`border: none`](/en-US/docs/Web/CSS/border)
+- [`border: none`](/en-US/docs/Web/CSS/Reference/Properties/border)
   - : If used, the `<iframe>` is displayed without a surrounding border. Otherwise, by default, browsers display the `<iframe>` with a surrounding border (which is generally undesirable).
 - [`allowfullscreen`](/en-US/docs/Web/HTML/Reference/Elements/iframe#allowfullscreen)
   - : If set, the `<iframe>` is able to be placed in fullscreen mode using the [Fullscreen API](/en-US/docs/Web/API/Fullscreen_API) (somewhat beyond the scope of this article).

files/en-us/learn_web_development/core/structuring_content/html_images/index.md

@@ -118,7 +118,7 @@ What exactly should you write inside your `alt` attribute? It depends on _why_ t
 - **Decoration.** You should use [CSS background images](#css_background_images) for decorative images, but if you must use HTML, add a blank `alt=""`. If the image isn't part of the content, a screen reader shouldn't waste time reading it.
 - **Content.** If your image provides significant information, provide the same information in a _brief_ `alt` text – or even better, in the main text which everybody can see. Don't write redundant `alt` text. How annoying would it be for a sighted user if all paragraphs were written twice in the main content? If the image is described adequately by the main text body, you can just use `alt=""`.
 - **Link.** If you put an image inside {{htmlelement("a")}} tags, to turn an image into a link, you still must provide [accessible link text](/en-US/docs/Learn_web_development/Core/Structuring_content/Creating_links#use_clear_link_wording). In such cases you may, either, write it inside the same `<a>` element, or inside the image's `alt` attribute – whichever works best in your case.
-- **Text.** You should not put your text into images. If your main heading needs a drop shadow, for example, [use CSS](/en-US/docs/Web/CSS/text-shadow) for that rather than putting the text into an image. However, If you _really can't avoid doing this_, you should supply the text inside the `alt` attribute.
+- **Text.** You should not put your text into images. If your main heading needs a drop shadow, for example, [use CSS](/en-US/docs/Web/CSS/Reference/Properties/text-shadow) for that rather than putting the text into an image. However, If you _really can't avoid doing this_, you should supply the text inside the `alt` attribute.
 
 Essentially, the key is to deliver a usable experience, even when the images can't be seen. This ensures all users are not missing any of the content. Try turning off images in your browser and see how things look. You'll soon realize how helpful alt text is if the image cannot be seen.
 

files/en-us/learn_web_development/core/structuring_content/planet_data_table/index.md

@@ -33,7 +33,7 @@ The following steps describe what you need to do to complete the table example.
 4. Create all the content rows inside the table body, remembering to make all the row headings into headings semantically.
 5. Ensure all the content is placed into the right cells — in the raw data, each row of planet data is shown next to its associated planet.
 6. Add attributes to make the row and column headers unambiguously associated with the rows, columns, or row groups that they act as headings for.
-7. Add a black [border](/en-US/docs/Web/CSS/border) just around the column that contains all the planet name row headers.
+7. Add a black [border](/en-US/docs/Web/CSS/Reference/Properties/border) just around the column that contains all the planet name row headers.
 
 ## Hints and tips
 

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/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 [`filter`](/en-US/docs/Web/CSS/Reference/Properties/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/box-shadow) or [`text-shadow`](/en-US/docs/Web/CSS/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 [`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.
 
 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.