fix(curriculum): clean up misleading lines and formatting in CSS review (#61465)

curriculum/challenges/english/25-front-end-development/review-basic-css/671a887a7e62c75e9ab1ee4a.md

@@ -138,7 +138,7 @@ ul ~ p {
 - **Universal Selector (`*`)**: a special type of CSS selector that matches any element in the document. It is often used to apply a style to all elements on the page, which can be useful for resetting or normalizing styles across different browsers. The universal selector has the lowest specificity value of any selector. It contributes 0 to all parts of the specificity value (0, 0, 0, 0). 
 - **Type Selectors**: These selectors target elements based on their tag name. Type selectors have a relatively low specificity compared to other selectors. The specificity value for a type selector is (0, 0, 0, 1). 
 - **Class Selectors**: These selectors are defined by a period (`.`) followed by the class name. The specificity value for a class selector is (0, 0, 1, 0). This means that class selectors can override type selectors, but they can be overridden by ID selectors and inline styles.
-- **ID Selectors**: ID selectors are defined by a hash symbol (#) followed by the ID name. ID selectors have a very high specificity, higher than type selectors and class selectors, but lower than inline styles. The specificity value for an ID selector is (0, 1, 0, 0). 
+- **ID Selectors**: ID selectors are defined by a hash symbol (`#`) followed by the ID name. ID selectors have a very high specificity, higher than type selectors and class selectors, but lower than inline styles. The specificity value for an ID selector is (0, 1, 0, 0). 
 - **`!important` keyword**: used to give a style rule the highest priority, allowing it to override any other declarations for a property. When used, it forces the browser to apply the specified style, regardless of the specificity of other selectors. You should be cautious when using `!important` because it can make your CSS harder to maintain and debug.
 - **Cascade Algorithm**: An algorithm used to decide which CSS rules to apply when there are multiple styles targeting the same element. It ensures that the most appropriate styles are used, based on a set of well-defined rules.
 - **CSS Inheritance**: The process by which styles are passed down from parent elements to their children. Inheritance allows you to define styles at a higher level in the document tree and have them apply to multiple elements without explicitly specifying them for each element.

curriculum/challenges/english/25-front-end-development/review-css-accessibility/671a955b74ab5588735800d1.md

@@ -18,7 +18,7 @@ Accessibility tree is a structure used by assistive technologies, such as screen
 
 ## `max()` Function
 
-The **max()** function returns the largest of a set of comma-separated values:
+The `max()` function returns the largest of a set of comma-separated values:
 
 ```css
 img {

curriculum/challenges/english/25-front-end-development/review-css-pseudo-classes/671a907bad4538752765f2ff.md

@@ -32,7 +32,7 @@ dashedName: review-css-pseudo-classes
 ## Location Pseudo-classes
 
 - **Location Pseudo-classes**: These pseudo-classes are used for styling links and elements that are targeted within the current document.
-- **`:any-link` Pseudo-class**: This pseudo-class is a combination of the :link and :visited pseudo-classes. So, it matches any anchor element with an href attribute, regardless of whether it's visited or not.
+- **`:any-link` Pseudo-class**: This pseudo-class is a combination of the `:link` and `:visited` pseudo-classes. So, it matches any anchor element with an href attribute, regardless of whether it's visited or not.
 - **`:link` Pseudo-class**: This pseudo-class allows you to target all unvisited links on a webpage. You can use it to style links differently before the user clicks on them.
 - **`:local-link` Pseudo-class**: This pseudo-class targets links that point to the same document. It can be useful when you want to differentiate internal links from external ones.
 - **`:visited` Pseudo-class**: This pseudo-class targets a link the user has visited. 
@@ -56,7 +56,7 @@ dashedName: review-css-pseudo-classes
 
 ## Functional Pseudo-classes
 
-- **Functional Pseudo-classes**: Functional pseudo-classes allow you to select elements based on more complex conditions or relationships. Unlike regular pseudo-classes which target elements based on a state (for example, :hover, :focus), functional pseudo-classes accept arguments.
+- **Functional Pseudo-classes**: Functional pseudo-classes allow you to select elements based on more complex conditions or relationships. Unlike regular pseudo-classes which target elements based on a state (for example, `:hover`, `:focus`), functional pseudo-classes accept arguments.
 - **`:is()` Pseudo-class**: This pseudo-class takes a list of selectors (ex. `ol`, `ul`) and selects an element that matches one of the selectors in the list.
 
 ```html

curriculum/challenges/english/25-front-end-development/review-css/671a9a0a140c2b9d6a75629f.md

@@ -33,11 +33,11 @@ Review the concepts below to prepare for the upcoming exam.
 
 ## Different Types of CSS Combinators
 
-- **Descendant Combinator**: This combinator is used to target elements that are descendants of a specified parent element. The following example will target all `li` items inside `ul` elements.
-- **Child Combinator (`>`)**: This combinator is used to select elements that are direct children of a specified parent element. The following example will target all `p` elements that are direct children of the `container` class.
-- **Next-sibling Combinator (`+`)**: This combinator selects an element that immediately follows a specified sibling element. The following example will select the paragraph element that immediately follows the `h2` element.
+- **Descendant Combinator**: This combinator is used to target elements that are descendants of a specified parent element.
+- **Child Combinator (`>`)**: This combinator is used to select elements that are direct children of a specified parent element. 
+- **Next-sibling Combinator (`+`)**: This combinator selects an element that immediately follows a specified sibling element. 
 
-- **Subsequent-sibling Combinator (`~`)**: This combinator selects all siblings of a specified element that come after it. The following example will style only the second paragraph element because it is the only one that is a sibling of the `ul` element and shares the same parent.
+- **Subsequent-sibling Combinator (`~`)**: This combinator selects all siblings of a specified element that come after it.
 
 ## Inline, Block, and Inline-Block Level Elements
 
@@ -60,7 +60,7 @@ Review the concepts below to prepare for the upcoming exam.
 - **Universal Selector (`*`)**: a special type of CSS selector that matches any element in the document. It is often used to apply a style to all elements on the page, which can be useful for resetting or normalizing styles across different browsers. The universal selector has the lowest specificity value of any selector. It contributes 0 to all parts of the specificity value (0, 0, 0, 0). 
 - **Type Selectors**: These selectors target elements based on their tag name. Type selectors have a relatively low specificity compared to other selectors. The specificity value for a type selector is (0, 0, 0, 1). 
 - **Class Selectors**: These selectors are defined by a period (`.`) followed by the class name. The specificity value for a class selector is (0, 0, 1, 0). This means that class selectors can override type selectors, but they can be overridden by ID selectors and inline styles.
-- **ID Selectors**: ID selectors are defined by a hash symbol (#) followed by the ID name. ID selectors have a very high specificity, higher than type selectors and class selectors, but lower than inline styles. The specificity value for an ID selector is (0, 1, 0, 0). 
+- **ID Selectors**: ID selectors are defined by a hash symbol (`#`) followed by the ID name. ID selectors have a very high specificity, higher than type selectors and class selectors, but lower than inline styles. The specificity value for an ID selector is (0, 1, 0, 0). 
 - **`!important` keyword**: used to give a style rule the highest priority, allowing it to override any other declarations for a property. When used, it forces the browser to apply the specified style, regardless of the specificity of other selectors. You should be cautious when using `!important` because it can make your CSS harder to maintain and debug.
 - **Cascade Algorithm**: An algorithm used to decide which CSS rules to apply when there are multiple styles targeting the same element. It ensures that the most appropriate styles are used, based on a set of well-defined rules.
 - **CSS Inheritance**: The process by which styles are passed down from parent elements to their children. Inheritance allows you to define styles at a higher level in the document tree and have them apply to multiple elements without explicitly specifying them for each element.
@@ -159,7 +159,7 @@ Review the concepts below to prepare for the upcoming exam.
 ## Location Pseudo-classes
 
 - **Location Pseudo-classes**: These pseudo-classes are used for styling links and elements that are targeted within the current document.
-- **`:any-link` Pseudo-class**: This pseudo-class is a combination of the :link and :visited pseudo-classes. So, it matches any anchor element with an href attribute, regardless of whether it's visited or not.
+- **`:any-link` Pseudo-class**: This pseudo-class is a combination of the `:link` and `:visited` pseudo-classes. So, it matches any anchor element with an href attribute, regardless of whether it's visited or not.
 - **`:link` Pseudo-class**: This pseudo-class allows you to target all unvisited links on a webpage. You can use it to style links differently before the user clicks on them.
 - **`:local-link` Pseudo-class**: This pseudo-class targets links that point to the same document. It can be useful when you want to differentiate internal links from external ones.
 - **`:visited` Pseudo-class**: This pseudo-class targets a link the user has visited. 
@@ -183,7 +183,7 @@ Review the concepts below to prepare for the upcoming exam.
 
 ## Functional Pseudo-classes
 
-- **Functional Pseudo-classes**: Functional pseudo-classes allow you to select elements based on more complex conditions or relationships. Unlike regular pseudo-classes which target elements based on a state (for example, :hover, :focus), functional pseudo-classes accept arguments.
+- **Functional Pseudo-classes**: Functional pseudo-classes allow you to select elements based on more complex conditions or relationships. Unlike regular pseudo-classes which target elements based on a state (for example, `:hover`, `:focus`), functional pseudo-classes accept arguments.
 - **`:is()` Pseudo-class**: This pseudo-class takes a list of selectors (ex. `ol`, `ul`) and selects an element that matches one of the selectors in the list.
 - **`:where()` Pseudo-class**: This pseudo-class takes a list of selectors (ex. `ol`, `ul`) and selects an element that matches one of the selectors in the list. The difference between `:is` and `:where` is that the latter will have a specificity of 0.
 - **`:has()` Pseudo-class**: This pseudo-class is often dubbed the `"parent"` selector because it allows you to style elements who contain child elements specified in the selector list.
@@ -384,7 +384,7 @@ Accessibility tree is a structure used by assistive technologies, such as screen
 
 ## `max()` Function
 
-The **max()** function returns the largest of a set of comma-separated values:
+The `max()` function returns the largest of a set of comma-separated values:
 
 ```css
 img {
@@ -444,12 +444,12 @@ Using placeholder text is not great for accessibility. Too often, users confuse
 ## Working with Different Attribute Selectors and Links
 
 - **Definition**: The `attribute` selector allows you to target HTML elements based on their attributes like the `href` or `title` attributes. 
-- **`title` Attribute**: This attribute provides additional information about an element. Here is how you can target links with the `title` attribute.
+- **`title` Attribute**: This attribute provides additional information about an element.
 
 ## Targeting Elements with the `lang` and `data-lang` Attribute
 
 - **`lang` Attribute**: This attribute is used in HTML to specify the language of the content within an element. You might want to style elements differently based on the language they are written in, especially on a multilingual website. 
-- **`data-lang` Attribute**: Custom data attributes like the `data-lang` attribute are commonly used to store additional information in elements, such as specifying the language used within a specific section of text. Here is how you can style elements based on the `data-lang` attribute:
+- **`data-lang` Attribute**: Custom data attributes like the `data-lang` attribute are commonly used to store additional information in elements, such as specifying the language used within a specific section of text.
 
 
 ## Working with the Attribute Selector, Ordered List Elements and the `type` Attribute
@@ -526,7 +526,6 @@ Using placeholder text is not great for accessibility. Too often, users confuse
 - **`syntax`**: This defines the type of the property. 
 - **`inherits`**: This specifies whether the property should inherit its value from its parent element. 
 - **`initial-value`**: This sets the default value of the property.
-- **Gradient Example Using the `@property` Rule**: This example creates a gradient that smoothly animates when the element is hovered over.
 - **Fallbacks**: When using the custom property, you can provide a fallback value using the `var()` function, just as you would with standard custom properties.
 
 ## CSS Grid Basics 
@@ -539,7 +538,7 @@ Using placeholder text is not great for accessibility. Too often, users confuse
 - **Implicit Grid**: When items are placed outside of the grid, then rows and columns are automatically created for those outside elements.
 - **`minmax()` Function**: This function is used to set the minimum and maximum sizes for a track. 
 - **Line-based Placement**: All grids have lines. To specify where the item begins on a line, you can use the `grid-column-start` and `grid-row-start` properties. To specify where the item ends on the line, you can use the `grid-column-end` and `grid-row-end` properties. You can also choose to use the `grid-column` or `grid-row` shorthand properties instead.
-- **`grid-template-areas`**: The property is used to provide a name for the items you are going to position on the grid. 
+- **`grid-template-areas`**: This property is used to provide a name for the items you are going to position on the grid. 
 
 ## CSS Animation Basics