wayground logo

Free Printable Worksheets

NEW

Font size

S
M
L
XL
Worksheets

[Week 4 ] CSS Essentials: Box Model, Layouts, and Styling

Total questions: 25

Worksheet time: 38mins

Name
Class
Date
1.

What are the four components of the CSS Box Model?

a)

Content, Padding, Margin, Border

b)

Content, Margin, Border, Width

c)

Padding, Border, Height, Width

d)

Content, Padding, Height, Margin

2.

What does the Padding property do in the Box Model?

a)

Adds space outside the border

b)

Adds space between the content and the border

c)

Changes the border color

d)

Resizes the element

3.

Which property is used to define the space outside the element?

a)

Padding

b)

Margin

c)

Border

d)

Width

4.

What does the box-sizing property do when set to border-box?

a)

It includes padding and border in the element’s total width and height

b)

It excludes padding and border from the element’s total width and height

c)

It only affects the border

d)

It changes the display property

5.

Which of the following lengths is relative to the viewport width?

a)

px

b)

em

c)

vw

d)

rem

6.

Which property is commonly used to center an element horizontally?

a)

text-align: center;

b)

margin: auto;

c)

display: block;

d)

float: left;

7.

How do you adjust the spacing between elements in CSS?

a)

By changing the line-height

b)

By using padding and margin

c)

By altering the font size

d)

By using text-indent

8.

What does inheritance in CSS refer to?

a)

Elements receiving styles from their parent elements

b)

Copying styles from one element to another

c)

Using the same class for multiple elements

d)

Styling elements based on their type

9.

Which color model uses RGB values?

a)

HSL

b)

CMYK

c)

HEX

d)

RGB

10.

What is the purpose of the Developer Tools in browsers?

a)

To edit images

b)

To debug and analyze web pages

c)

To create HTML documents

d)

To optimize server performance

11.

Which CSS property is used to change the font size?

a)

font-style

b)

font-weight

c)

font-size

d)

text-size

12.

Which of the following is NOT a valid CSS length unit?

a)

px

b)

em

c)

km

d)

rem

13.

What does the property 'color' change in CSS?

a)

Background color

b)

Text color

c)

Border color

d)

Padding color

14.

Which CSS property controls the space between lines of text?

a)

letter-spacing

b)

word-spacing

c)

line-height

d)

text-indent

15.

How can you make text bold in CSS?

a)

font-style: bold;

b)

font-weight: bold;

c)

text-decoration: bold;

d)

font-size: bold;

16.

Which of the following selectors will select all

elements?

a)

.h1

b)

#h1

c)

h1

d)

h1{}

17.

Which of the following properties can be used to change the background color of an element?

a)

color

b)

background-color

c)

bg-color

d)

background

18.

What does the 'float' property do in CSS?

a)

Aligns an element to the left or right of its container

b)

Centers an element

c)

Changes the display type of an element

d)

Adjusts the margin of an element

19.

Which CSS function allows for color manipulation?

a)

rgb()

b)

color()

c)

hue()

d)

rgba()

20.

Which CSS property is used to create space between the content and the border of an element?

a)

margin

b)

padding

c)

border-spacing

d)

gap

21.

What is the default value of the 'inherit' property in CSS?

a)

It inherits the value from its parent

b)

It resets to the browser default

c)

It has no effect

d)

It applies a global style

22.

Which CSS property is NOT inherited by default?

a)

color

b)

font-size

c)

margin

d)

line-height

23.

How can you explicitly prevent an element from inheriting a style?

a)

By using the 'initial' value

b)

By using the 'unset' value

c)

By using the 'inherit' value

d)

By using the 'none' value

24.

What is the unit 'vh' in CSS used for?

a)

Viewport height

b)

Viewport width

c)

Vertical height

d)

Vertical width

25.

Which of the following units is best for responsive typography?

a)

px

b)

em

c)

pt

d)

cm