diff --git a/curriculum/challenges/english/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md b/curriculum/challenges/english/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md index 05c1d209c74277..659175e6fb979b 100644 --- a/curriculum/challenges/english/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md +++ b/curriculum/challenges/english/25-front-end-development/quiz-css-backgrounds-and-borders/66ed8fd7f45ce3ece4053eb0.md @@ -61,23 +61,23 @@ Which property is used to control the position of the list item marker? #### --text-- -Which of the following is NOT a valid value for the `list-style-type` property? +What does the `line-height` property do? #### --distractors-- -`decimal` +It is used to set the background size for an element. --- -`disc` +It is used to style links that have not be visited by the user. --- -`square` +It is used to create space to the right of list items. #### --answer-- -`lower-arabic` +It is used to create space between lines of text. ### --question-- @@ -87,15 +87,15 @@ Which pseudo-class is used to style links when a user hovers over them? #### --distractors-- -`:active` +`:hovered` --- -`:link` +`:hovering` --- -`:visited` +`:hasHovered` #### --answer-- @@ -149,45 +149,45 @@ Which CSS property can be used to control the size of a background image? #### --text-- -How can you make a background image cover the entire element, maintaining aspect ratio? +Which of the following is the correct way to apply a solid red top border to an element? #### --distractors-- -`background-size: contain` +`set-top-border: 3px solid red;` --- -`background-repeat: stretch` +`border-top: apply 3px solid red;` --- -`background-fit: full` +`top-border: 3px solid red;` #### --answer-- -`background-size: cover` +`border-top: 3px solid red;` ### --question-- #### --text-- -What does `background-attachment: fixed` do? +Which of the following is NOT a valid `border` property? #### --distractors-- -The background moves with the scrolling content +`border-bottom` --- -The background scrolls twice as fast +`border-right` --- -The background image is resized to fill the screen +`border-top` #### --answer-- -The background stays fixed while the content scrolls +`border-side` ### --question-- @@ -215,45 +215,61 @@ Which of the following is a valid `border-style` value? #### --text-- -How can you make a link change color when clicked? +Which of the following is the correct way to apply borders using the shorthand property? #### --distractors-- -Use the `:link` pseudo-class +```css +.box { + borders: 1px solid black; +} +``` --- -Use the `:visited` pseudo-class +```css +.box { + borderShort: 1px solid black; +} +``` --- -Use the `:hover` pseudo-class +```css +.box { + border-short: 1px solid black; +} +``` #### --answer-- -Use the `:active` pseudo-class +```css +.box { + border: 1px solid black; +} +``` ### --question-- #### --text-- -What is the correct CSS property to create an outline around an element, besides using the `border` property? +What is the role of the `linear-gradient` function? #### --distractors-- -`border-wide` +It is used to set the style of an element's border. --- -`box-shadow` +It is used to determine how background images should be repeated along the horizontal and vertical axes. --- -`border-img` +It is used to style an element that was activated by the user. #### --answer-- -`outline` +It is used to create a transition between multiple colors along a straight line. ### --question-- @@ -281,73 +297,73 @@ Which value for the `background-repeat` property ensures the image repeats horiz #### --text-- -What's the purpose of the `border-radius` property? +What is the purpose of the `border-radius` property? #### --distractors-- -To create shadows around the border +To create shadows around the border. --- -To change the width of the border +To change the width of the border. --- -To make the border disappear +To make the border disappear. #### --answer-- -To round the corners of an element +To round the corners of an element. ### --question-- #### --text-- -Which property is used to add space between the border and the content? +Which of the following is NOT a valid value for the `background-position` property? #### --distractors-- -`margin` +`top` --- -`border-spacing` +`center` --- -`border-width` +`bottom` #### --answer-- -`padding` +`side` ### --question-- #### --text-- -How can you make a background image repeat only vertically? +Which of the following `background-repeat` values can be used to repeat a background image vertically? #### --distractors-- -`background-repeat: repeat-x` +`repeat-x` --- -`background-repeat: vertical-only` +`vertical-only` --- -`background-repeat: stretch` +`stretch` #### --answer-- -`background-repeat: repeat-y` +`repeat-y` ### --question-- #### --text-- -What does `background-position: center` do to a background image? +What does `background-position: center;` do to a background image? #### --distractors-- @@ -369,7 +385,7 @@ It positions the background image in the center of the element #### --text-- -Which of these is NOT a valid border value? +Which of these is NOT a valid `border` value? #### --distractors-- @@ -381,7 +397,7 @@ Which of these is NOT a valid border value? --- -`2px grooved red` +`2px dashed red` #### --answer-- @@ -391,65 +407,81 @@ Which of these is NOT a valid border value? #### --text-- -How can you ensure that gradients used in web design are accessible? +What is does the `radial-gradient` function do? #### --distractors-- -Use only two colors in the gradient +It creates a background that transitions between multiple colors along a straight line. --- -Use gradients only for decorative purposes +It specifies whether the background image should scroll with the content or remain fixed in place. --- -Avoid using gradients in the background +It is used to style an element that was activated by the user. #### --answer-- -Ensure sufficient contrast between the gradient and any text. +It creates an image that radiates from a particular point and gradually transitions between multiple colors. ### --question-- #### --text-- -Which value for the `background-size` property will resize the background image to fit within the container while preserving the image's aspect ratio? +Which of the following is NOT a valid pseudo-class? #### --distractors-- -`fill` +`:focus` --- -`stretch` +`:visited` --- -`repeat` +`:link` #### --answer-- -`contain` +`:before` ### --question-- #### --text-- -How do you make an image border have rounded corners in CSS? +Which of the following shows the `background` shorthand property being used properly? #### --distractors-- -`border-style: round` +```css +body { + background: apply url("example-url-goes-here"); +} +``` --- -`border-corners: circle` +```css +body { + background: set url("example-url-goes-here"); +} +``` --- -`border-rounding: 10px` +```css +body { + background: 2px solid red url("example-url-goes-here"); +} +``` #### --answer-- -`border-radius: 10px` +```css +body { + background: no-repeat url("example-url-goes-here"); +} +```