CSS Quiz 03

01. Which CSS property specifies the space between an element’s content and its border?

padding

margin

border-spacing

spacing

Explanation: The padding property creates space between the content and the element’s border.

02. What does the z-index property do in CSS?

Sets the stacking order of elements

Defines the size of an element

Specifies the zoom level

Controls the animation speed

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

03. Which CSS property is used to change the color of text?

text-color

font-color

color

text-style

Explanation: The color property defines the text color.

04. What is the purpose of the box-shadow property?

Adds a shadow to text

Adds a shadow around an element

Changes the shape of an element

Highlights the background

Explanation: The box-shadow property creates shadows around an element’s box.

05. Which property controls the direction of text?

writing-mode

text-direction

direction

text-align

Explanation: The direction property specifies the text direction, such as left-to-right (LTR) or right-to-left (RTL).

06. Which CSS value is used to make an element invisible but still occupy space?

visibility: hidden;

display: none;

opacity: 0;

none of the above

Explanation: visibility: hidden; hides an element but keeps its space reserved.

07. What is the correct syntax for applying multiple background images?

background: url(image1) + url(image2);

background: url(image1), url(image2);

background: images(image1, image2);

background-multi: url(image1), url(image2);

Explanation: Use a comma-separated list to apply multiple background images.

08. Which property is used to align grid items along the column axis?

justify-content

align-content

align-items

grid-align

Explanation: The align-items property aligns grid items vertically along the column axis.

09. What is the use of the outline property in CSS?

Draws a line inside the border

Draws a line outside the element

Changes the element’s background

Specifies a shadow effect

Explanation: The outline property adds a line outside the border without affecting the element’s size.

10. Which pseudo-class is used to style elements that have been visited by the user?

:hover

:active

:focus

:visited

Explanation: The :visited pseudo-class applies styles to links the user has visited.

11. Which property sets the size of the font in a web page?

font-style

font-size

text-size

letter-spacing

Explanation: The font-size property specifies the size of the text.

12. Which of the following CSS position values positions an element relative to its nearest positioned ancestor?

static

absolute

relative

fixed

Explanation: The absolute position places an element relative to its nearest ancestor that has a position value other than static. If no such ancestor exists, it will be positioned relative to the initial containing block.

13. Which property is used to set the style of a list item marker?

list-style-type

list-type

marker-style

item-style

Explanation: The list-style-type property defines the appearance of list markers (e.g., disc, square, decimal).

14. What is the purpose of the resize property in CSS?

Resizes images

Adjusts the grid layout

Changes the width of text

Allows an element to be resizable by the user

Explanation: The resize property allows users to resize elements like text areas.

15. Which property is used to control the speed of an animation?

animation-speed

animation-duration

transition-speed

animation-timing

Explanation: The animation-duration property specifies how long an animation should take.

16. What is the difference between em and rem units in CSS?

Both are the same

rem is for margins only

em is relative to the parent element, while rem is relative to the root element

None of the above

Explanation: em is relative to the parent, and rem is relative to the root.

17. Which property is used to create a gradient background?

background-color

gradient-fill

background-gradient

background-image

Explanation: A gradient is applied using the background-image property with a gradient function.

18. How do you make an element take up the full height of its parent container?

height: auto;

height: 100%;

height: fit-content;

None of the above

Explanation: Setting height: 100%; ensures the element matches the parent’s height.

19. What is the purpose of the white-space property in CSS?

Controls word spacing

Specifies how whitespace is handled inside an element

Adjusts text alignment

Changes the line height

Explanation: The white-space property defines how spaces, tabs, and line breaks are managed.

20. What is the filter: blur() property used for?

Blurs an entire web page

Blurs the background only

Applies a blur effect to the element

Changes text transparency

Explanation: filter: blur() applies a blur effect to the selected element.

21. What does the hover pseudo-class target?

Active elements

Clicked elements

Elements when the mouse is over them

Visited elements

Explanation: The :hover pseudo-class targets elements when the user hovers over them.

22. Which property is used to control the spacing between letters in text?

word-spacing

letter-spacing

text-spacing

font-spacing

Explanation: The letter-spacing property adjusts the space between characters.

23. What does the min-height property do?

Sets the smallest height an element can have

Adjusts maximum height

Aligns elements vertically

None of the above

Explanation: min-height ensures an element does not shrink below a specific height.

24. Which property controls how quickly styles transition from one state to another?

ease-property

transition-speed

animation-duration

transition-timing-function

Explanation: transition-timing-function defines the speed curve of transitions.

25. How do you make text italic using CSS?

font-weight: italic;

font-style: italic;

text-transform: italic;

font-variant: italic;

Explanation: The font-style property is used to make text italic.

Quiz Completed!

Your Score: 0/25