CSS Quiz 04

01. What is the purpose of the clip-path property?

Clips an image to a circle, polygon, or other shape

Resizes an element to fit its parent

Aligns elements within a container

Defines the border width

Explanation: The clip-path property is used to define a visible region of an element by clipping it to a specific shape.

02. Which CSS property controls the layout and alignment of flex container items?

align-content

display

flex-direction

grid-template

Explanation: The flex-direction property defines the direction of flex items within the container.

03. What value of the overflow property hides the overflow content but still allows scrolling?

hidden

scroll

auto

visible

Explanation: The overflow: scroll; value hides overflowing content but enables scrolling.

04. Which pseudo-class matches the first child element of a parent?

:nth-child(1)

:only-child

:first-child

:first-of-type

Explanation: The :first-child pseudo-class targets the first child of a parent.

05. What does the max-width property do?

Sets the width of the content

Sets the maximum width an element can have

Limits the width of the viewport

Ensures the element's height matches the width

Explanation: The max-width property restricts the width of an element to a specific maximum.

06. Which CSS position value makes an element stay in the same place even when the page is scrolled?

absolute

static

fixed

relative

Explanation: The fixed position removes the element from the document flow and positions it relative to the viewport. It does not move when the page is scrolled.

07. Which CSS property applies a transition effect when an element changes states?

animation

transform

transition

opacity

Explanation: The transition property is used to define smooth transitions for property changes.

08. What happens to an element with position: relative but no top, right, bottom, or left values?

It moves to the top-left corner of the parent element.

It behaves like absolute.

It is hidden from view.

It stays in its original position in the normal flow of the document. *

Explanation: Relative positioning shifts an element relative to its normal flow position only when top, right, bottom, or left values are applied. Without these values, the element appears as if it has static positioning.

09. Which CSS function is used to rotate an element?

rotate()

transform()

skew()

spin()

Explanation: The rotate() function within the transform property rotates an element by a specified degree.

10. What does the visibility property do?

Hides an element and removes it from the layout

Toggles element visibility while keeping its layout

Adjusts the transparency of an element

Creates hover effects

Explanation: The visibility property hides elements but reserves their space in the layout.

11. Which property is used to set the behavior of a flexible container's items when they overflow?

overflow-wrap

flex-wrap

flex-overflow

align-wrap

Explanation: The flex-wrap property determines whether flex items should wrap onto multiple lines.

12. What unit is relative to the width of the viewport in CSS?

px

em

vw

vh

Explanation: vw stands for "viewport width" and is relative to the total width of the viewport.

13. What does the border-collapse property affect?

The spacing between elements

The spacing between table borders

The visibility of borders

The thickness of the border

Explanation: The border-collapse property specifies whether table borders should collapse into a single border.

14. Which property can be used to create a 3D transformation?

rotate()

scale()

skew()

transform: perspective()

Explanation: The perspective() function creates a 3D effect by controlling the depth of elements.

15. Which property is used to make text bold?

font-weight: bold;

font-bold: true;

font-thickness: bold;

font: bold;

Explanation: The font-weight property controls the thickness of the text.

16. What is the default value of the overflow property?

scroll

hidden

visible

auto

Explanation: By default, the overflow property is set to visible, allowing content to overflow the element.

17. Which property controls the placement of a background image?

background-position

background-align

background-anchor

background-origin

Explanation: The background-position property defines where the background image appears within the element.

18. What does the filter: grayscale(100%) property do?

Makes an element fully opaque

Converts the element's colors to grayscale

Reduces the brightness

Makes the element invisible

Explanation: filter: grayscale(100%) transforms an element's colors to grayscale.

19. What is the purpose of the :not() pseudo-class?

Selects all elements

Selects the first child

Excludes elements that match a specific selector

Matches visited elements

Explanation: The :not() pseudo-class selects elements that do not match the specified selector.

20. Which CSS property adds space between table cells?

padding

cell-spacing

border-spacing

spacing

Explanation: The border-spacing property sets the distance between the borders of adjacent table cells.

21. Which property can make an image responsive in CSS?

width: auto;

max-width: 100%;

height: auto;

float: left;

Explanation: The max-width: 100%; property ensures the image scales within its container.

22. What is the purpose of the content property in CSS?

Adds text content to an element before rendering

Modifies existing text

Hides content

Centers content

Explanation: The content property adds generated content in pseudo-elements like ::before and ::after.

23. Which property is used to set an element's stacking context?

position

display

z-index

float

Explanation: The z-index property determines the stack order of elements.

24. What does inherit mean in CSS?

Resets the property to default

Forces the property to match its parent's value

Removes the property value

Applies a gradient effect

Explanation: The inherit value makes a property take its parent’s value.

25. Which shorthand property combines all margin values?

margin

padding

spacing

border

Explanation: The margin shorthand allows you to set all four margins (top, right, bottom, left) in a single declaration.

Quiz Completed!

Your Score: 0/25