curriculum/challenges/english/blocks/quiz-css-layout-and-effects/66ed8ff4f45ce3ece4053eb4.md
To pass the quiz, you must correctly answer at least 18 of the 20 questions below.
What term is used in CSS to describe when an element's content exceeds the size of its container?
Underflow
Compression
Padding
Overflow
What is the default behavior of CSS when content overflows an element?
Hiding the content.
Clipping the content.
Resizing the content.
Keeping the content visible.
Why does CSS typically avoid hiding content when there is overflow?
To maintain the original layout and design.
To prevent performance issues in the browser.
To allow for better search engine optimization.
To ensure all content is accessible to users.
How can you handle vertical overflow in CSS by hiding content or displaying scrollbars?
Use overflow-y: visible to hide content and overflow-y: auto to always display scrollbars.
Use overflow-y: collapse to hide content and overflow-y: expand to display scrollbars.
Use overflow-y: none to hide content and overflow-y: show to display scrollbars.
Use overflow-y: hidden to hide content and overflow-y: scroll to always display scrollbars.
How can you specify different horizontal and vertical scrolling behaviors in CSS?
By using the scroll-x and scroll-y properties.
By specifying the same value for overflow-x and overflow-y.
By specifying two values for the overflow property, where the first value applies to overflow-y and the second value to overflow-x.
By specifying two values for the overflow property, where the first value applies to overflow-x and the second value to overflow-y.
What does the transform CSS property allow you to do?
Change the color and font style of an element.
Adjust the margin and padding of an element.
Modify the visibility and display of an element.
Rotate, scale, skew, and translate an element.
How does the transform: translate(15px, 200px) property modify an element?
It moves the element 15 pixels to the left and 200 pixels down from its original position.
It rotates the element 15 degrees in a clockwise direction.
It moves the element 15 pixels to the right and 200 pixels up from its original position.
It moves the element 15 pixels to the right and 200 pixels down from its original position.
What is the purpose of the CSS properties overflow-x and overflow-y?
They adjust the padding and margin of an element.
They set the background color and font style of an element.
They define the visibility and display properties of an element.
They control the horizontal and vertical overflow of an element's content.
What is the purpose of the margin property in CSS?
It defines the space between the content and the border of an element.
It defines the space between the border and the padding of an element.
It defines the width and height of an element.
It defines the space around an element, outside of its border.
What does the content area of an element represent in CSS?
It defines the margins and padding around the element.
It defines the thickness of the element's border.
It controls the visibility of the element on the page.
It contains the actual content of the element, such as text, images, and videos.
What is the difference between content-box and border-box in CSS?
content-box includes padding and border, while border-box includes only content dimensions.
Both content-box and border-box include only the border dimensions.
content-box is used for 2D elements, while border-box is used for 3D elements.
content-box includes only content dimensions, while border-box includes content, padding, and border in the dimensions.
What is the purpose of CSS resets?
To apply default styles to all elements for faster loading.
To minimize the size of CSS files by removing unused styles.
To optimize images and fonts for better performance.
To remove default browser styling and ensure consistent styling across browsers.
Which of the following is a common example of a CSS reset?
bootstrap.css
undo.css
restore.css
normalize.css
Which CSS property is used to apply changes such as rotation, scaling, and translation to elements?
box-shadow
opacity
z-index
transform
How is the total width of an element calculated in CSS when using the border-box value for the box-sizing property?
Total Width = Content Width + Border + Margin
Total Width = Content Width + Padding + Border + Margin
Total Width = Content Width
Total Width = Content Width + Padding + Border
What is the purpose of the filter property in CSS?
Changing the scale and rotation of an element.
Changing the background color and texture of an element.
Altering the size and position of an element.
Modifying the visual appearance of an element by using various graphical effects.
What does the CSS property filter: grayscale(50%); do to an element?
It increases the brightness of the element by 50%.
It decreases the contrast of the element by 50%.
It applies a sepia effect to the element.
It applies a 50% grayscale effect to the element.
What is the purpose of the contrast() function in CSS?
It adjusts the brightness of the image, where 0% makes it black and 100% makes it white.
It adjusts the contrast of the image, where 100% makes it grey, 0% has no effect, and values over 100% increase contrast.
It adjusts the opacity of the image, where 0% makes it transparent and 100% makes it opaque.
It adjusts the contrast of the image, where 0% makes it grey, 100% has no effect, and values over 100% increase contrast.
What is the purpose of the hue-rotate() function in CSS?
It changes the brightness of an image.
It rotates an image clockwise by a certain number of degrees.
It adjusts the saturation and contrast of an image.
It applies a color shift, where the angle value defines the number of degrees to rotate around the color circle.
What is margin collapsing in CSS?
When the margin of an element is set to a negative number and this causes issues in the layout.
When the margin of an element is decreased by the padding and this changes the element's dimensions.
When the margin of an element is ignored by the browser, so it's not visible.
When the vertical margins of adjacent elements overlap, so they are combined into a single margin.
Which of the following is TRUE about the translate() function?
It is used to scale the size of an element.
It is used to translate the text of an element.
It is used to change the shape or size of an element.
It is used to move an element from its current position.
Which of the following is a component of the CSS box model?
Width
Height
Size
Padding
When an element's box-sizing is set to content-box, which part of the box model does the width and height apply to?
Content, padding, border, and margin
Content and padding
Content, padding, and border
Content
When an element's box-sizing is set to border-box, which parts of the CSS box model does the width and height NOT apply to?
The content area.
Padding
Border
Margin
Which value for the brightness() function makes an element completely black?
100%
0px
100px
0%
What kind of values does the hue-rotate() function use?
Pixels
Radians
Percentages
Degrees
What does the CSS property filter: contrast(0%); do to an element?
It will make the element appear completely white.
It will make the element appear completely black.
It will have no effect on the element.
It will make the element appear completely grey.
What is the baseline value of the brightness() CSS function from which increasing brightness starts?
100px
50px
50%
100%
What kind of values does the grayscale() function use?
Pixels
Degrees
Radians
Percentages
What kind of values does the contrast() function use?
Pixels
Degrees
Radians
Percentages
What does the overflow-x property in CSS control?
It determines the horizontal overflow on the y-axis.
It determines the vertical overflow on the y-axis.
It determines the vertical overflow on the x-axis.
It determines the horizontal overflow on the x-axis.
What does the overflow-y property in CSS control?
It determines the horizontal overflow on the x-axis.
It determines the vertical overflow on the x-axis.
It determines the horizontal overflow on the y-axis.
It determines the vertical overflow on the y-axis.
What is an example of a third party option for a CSS reset?
clean.css
restore.css
reset.css
sanitize.css
How many dimensions are there to the overflow property in CSS?
One
Three
Four
Two
If the shorthand property overflow is given two values, which property will use the first value?
overflow-y
overflow-w
overflow-z
overflow-x
What kind of blur effect does the blur() function apply to an element in CSS?
Giliani
Galilei
Galileo
Gaussian
What kind of values does the sepia() function use?
Pixels
Radians
Degrees
Percentages
If the shorthand property overflow is given two values, which property will use the second value?
overflow-w
overflow-x
overflow-z
overflow-y
What does a CSS reset do?
It forces browsers to use dark mode by default.
It removes inline styles from HTML elements.
It disables browser extensions that include CSS.
It removes default browser styling.
What does the CSS property filter: grayscale(100%); do to an element?
It will have no effect on the element.
It will make the element appear completely black.
It will make the element appear completely white.
It removes color saturation while maintaining the element's tonal structure.