Loading... Login Loading... Register

CSS Layout Techniques Quiz

Want to learn more than this quiz offers you? Have a look at my Frontend web development courses.

Create an account and save your quiz results

Login and save your results

First Name *

Last Name *

Email *

Password *

Confirm Password *

I agree to the Terms of Service & Privacy Policy.

Add me to your newsletter.

Question 1/15

Which CSS property is used to stick an element at the top of the viewport while scrolling?

Select your answer

position: absolute;

position: sticky;

position: relative;

position: fixed;

Question 2/15

What is the main purpose of using the

display: block;

CSS property?

Select your answer

To prevent elements from being floated.

To make an element contain its children.

To make text items inline.

To stack elements vertically and occupy the full width of their container.

Question 3/15

If an HTML element is using

position: absolute;

, to what is it positioned relative?

Select your answer

The closest ancestor that is not statically positioned

The document root

The

body

tag always

Its immediate parent only

Question 4/15

Which CSS property adjusts the alignment of contents of the last line in a flex container?

Select your answer

align-content

align-items

justify-items

align-content

Question 5/15

Which property is used to define how to distribute space between and around items along the flex container's cross-axis?

Select your answer

justify-content

align-items

align-self

align-content

Question 6/15

Which CSS property is used to add space between columns in a CSS Grid layout?

Select your answer

spacing

grid-gap

gap

column-gap

Question 7/15

Which of the following CSS properties can be animated?

Select your answer

font-family

display

width

background-image

Question 8/15

What CSS property controls the space inside the border of an element?

Select your answer

margin

border-spacing

outline

padding

Question 9/15

How would you center an element horizontally and vertically inside a flex container?

Select your answer

justify-content: center; align-items: center;

align-content: center; justify-items: center;

justify-self: center; align-self: center;

align-self: center; justify-content: space-between;

Question 10/15

What is the effect of the CSS property

display: none;

on an HTML element?

Select your answer

Hides the element but keeps its spot in the flow

Hides the element and removes it from the document flow

Makes the element visible with zero opacity

Applies only to text elements

Question 11/15

Which CSS property is used to change the alignment of the content inside a flex container?

Select your answer

align-items

flex-flow

flex-align

justify-content

Question 12/15

How would you allow a flex item to grow and shrink as necessary, while maintaining a balanced space among other items?

Select your answer

flex: 1;

flex-basis: auto;

flex-direction: row;

flex-grow: 1; flex-shrink: 1;

Question 13/15

Which CSS property allows you to control the wrapping of flex items in a flex container?

Select your answer

wrap

flex-flow

flex-wrap

flex-direction

Question 14/15

When using CSS animations, which property specifies the time an animation takes to complete one cycle?

Select your answer

animation-duration

animation-direction

animation-iteration-count

animation-delay

Question 15/15

Which is the correct syntax to create a 2x2 CSS Grid layout?

Select your answer

grid-template: 1fr / 2fr;

grid-template-columns: 1fr 1fr; grid-template-rows: repeat(1, 2fr);

grid: auto / auto;

grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which CSS property is used to stick an element at the top of the viewport while scrolling?

Available answers

position: absolute;

position: sticky;

position: relative;

position: fixed;

The

position: sticky;

property helps to keep an element in a fixed position relative to the viewport as the user scrolls.

Question 2/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the main purpose of using the <pre><code>display: block;</code></pre> CSS property?

Available answers

To prevent elements from being floated.

To make an element contain its children.

To make text items inline.

To stack elements vertically and occupy the full width of their container.

The

display: block;

property makes an element take up the full width available and stack vertically, with no other elements beside them.

Question 3/15

😊 Your answer was correct 🙁 Your answer was incorrect

If an HTML element is using <pre><code>position: absolute;</code></pre>, to what is it positioned relative?

Available answers

The closest ancestor that is not statically positioned

The document root

The <pre><code>body</code></pre> tag always

Its immediate parent only

An element with

position: absolute;

is positioned relative to its nearest ancestor with a position other than

static

. If no such ancestor exists, it is placed relative to the initial containing block (usually the HTML

body

Question 4/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which CSS property adjusts the alignment of contents of the last line in a flex container?

Available answers

align-content

align-items

justify-items

align-content

The

align-content

property is used to align flex items on the cross-axis when there is extra space in the container, affecting only how the items are aligned within the entire flex container.

Question 5/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which property is used to define how to distribute space between and around items along the flex container's cross-axis?

Available answers

justify-content

align-items

align-self

align-content

The

align-content

property in a flex container is used to distribute space between and around the flex items along the cross-axis (perpendicular to the main axis).

Question 6/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which CSS property is used to add space between columns in a CSS Grid layout?

Available answers

spacing

grid-gap

gap

column-gap

The

column-gap

property is specifically used in Grid Layout to add space between columns.

gap

can be used to set space overall (both rows and columns).

Question 7/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which of the following CSS properties can be animated?

Available answers

font-family

display

width

background-image

The

width

property can be animated in CSS to create transitions and effects for changing element sizes.

Question 8/15

😊 Your answer was correct 🙁 Your answer was incorrect

What CSS property controls the space inside the border of an element?

Available answers

margin

border-spacing

outline

padding

The

padding

property defines the space between an element's content and its border, allowing elements to be spaced internally.

Question 9/15

😊 Your answer was correct 🙁 Your answer was incorrect

How would you center an element horizontally and vertically inside a flex container?

Available answers

<pre><code>justify-content: center; align-items: center;</code></pre>

<pre><code>align-content: center; justify-items: center;</code></pre>

<pre><code>justify-self: center; align-self: center;</code></pre>

<pre><code>align-self: center; justify-content: space-between;</code></pre>

Using

justify-content: center;

and

align-items: center;

will center the element inside the flex container both horizontally and vertically.

Question 10/15

😊 Your answer was correct 🙁 Your answer was incorrect

What is the effect of the CSS property <pre><code>display: none;</code></pre> on an HTML element?

Available answers

Hides the element but keeps its spot in the flow

Hides the element and removes it from the document flow

Makes the element visible with zero opacity

Applies only to text elements

The

display: none;

property hides an element and removes it from the document flow, so it occupies no space on the page.

Question 11/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which CSS property is used to change the alignment of the content inside a flex container?

Available answers

align-items

flex-flow

flex-align

justify-content

The

justify-content

property is used to align flex items along the main axis (horizontally by default) of the container. It controls the alignment of items when there is extra space in the container.

Question 12/15

😊 Your answer was correct 🙁 Your answer was incorrect

How would you allow a flex item to grow and shrink as necessary, while maintaining a balanced space among other items?

Available answers

flex: 1;

flex-basis: auto;

flex-direction: row;

flex-grow: 1; flex-shrink: 1;

The short syntax

flex: 1;

allows a flex item to both grow and shrink from a flex-basis of 0. This effectively divides remaining space equally among flex items.

Question 13/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which CSS property allows you to control the wrapping of flex items in a flex container?

Available answers

wrap

flex-flow

flex-wrap

flex-direction

The

flex-wrap

property allows you to specify whether flex items should wrap onto multiple lines or not. It handles the layout of items in both row and column directions.

Question 14/15

😊 Your answer was correct 🙁 Your answer was incorrect

When using CSS animations, which property specifies the time an animation takes to complete one cycle?

Available answers

animation-duration

animation-direction

animation-iteration-count

animation-delay

The

animation-duration

property specifies the time it takes for an animation to complete one cycle, an essential part of defining CSS animations.

Question 15/15

😊 Your answer was correct 🙁 Your answer was incorrect

Which is the correct syntax to create a 2x2 CSS Grid layout?

Available answers

<pre><code>grid-template: 1fr / 2fr;</code></pre>

<pre><code>grid-template-columns: 1fr 1fr; grid-template-rows: repeat(1, 2fr);</code></pre>

<pre><code>grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);</code></pre>

The correct syntax to create a 2x2 grid in CSS is

grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr);

which specifies two columns and two rows, each taking an equal fraction of the space.