"Try it" section should not have unrelated content (1) (#41944)

* "Try it" section should not have unrelated content

* Move to description

Author: Josh-Cena

files/en-us/web/css/reference/at-rules/@supports/index.md

@@ -10,6 +10,8 @@ The **`@supports`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/Web/CSS/Gui
 Using this at-rule is commonly called a _feature query_.
 The rule must be placed at the top level of your code or nested inside any other conditional group at-rule.
 
+In JavaScript, `@supports` can be accessed via the CSS object model interface {{DOMxRef("CSSSupportsRule")}}.
+
 {{InteractiveExample("CSS Demo: @supports", "tabbed-standard")}}
 
 ```css interactive-example
@@ -40,8 +42,6 @@ The rule must be placed at the top level of your code or nested inside any other
 </ul>
 ```
 
-In JavaScript, `@supports` can be accessed via the CSS object model interface {{DOMxRef("CSSSupportsRule")}}.
-
 ## Syntax
 
 ```css

files/en-us/web/css/reference/properties/accent-color/index.md

@@ -52,18 +52,6 @@ accent-color: hsl(250 100% 34%);
 }
 ```
 
-Browsers that support `accent-color` currently apply it to the following HTML elements:
-
-- [`<input type="checkbox">`](/en-US/docs/Web/HTML/Reference/Elements/input/checkbox)
-- [`<input type="radio">`](/en-US/docs/Web/HTML/Reference/Elements/input/radio)
-- [`<input type="range">`](/en-US/docs/Web/HTML/Reference/Elements/input/range)
-- [`<progress>`](/en-US/docs/Web/HTML/Reference/Elements/progress)
-
-Each user agent has an accent color, with variations to ensure legibility and
-contrast. That accent color is not used by every user-interface control nor in
-every state of the control. The `accent-color` is only applied to user-interface
-controls that use an accent color in the states where it is applicable.
-
 ## Syntax
 
 ```css
@@ -91,6 +79,20 @@ accent-color: unset;
 - {{cssxref("&lt;color&gt;")}}
   - : Specifies the color to be used as the accent color.
 
+## Description
+
+Browsers that support `accent-color` currently apply it to the following HTML elements:
+
+- [`<input type="checkbox">`](/en-US/docs/Web/HTML/Reference/Elements/input/checkbox)
+- [`<input type="radio">`](/en-US/docs/Web/HTML/Reference/Elements/input/radio)
+- [`<input type="range">`](/en-US/docs/Web/HTML/Reference/Elements/input/range)
+- [`<progress>`](/en-US/docs/Web/HTML/Reference/Elements/progress)
+
+Each user agent has an accent color, with variations to ensure legibility and
+contrast. That accent color is not used by every user-interface control nor in
+every state of the control. The `accent-color` is only applied to user-interface
+controls that use an accent color in the states where it is applicable.
+
 ## Formal definition
 
 {{cssinfo}}

files/en-us/web/css/reference/properties/align-content/index.md

@@ -8,6 +8,8 @@ sidebar: cssref
 
 The [CSS](/en-US/docs/Web/CSS) **`align-content`** property sets the distribution of space between and around content items along a [flexbox](/en-US/docs/Web/CSS/Guides/Flexible_box_layout)'s [cross axis](/en-US/docs/Glossary/Cross_Axis), or a [grid](/en-US/docs/Web/CSS/Guides/Grid_layout) or [block-level](/en-US/docs/Glossary/Block-level_content) element's block axis.
 
+This property has no effect on single line flex containers (i.e., ones with `flex-wrap: nowrap`).
+
 The interactive example below uses grid layout to demonstrate some of the values of this property.
 
 {{InteractiveExample("CSS Demo: align-content")}}
@@ -56,8 +58,6 @@ align-content: space-around;
 }
 ```
 
-This property has no effect on single line flex containers (i.e., ones with `flex-wrap: nowrap`).
-
 ## Syntax
 
 ```css

files/en-us/web/css/reference/properties/align-items/index.md

@@ -8,6 +8,8 @@ sidebar: cssref
 
 The [CSS](/en-US/docs/Web/CSS) **`align-items`** property sets the {{cssxref("align-self")}} value on all direct children as a group. In flexbox, it controls the alignment of items on the {{glossary("cross axis")}}. In grid layout, it controls the alignment of items on the block axis within their {{glossary("grid areas")}}.
 
+The interactive example below uses grid layout to demonstrate some of the values of this property.
+
 {{InteractiveExample("CSS Demo: align-items")}}
 
 ```css interactive-example-choice
@@ -54,8 +56,6 @@ align-items: end;
 }
 ```
 
-The interactive example below demonstrates some of the values for `align-items` using grid and flex layout.
-
 ## Syntax
 
 ```css

files/en-us/web/css/reference/properties/align-self/index.md

@@ -8,6 +8,8 @@ sidebar: cssref
 
 The **`align-self`** [CSS](/en-US/docs/Web/CSS) property overrides a grid or flex item's {{cssxref("align-items")}} value. In grid, it aligns the item inside the {{glossary("Grid Areas", "grid area")}}. In flexbox, it aligns the item on the {{glossary("cross axis")}}.
 
+The property doesn't apply to block-level boxes, or to table cells. If a flexbox item's cross-axis margin is `auto`, then `align-self` is ignored.
+
 {{InteractiveExample("CSS Demo: align-self")}}
 
 ```css interactive-example-choice
@@ -52,8 +54,6 @@ align-self: end;
 }
 ```
 
-The property doesn't apply to block-level boxes, or to table cells. If a flexbox item's cross-axis margin is `auto`, then `align-self` is ignored.
-
 ## Syntax
 
 ```css

files/en-us/web/css/reference/properties/animation-delay/index.md

@@ -8,6 +8,8 @@ sidebar: cssref
 
 The **`animation-delay`** [CSS](/en-US/docs/Web/CSS) property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation. The animation can start later, immediately from its beginning, or immediately and partway through the animation.
 
+It is often convenient to use the shorthand property {{cssxref("animation")}} to set all animation properties at once.
+
 {{InteractiveExample("CSS Demo: animation-delay")}}
 
 ```css interactive-example-choice
@@ -105,8 +107,6 @@ observer.observe(el, {
 update();
 ```
 
-It is often convenient to use the shorthand property {{cssxref("animation")}} to set all animation properties at once.
-
 ## Syntax
 
 ```css

files/en-us/web/css/reference/properties/animation-direction/index.md

@@ -8,6 +8,8 @@ sidebar: cssref
 
 The **`animation-direction`** [CSS](/en-US/docs/Web/CSS) property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.
 
+It is often convenient to use the shorthand property {{cssxref("animation")}} to set all animation properties at once.
+
 {{InteractiveExample("CSS Demo: animation-direction")}}
 
 ```css interactive-example-choice
@@ -87,8 +89,6 @@ button.addEventListener("click", () => {
 });
 ```
 
-It is often convenient to use the shorthand property {{cssxref("animation")}} to set all animation properties at once.
-
 ## Syntax
 
 ```css

files/en-us/web/css/reference/properties/animation-duration/index.md

@@ -8,6 +8,8 @@ sidebar: cssref
 
 The **`animation-duration`** [CSS](/en-US/docs/Web/CSS) property sets the length of time that an animation takes to complete one cycle.
 
+It is often convenient to use the shorthand property {{ cssxref("animation") }} to set all animation properties at once.
+
 {{InteractiveExample("CSS Demo: animation-duration")}}
 
 ```css interactive-example-choice
@@ -83,8 +85,6 @@ button.addEventListener("click", () => {
 });
 ```
 
-It is often convenient to use the shorthand property {{ cssxref("animation") }} to set all animation properties at once.
-
 ## Syntax
 
 ```css

files/en-us/web/css/reference/properties/animation-fill-mode/index.md

@@ -8,6 +8,8 @@ sidebar: cssref
 
 The **`animation-fill-mode`** [CSS](/en-US/docs/Web/CSS) property sets how a CSS animation applies styles to its target before and after its execution.
 
+It is often convenient to use the shorthand property {{cssxref("animation")}} to set all animation properties at once.
+
 {{InteractiveExample("CSS Demo: animation-fill-mode")}}
 
 ```css interactive-example-choice
@@ -110,8 +112,6 @@ observer.observe(el, {
 update();
 ```
 
-It is often convenient to use the shorthand property {{cssxref("animation")}} to set all animation properties at once.
-
 ## Syntax
 
 ```css

files/en-us/web/css/reference/properties/animation-iteration-count/index.md

@@ -8,6 +8,8 @@ sidebar: cssref
 
 The **`animation-iteration-count`** [CSS](/en-US/docs/Web/CSS) property sets the number of times an animation sequence should be played before stopping.
 
+It is often convenient to use the shorthand property {{cssxref("animation")}} to set all animation properties at once.
+
 {{InteractiveExample("CSS Demo: animation-iteration-count")}}
 
 ```css interactive-example-choice
@@ -103,8 +105,6 @@ observer.observe(el, {
 update();
 ```
 
-It is often convenient to use the shorthand property {{cssxref("animation")}} to set all animation properties at once.
-
 ## Syntax
 
 ```css