mdn · estelle · May 24, 2023 · May 24, 2023 · May 24, 2023 · May 24, 2023
@@ -1,6 +1,6 @@
 ---
 title: CSS animations
-slug: Web/CSS/CSS_Animations
+slug: Web/CSS/CSS_animations
 page-type: css-module
 spec-urls:
   - https://drafts.csswg.org/css-animations-2/
@@ -9,7 +9,7 @@ spec-urls:
 
 {{CSSRef}}
 
-The animations CSS module lets you animate the values of CSS properties, such as background-position and transform, over time by using keyframes. Each keyframe describes how the animated element should render at a given time during the animation sequence. You can use the properties in the animations module to control the duration, number of repetitions, delayed start, and other aspects of an animation.
+The **CSS animations** module lets you animate the values of CSS properties, such as background-position and transform, over time by using keyframes. Each keyframe describes how the animated element should render at a given time during the animation sequence. You can use the properties in the animations module to control the duration, number of repetitions, delayed start, and other aspects of an animation.
 
 ### Animations in action
 
@@ -63,9 +63,9 @@ All animations, even those with 0 seconds duration, throw animation events.
 
 ## Guides
 
-- [Using CSS animations](/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
+- [Using CSS animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)
   - : Step-by-step tutorial on how to create animations using CSS. This article describes the animation-related CSS properties and at-rule and how they interact with each other.
-- [CSS animations tips and tricks](/en-US/docs/Web/CSS/CSS_Animations/Tips)
+- [CSS animations tips and tricks](/en-US/docs/Web/CSS/CSS_animations/Tips)
   - : Tips and tricks to help you get the most out of CSS animations.
 
 ## Related concepts

@@ -1,6 +1,6 @@
 ---
 title: CSS Animations tips and tricks
-slug: Web/CSS/CSS_Animations/Tips
+slug: Web/CSS/CSS_animations/Tips
 page-type: guide
 ---
 
@@ -10,7 +10,7 @@ CSS Animations make it possible to do incredible things with the elements that m
 
 ## Run an animation again
 
-The [CSS Animations](/en-US/docs/Web/CSS/CSS_Animations) specification doesn't offer a way to run an animation again. There's no magic `resetAnimation()` method on elements, and you can't even just set the element's {{cssxref("animation-play-state")}} to `"running"` again. Instead, you have to use clever tricks to get a stopped animation to replay.
+The [CSS Animations](/en-US/docs/Web/CSS/CSS_animations) specification doesn't offer a way to run an animation again. There's no magic `resetAnimation()` method on elements, and you can't even just set the element's {{cssxref("animation-play-state")}} to `"running"` again. Instead, you have to use clever tricks to get a stopped animation to replay.
 
 Here's one way to do it that we feel is stable and reliable enough to suggest to you.
 

@@ -1,6 +1,6 @@
 ---
 title: Using CSS animations
-slug: Web/CSS/CSS_Animations/Using_CSS_animations
+slug: Web/CSS/CSS_animations/Using_CSS_animations
 page-type: guide
 ---
 

@@ -1,6 +1,6 @@
 ---
 title: Border-image generator
-slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator
+slug: Web/CSS/CSS_backgrounds_and_borders/Border-image_generator
 page-type: guide
 ---
 
@@ -12,7 +12,7 @@ This tool can be used to generate CSS {{cssxref("border-image")}} values.
 
 ## See also
 
-- [Border-radius generator](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator)
+- [Border-radius generator](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator)
   - : This interactive tool lets you visually create rounded corners (the {{cssxref("border-radius")}} property).
-- [Box-shadow generator](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator)
+- [Box-shadow generator](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator)
   - : This interactive tool lets you visually create shadows behind elements (the {{cssxref("box-shadow")}} property).
@@ -1,6 +1,6 @@
 ---
 title: Border-radius generator
-slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator
+slug: Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator
 page-type: guide
 ---
 
@@ -12,7 +12,7 @@ This tool can be used to generate CSS {{cssxref("border-radius")}} effects.
 
 ## See also
 
-- [Border-image generator](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator)
+- [Border-image generator](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator)
   - : This interactive tool lets you visually create border images (the {{cssxref("border-image")}} property).
-- [Box-shadow generator](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator)
+- [Box-shadow generator](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator)
   - : This interactive tool lets you visually create shadows behind elements (the {{cssxref("box-shadow")}} property).
@@ -1,6 +1,6 @@
 ---
 title: Box-shadow generator
-slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator
+slug: Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator
 page-type: guide
 ---
 
@@ -32,7 +32,7 @@ The box at the bottom-right contains the CSS for the element and any `before::`
 
 ## See also
 
-- [Border-image generator](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator)
+- [Border-image generator](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator)
   - : This interactive tool lets you visually create border images (the {{cssxref("border-image")}} property).
-- [Border-radius generator](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator)
+- [Border-radius generator](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator)
   - : This interactive tool lets you visually create rounded corners (the {{cssxref("border-radius")}} property).
@@ -1,6 +1,6 @@
 ---
 title: CSS backgrounds and borders
-slug: Web/CSS/CSS_Backgrounds_and_Borders
+slug: Web/CSS/CSS_backgrounds_and_borders
 page-type: css-module
 spec-urls: https://drafts.csswg.org/css-backgrounds/
 ---
@@ -89,9 +89,9 @@ To see the code for this sample, [view the source on GitHub](https://github.com/
 
 - [Learn CSS: background and borders](/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
   - : Explains how to implement decorative images using CSS background images.
-- [Using multiple backgrounds](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)
+- [Using multiple backgrounds](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds)
   - : Explains how to set one or more backgrounds on an element.
-- [Resizing background images](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images)
+- [Resizing background images](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images)
   - : Describes how to change the size and repeating behavior of background images.
 - [Learn CSS: the box model](/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
   - : Explains how borders, along with other box model properties, impact the CSS box model.
@@ -136,8 +136,8 @@ To see the code for this sample, [view the source on GitHub](https://github.com/
 ## See also
 
 - Interactive tools that let you visually create borders images, rounded corners, and box shadows:
-  - [Border-image generator](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator)
-  - [Border-radius generator](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator)
-  - [Box-shadow generator](/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator)
-- [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_Colors/Applying_color), including for borders.
+  - [Border-image generator](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator)
+  - [Border-radius generator](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator)
+  - [Box-shadow generator](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator)
+- [Applying color to HTML elements using CSS](/en-US/docs/Web/CSS/CSS_colors/Applying_color), including for borders.
 - The [`drop-shadow()`](/en-US/docs/Web/CSS/filter-function/drop-shadow) filter function that applies a drop shadow effect to the input image. The function is used by the {{cssxref("filter")}} and {{cssxref("backdrop-filter")}} properties.
@@ -1,6 +1,6 @@
 ---
 title: Resizing background images with background-size
-slug: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images
+slug: Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images
 page-type: guide
 ---
 

@@ -1,6 +1,6 @@
 ---
 title: Using multiple backgrounds
-slug: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+slug: Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds
 page-type: guide
 ---
 

@@ -1,6 +1,6 @@
 ---
-title: CSS Basic User Interface
-slug: Web/CSS/CSS_Basic_User_Interface
+title: CSS basic user interface
+slug: Web/CSS/CSS_basic_user_interface
 page-type: css-module
 spec-urls: https://drafts.csswg.org/css-ui/
 ---
@@ -49,7 +49,8 @@ To see the code for this basic user interface sample, [view the source on GitHub
 
 ## Guides
 
-- [Using URL values for the `cursor` property](/en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property)
+- [Using URL values for the `cursor` property](/en-US/docs/Web/CSS/CSS_basic_user_interface
+  Title: CSS basic user interface/Using_URL_values_for_the_cursor_property)
   - : Explains how a URL can be used with the {{CSSxRef("cursor")}} property to produce custom cursors.
 - [Learn forms: advanced form styling](/en-US/docs/Learn/Forms/Advanced_form_styling)
   - : Explains how {{CSSxRef("appearance")}} can be used to style form controls.

@@ -1,10 +1,10 @@
 ---
-title: Box alignment for block, absolutely positioned and table layout
-slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables
+title: Box alignment for block, absolutely positioned, and table layouts
+slug: Web/CSS/CSS_box_alignment/Box_alignment_in_block_abspos_tables
 page-type: guide
 ---
 
-The [Box Alignment Specification](/en-US/docs/Web/CSS/CSS_Box_Alignment) details how alignment works in various layout methods. In this page we explore how box alignment works in the context of block layout, including floated, positioned, and table elements. As this page aims to detail things which are specific to block layout and box alignment, it should be read in conjunction with the main [Box Alignment](/en-US/docs/Web/CSS/CSS_Box_Alignment) page, which details the common features of box alignment across layout methods.
+The [box alignment specification](/en-US/docs/Web/CSS/CSS_box_alignment) details how alignment works in various layout methods. In this page we explore how box alignment works in the context of block layout, including floated, positioned, and table elements. As this page aims to detail things which are specific to block layout and box alignment, it should be read in conjunction with the main [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) page, which details the common features of box alignment across layout methods.
 
 > **Note:** At the time of writing (May 2018), there is no real support for the box alignment properties in block layout. This document details how the specification expects these properties to be implemented for completeness, and is likely to change as the specification and browser implementations develop.
 

@@ -1,12 +1,12 @@
 ---
 title: Box alignment in Flexbox
-slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox
+slug: Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox
 page-type: guide
 ---
 
 {{CSSRef}}
 
-The [Box Alignment](/en-US/docs/Web/CSS/CSS_Box_Alignment) Specification details how alignment works in various layout methods; on this page, we explore how box alignment works in the context of Flexbox. As this page aims to detail things which are specific to Flexbox and box alignment, it should be read in conjunction with the main [Box Alignment](/en-US/docs/Web/CSS/CSS_Box_Alignment) page which details the common features of box alignment across layout methods.
+The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) Specification details how alignment works in various layout methods; on this page, we explore how box alignment works in the context of Flexbox. As this page aims to detail things which are specific to Flexbox and box alignment, it should be read in conjunction with the main [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) page which details the common features of box alignment across layout methods.
 
 ## Basic example
 
@@ -85,7 +85,7 @@ On the cross axis the `row-gap` property creates spacing between adjacent flex l
 
 ## Guides
 
-- [Alignment in flexbox](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)
+- [Alignment in flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
 
 ## External Resources
 

@@ -1,14 +1,14 @@
 ---
 title: Box alignment in grid layout
-slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Grid_Layout
+slug: Web/CSS/CSS_box_alignment/Box_alignment_in_grid_layout
 page-type: guide
 ---
 
 {{CSSRef}}
 
-The [Box Alignment](/en-US/docs/Web/CSS/CSS_Box_Alignment) specification details how alignment works in various layout methods. On this page we explore how box alignment works in the context of [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout).
+The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) specification details how alignment works in various layout methods. On this page we explore how box alignment works in the context of [CSS grid layout](/en-US/docs/Web/CSS/CSS_Grid_Layout).
 
-As this page aims to detail things which are specific to CSS Grid Layout and Box Alignment, it should be read in conjunction with the main [Box Alignment](/en-US/docs/Web/CSS/CSS_Box_Alignment) page which details the common features of box alignment across layout methods.
+As this page aims to detail things which are specific to CSS Grid Layout and Box Alignment, it should be read in conjunction with the main [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) page which details the common features of box alignment across layout methods.
 
 ## Basic example
 

@@ -1,16 +1,16 @@
 ---
-title: Box alignment in Multi-column Layout
-slug: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Multi-column_Layout
+title: Box alignment in multi-column layout
+slug: Web/CSS/CSS_box_alignment/Box_alignment_in_multi-column_layout
 page-type: guide
 ---
 
 {{CSSRef}}
 
-The [Box Alignment](/en-US/docs/Web/CSS/CSS_Box_Alignment) Specification details how alignment works in various layout methods; on this page we explore how Box Alignment works in the context of [Multi-column Layout](/en-US/docs/Web/CSS/CSS_Columns). As this page aims to detail things which are specific to Multi-column Layout and Box Alignment, it should be read in conjunction with the main [Box Alignment](/en-US/docs/Web/CSS/CSS_Box_Alignment) page which details the common features of Box Alignment across layout methods.
+The [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) specification details how alignment works in various layout methods; on this page we explore how Box Alignment works in the context of [multi-column Layout](/en-US/docs/Web/CSS/CSS_Columns). As this page aims to detail things which are specific to Multi-column Layout and Box Alignment, it should be read in conjunction with the main [box alignment](/en-US/docs/Web/CSS/CSS_box_alignment) page which details the common features of Box Alignment across layout methods.
 
 In multi-column layout the alignment container is the content box of the multicol container. The alignment subject is the column box. The properties which apply to multi-column layouts are detailed below.
 
-> **Note:** Multi-column Layout predates the Box Alignment specification. And the properties listed here, while specified for Multicol, may not be supported in browsers.
+> **Note:** Multi-column layout predates the box alignment specification. And the properties listed here, while specified for Multicol, may not be supported in browsers.
 
 ## align-content and justify-content