Wayground logo

Free Printable Worksheets

Font size

S
M
L
XL
Worksheets

CSS Properties Quiz

Total questions: 15

Worksheet time: 8mins

Name
Class
Date
1.

What does the CSS property "text-indent" control?

a)

The color of the text

b)

The font size of the text

c)

The spacing for the first line in a block of text

d)

The background color of the text

2.

What happens when you apply a positive "text-indent" value like "10px"?

a)

The text moves to the left

b)

The text moves to the right

c)

The text becomes bold

d)

The text color changes

3.

How can a large negative "text-indent" value be used in CSS?

a)

To change the text color

b)

To hide text completely

c)

To increase the font size

d)

To underline the text

4.

What is the purpose of the ":hover" state in CSS?

a)

To change the text color permanently

b)

To style elements when the mouse is over them

c)

To increase the font size

d)

To add a border to the text

5.

What is the purpose of setting the text-indent to -9999px in the CSS rule for the "annotated" class?

a)

To hide the text off-screen

b)

To change the text color

c)

To increase the font size

d)

To add a border to the text

6.

What CSS property is used to make the background partially transparent in the ":hover" state?

a)

opacity

b)

rgba

c)

background-color

d)

transparency

7.

What effect does the ":hover" state have on the "annotated" class?

a)

It changes the font style

b)

It applies a border and background color

c)

It increases the text size

d)

It removes the list item

8.

What is the effect of the CSS selector ".annotated:hover li"?

a)

It applies a solid white background to the list item.

b)

It hides the annotation text and shows a semi-transparent box.

c)

It changes the text color to red.

d)

It makes the text bold.

9.

When does the CSS selector ".annotated li:hover" become active?

a)

When the mouse is hovering over any part of the page.

b)

When the mouse is hovering over a

  • element in the "annotated class".

  • c)

    When the mouse is clicked on the list item.

    d)

    When the page is loaded.

    10.

    What background color is applied by the ".annotated:hover li" selector?

    a)

    Blue

    b)

    Red

    c)

    rgba(255,255,255,0.8)

    d)

    Green

    11.

    What happens when you hover your mouse over the image in the CSS example?

    a)

    The image changes color.

    b)

    The text appears in the box.

    c)

    The image disappears.

    d)

    The boxes change shape.

    12.

    What is the main purpose of using CSS rules in web design as mentioned in the text?

    a)

    To make websites load faster.

    b)

    To create complex effects with little effort.

    c)

    To increase website security.

    d)

    To reduce the size of images.

    13.

    What is the purpose of using the "cursor" property in CSS3?

    a)

    To change the background color of elements

    b)

    To modify the mouse cursor appearance

    c)

    To adjust the text size

    d)

    To set the font style

    14.

    Which cursor value is used to get the standard arrow cursor?

    a)

    crosshair

    b)

    pointer

    c)

    default

    d)

    text

    15.

    What happens when you add "cursor: default;" to the ".annotated li:hover" rule?

    a)

    The text color changes

    b)

    The cursor changes to a crosshair

    c)

    The cursor changes to the default arrow

    d)

    The background color changes