Free Practice Quiz Question List

3 CSS Styling and Layout Online Quiz Questions

Use this free practice quiz with 20 questions to review 3 CSS Styling and Layout, test your knowledge, and prepare for your next test or exam.

20 questions

True or false

1 point

True or false: A web page can remain readable even when it has no author stylesheet because browsers apply default styles.

A
True
B
False

Choose one

1 point

Which element does the CSS selector #main target?

A
Every element with the class main
B
The element with ID main
C
Every <main> element
D
Every paragraph inside an element with ID main

Fill in the blank

1 point

A comma-separated group such as h1, h2 that applies the same declarations to each match is called a selector .

Written response

1 point

In the typography example, what numeric value is assigned to body's line-height? Enter the number only.

Choose one

1 point

Which CSS property should you use to provide a fallback font stack if your first-choice font is unavailable?

A
font-style
B
font-weight
C
font-family
D
line-height

True or false

1 point

True or false: In normal flow, block boxes such as paragraphs usually start on a new line and take the available width.

A
True
B
False

Fill in the blank

1 point

In the CSS box model, the region that creates space outside an element's border is the .

Choose all

1 point

Select all the properties that normally inherit their values from an element's parent.

A
color normally inherits from a parent.
B
margin normally inherits from a parent.
C
font-family normally inherits from a parent.
D
border normally inherits from a parent.

Choose one

1 point

Which CSS property controls the alignment of text?

A
font-weight
B
text-align
C
font-family
D
font-style

Choose all

1 point

Select all the correct statements about Grid and responsive layout.

A
Grid arranges items in rows and columns.
B
Grid is designed only for one-dimensional toolbars.
C
Responsive layout can use flexible sizing and media queries to adapt to available space and screen sizes.
D
Responsive layout prevents content from adapting to different screen sizes.

Written response

1 point

What CSS selector targets paragraphs inside an <article> element? Enter the selector exactly.

Choose one

1 point

A grid uses grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)). What happens to the number of columns when the available screen width becomes narrower?

A
The grid always keeps the same number of columns, regardless of screen width.
B
The grid forces every column to become narrower than 14rem.
C
Fewer columns fit on narrower screens.
D
The grid changes into a Flexbox layout.

Open ended

1 point

Consider the CSS rules p { color: #333; } and article p { color: #145a32; }. What color does a paragraph inside an <article> use, and why?

Choose one

1 point

You want one CSS rule to target every element assigned the notice class, regardless of element type. Which selector should you use?

A
#notice
B
.notice
C
notice
D
article notice

True or false

1 point

In normal flow, a paragraph displayed as a block usually starts on a new line and takes the available width.

A
True
B
False

Choose one

1 point

A page's background is already correct, but its text needs a different foreground color. Which CSS property should you change?

A
background-color
B
font-color
C
color
D
text-background

Choose one

1 point

A navigation bar needs its items aligned across a row. Which CSS layout system is a suitable choice for arranging and aligning those items along one axis?

A
Flexbox
B
Grid
C
Normal flow only
D
The box model

Choose one

1 point

A page section contains a collection of cards that should be arranged in both rows and columns. Which layout system best matches that two-dimensional structure?

A
Flexbox
B
A type selector
C
Normal flow
D
Grid

Written response

1 point

You want a text block's line spacing to scale with its text size, using a unitless value such as 1.5. Which CSS property should you set?

Written response

1 point

A design specifies a preferred font that may not be installed on every device. What should the font-family declaration include so the browser can use another available font?