CSS Quiz 02

01. What is the correct way to apply a CSS rule to an element with the id "header"?

header { }

.header { }

#header { }

id=header { }

Explanation: The # symbol is used to select an element by its id.

02. Which CSS property specifies the transparency level of an element?

opacity

visibility

transparency

display

Explanation: The opacity property defines the transparency level, where 1 is fully visible and 0 is fully transparent.

03. Which of the following is NOT a valid CSS value for the display property?

block

inline

table-cell

visible

Explanation: visible is a value for the visibility property, not the display property.

04. What does the clip-path property do in CSS?

Clips an element to a specific shape or path

Adds a border

Changes the background

None of the above

Explanation: The clip-path property defines the visible region of an element by using a shape or path.

05. Which property is used to specify a transition effect when changing styles?

transform

transition

animation

duration

Explanation: The transition property is used to define the time an effect takes when a property changes.

06. What is the default value of the flex-direction property in a flex container?

row

column

row-reverse

column-reverse

Explanation: By default, the flex-direction is set to row, arranging items horizontally.

07. Which property is used to control how an image or background is repeated?

repeat-type

background-repeat

image-repeat

bg-repeat

Explanation: The background-repeat property controls how a background image is repeated.

08. What does the @keyframes rule in CSS do?

Defines a CSS animation

Sets a flex container

Controls text alignment

None of the above

Explanation: The @keyframes rule defines the steps in an animation sequence.

09. Which CSS property is used to control the overflow of content?

content-overflow

overflow

clip-content

content-flow

Explanation: The overflow property specifies how content is handled when it overflows the element’s box.

10. How do you apply a shadow to text in CSS?

letter-shadow

font-shadow

shadow-text

text -shadow

Explanation: The text-shadow property applies shadows to text.

11. Which property is used to set the width of an element’s border?

border-width

width-border

border-style

width-borderline

Explanation: The border-width property adjusts the thickness of an element's border.

12. What is the purpose of the max-width property?

Sets the largest width an element can have

Specifies minimum width

Controls margin width

None of the above

Explanation: max-width ensures the element does not exceed the specified width.

13. Which property is used to make an element float to the right or left?

position

align

float

direction

Explanation: The float property is used to position elements to the right or left.

14. Which shorthand property is used to set all border properties in one declaration?

border

border-all

border-style

border-width

Explanation: The border shorthand sets width, style, and color in a single line.

15. What is the purpose of the object-fit property?

Set the object transparency

Change the size of an object

Control the position of an object

Adjust how content fits inside an object

Explanation: object-fit defines how an object (e.g., image) is resized within its container.

16. How can you center a block element horizontally?

margin: auto;

text-align: center;

align-content: center;

justify-content: center;

Explanation: Setting margin: auto; centers block elements horizontally within their container.

17. What does the nth-child() pseudo-class do?

Selects the first child

Selects all children

Selects the nth child of an element

None of the above

Explanation: nth-child(n) selects the nth child of its parent element.

18. Which property changes the cursor when hovered over an element?

action

pointer

hover-cursor

cursor

Explanation: The cursor property specifies the mouse cursor’s appearance.

19. What is the purpose of the overflow-y property?

Controls horizontal overflow

Controls vertical overflow

Hides overflow content

None of the above

Explanation: overflow-y specifies how content overflows vertically.

20. Which value of the position property makes an element stay in the same place even when scrolling?

absolute

fixed

relative

sticky

Explanation: fixed positions an element relative to the viewport, keeping it static during scroll.

21. Which value of flex-wrap allows items to wrap onto multiple lines?

wrap

nowrap

flex

multiline

Explanation: wrap allows flex items to wrap onto new lines if necessary.

22. Which property is used to set the gap between rows in a CSS grid layout?

grid-spacing

grid-gap

column-gap

row-gap

Explanation: The row-gap property controls the vertical spacing in a grid.

23. What is the default value of the box-sizing property?

content-box

border-box

padding-box

None of the above

Explanation: The default value for box-sizing is content-box, where padding and borders are not included in width/height.

24. Which property specifies the alignment along the main axis in Flexbox?

align-self

align-items

justify-content

flex-grow

Explanation: justify-content aligns items along the main axis in a flex container.

25. What is the purpose of the filter property in CSS?

Adjusts transparency

Filters out unwanted elements

Applies visual effects to elements like blur or brightness

Changes the z-index of an element

Explanation: The filter property is used to apply graphical effects such as blur, grayscale, or brightness.

Quiz Completed!

Your Score: 0/25