feat(curriculum): adding content for background and borders review (f…

…reeCodeCamp#57032)

Co-authored-by: Tom <[email protected]>

client/i18n/locales/english/intro.json

@@ -1916,7 +1916,8 @@
       "review-css-backgrounds-and-borders": {
         "title": "CSS Backgrounds and Borders Review",
         "intro": [
-          "Review the CSS Backgrounds and Borders concepts to prepare for the upcoming quiz."
+          "Before you are quizzed on CSS backgrounds and borders, you first need to review.",
+          "Open up this page to review concepts including the <code>background-image</code> property, <code>border</code> property and more."
         ]
       },
       "quiz-css-backgrounds-and-borders": {

curriculum/challenges/english/25-front-end-development/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md

@@ -9,7 +9,45 @@ dashedName: review-css-backgrounds-and-borders
 
 Review the concepts below to prepare for the upcoming quiz.
 
+## Styling Lists
 
+- **`line-height` Property**: This property is used to create space between lines of text. The accepted `line-height` values include the keyword `normal`, numbers, percentages and length units like the `em` unit.
+- **`list-style-type` Property**: This property is used to specify the marker for a list item. Acceptable values can include a circle, disc, or decimal.
+- **`list-style-position` Property**: This property is used to set the position for the list marker. The only two acceptable values are inside and outside.
+- **`list-style-image` Property**: This property is used to use an image for the list item marker. A common use case is to use the `url` function with a value set to a valid image location.
+
+## Styling Links
+
+- **`pseudo-class`**: This is a keyword added to a selector that allows you to select elements based on a particular state. Common states would include the `:hover`, `:visited` and `:focus` states.
+- **`:link pseudo-class`**: This pseudo-class is used to style links that have not be visited by the user.
+- **`:visited pseudo-class`**: This pseudo-class is used to style links where a user has already visited.
+- **`:hover pseudo-class`**: This pseudo-class is used to style an elements where a user is actively hovering over them.
+- **`:focus pseudo-class`**: This pseudo-class is used to style an element when it receives focus. Examples would include `input` or `select` elements where the clicks or tabs on the element to focus it.
+- **`:active pseudo-class`**: This pseudo-class is used to style an element that was activated by the user. Common example would be when the user clicks on a button.
+
+## Working with Backgrounds and Borders
+
+- **`background-size` Property**: This property is used to set the background size for an element.
+- **`background-repeat` Property**: This property is used to determine how background images should be repeated along the horizontal and vertical axes. You can also specify that there should be no repeat by using the `no-repeat` property.
+- **`background-position` Property**: This property is used to specify the position of the background image. It can be set to a specific length, percentage, or keyword value.
+- **`background-attachment` Property**: This property is used to specify whether the background image should scroll with the content or remain fixed in place.
+- **`background-image` Property**: This property is used to set the background image of an element. You can set multiple background images at the same time and use either the `url`, `radial-gradient` or `linear-gradient` functions as values.
+- **`background` Property**: This is the shorthand property for setting all background properties in one declaration. Here is an example of setting the background image and setting it to not repeat: `background: no-repeat url("example-url-goes-here");`
+- **Good Contrast for Background and Foreground Colors**: It is important to ensure that the background and foreground colors have good contrast to make the text readable. The Web Content Accessibility Guidelines (WCAG) recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.
+
+## Borders
+
+- **`border-top` Property**: This property is used to set the styles for the top border of an element. `border-top: 3px solid blue;` sets a 3-pixel-wide solid blue border on the top side of the element.
+- **`border-right` Property**: This property is used to set the styles for the right border of an element. `border-right: 2px solid red;` sets a 2-pixel-wide solid red border on the right side of the element.
+- **`border-bottom` Property**: This property is used to set the styles for the bottom border of an element. `border-bottom: 1px dashed green;` sets a 1-pixel-wide dashed green border on the bottom side of the element.
+- **`border-left` Property**: This property is used to set the styles for the left border of an element. `border-left: 4px dotted orange;` sets a 4-pixel-wide dotted orange border on the left side of the element.
+- **`border` Property**: This is the shorthand property for setting the width, style, and color of an element's border. `border: 1px solid black;` sets a 1-pixel-wide solid black border.
+- **`border-radius` Property**: This property is used to create rounded corners for an element's border.
+
+## Gradients
+
+- **`linear-gradient()` Function**: This CSS function is used to create a transition between multiple colors along a straight line. 
+- **`radial-gradient()` Function**: This CSS function creates an image that radiates from a particular point, like a circle or an ellipse, and gradually transitions between multiple colors.
 
 # --assignment--