diff --git a/curriculum/challenges/english/blocks/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md b/curriculum/challenges/english/blocks/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md index 11c5cbaf7fc..e73a44460f6 100644 --- a/curriculum/challenges/english/blocks/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md +++ b/curriculum/challenges/english/blocks/review-css-backgrounds-and-borders/671a88d636cebc5fbd407b78.md @@ -5,13 +5,64 @@ challengeType: 31 dashedName: review-css-backgrounds-and-borders --- -# --description-- +# --interactive-- ## 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. + +Here's an example using `list-style-type` to change the bullet style: + +:::interactive_editor + +```html + + +``` + +```css +ul { + list-style-type: square; +} +``` + +::: + - **`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. + +Here's an example showing the difference between `inside` and `outside`: + +:::interactive_editor + +```html + + + +``` + +```css +.inside-list { + list-style-position: inside; +} + +.outside-list { + list-style-position: 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. ## Spacing list items using `margin` @@ -20,23 +71,203 @@ dashedName: review-css-backgrounds-and-borders - Margins create space outside each `li` element, allowing control over the gap between list items. - `margin-bottom` is used to create space below each list item. For example, `margin-bottom: 10px;` will create a 10-pixel gap below each list item. +Here's an example using `margin-bottom` to space list items: + +:::interactive_editor + +```html + + +``` + +```css +.list li { + margin-bottom: 20px; +} +``` + +::: + ## 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 been visited by the user. + +Here's an example using the `:link` pseudo-class: + +:::interactive_editor + +```html + +Example link +``` + +```css +a:link { + color: red; +} +``` + +::: + - **`: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 elements where a user is actively hovering over them. + +Here's an example using the `:hover` pseudo-class: + +:::interactive_editor + +```html + +Hover over me! +``` + +```css +a:hover { + color: green; + text-decoration: underline; +} +``` + +::: + - **`: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. + +Here's an example using the `:focus` pseudo-class: + +:::interactive_editor + +```html + +Example link +``` + +```css +a:focus { + outline: 2px solid orange; +} +``` + +::: + - **`:active pseudo-class`**: This pseudo-class is used to style an element that was activated by the user. A common example would be when the user clicks on a button. +Here's an example using the `:active` pseudo-class: + +:::interactive_editor + +```html + +Click me! +``` + +```css +a:active { + color: pink; +} +``` + +::: + ## Working with Backgrounds and Borders - **`background-size` Property**: This property is used to set the background size for an element. Some common values include `cover` for the background image to cover the entire element and `contain` for the background image to fit within the element. + +Here's an example using `background-size: contain`: + +:::interactive_editor + +```html + +``` + +::: + - **`background-repeat` Property**: This property is used to determine how background images should be repeated along the horizontal and vertical axes. The default value for `background-repeat` is `repeat` meaning the image will repeat both horizontally and vertically. You can also specify that there should be no repeat by using the `no-repeat` property. + +Here's an example using `background-repeat: no-repeat`: + +:::interactive_editor + +```html + +``` + +::: + - **`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 values like `top`, `bottom`, `left`, `right`, and `center`. + +Here's an example using `background-position`: + +:::interactive_editor + +```html + +``` + +::: + - **`background-attachment` Property**: This property is used to specify whether the background image should scroll with the content or remain fixed in place. The main values are `scroll` (default), where the background image scrolls with the content, and `fixed`, where the background image stays in the same position on the screen. - **`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. + +Here's an example using `background-image`: + +:::interactive_editor + +```html + +``` + +::: + - **`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");` + +Here's an example using the `background` shorthand property: + +:::interactive_editor + +```html + +``` + +::: + - **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 @@ -45,15 +276,143 @@ dashedName: review-css-backgrounds-and-borders - **`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. + +Here's an example using individual border properties: + +:::interactive_editor + +```html + +
Box with different borders
+``` + +```css +.bordered-box { + border-top: 3px solid blue; + border-right: 2px solid red; + border-bottom: 1px dashed green; + border-left: 4px dotted orange; + padding: 20px; +} +``` + +::: + - **`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. + +Here's an example using the `border` shorthand property: + +:::interactive_editor + +```html + +A cute cat lying on its back. +``` + +```css +img { + border: 2px solid red; +} +``` + +::: + - **`border-radius` Property**: This property is used to create rounded corners for an element's border. + +Here's an example using `border-radius`: + +:::interactive_editor + +```html + +A cute cat lying on its back. +``` + +```css +img { + border: 2px solid black; + border-radius: 10px; +} +``` + +::: + - **`border-style` Property**: This property is used to set the style of an element's border. Some accepted values include `solid`, `dashed`, `dotted`, and `double`. +Here's an example using different `border-style` values: + +:::interactive_editor + +```html + +
Solid border
+
Dashed border
+
Dotted border
+``` + +```css +.solid-border { + border: 3px solid blue; + margin-bottom: 10px; + padding: 10px; +} + +.dashed-border { + border: 3px dashed red; + margin-bottom: 10px; + padding: 10px; +} + +.dotted-border { + border: 3px dotted green; + padding: 10px; +} +``` + +::: + ## Gradients -- **`linear-gradient()` Function**: This CSS function is used to create a transition between multiple colors along a straight line. +- **`linear-gradient()` Function**: This CSS function is used to create a transition between multiple colors along a straight line. + +Here's an example using `linear-gradient()`: + +:::interactive_editor + +```html + +
+``` + +```css +.linear-gradient { + background: linear-gradient(to right, red, blue); + height: 40vh; +} +``` + +::: + - **`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. +Here's an example using `radial-gradient()`: + +:::interactive_editor + +```html + +
+``` + +```css +.radial-gradient { + background: radial-gradient(circle, red, blue); + height: 40vh; +} +``` + +::: + # --assignment-- Review the CSS Backgrounds and Borders topics and concepts.