CSS Quiz

1 / 25

Which of the following properties is used to create a flex container?

flex: 1;

display: inline-flex;

display: flex;

lex-direction: row;

2 / 25

What is the correct syntax for a media query that applies styles to screens smaller than 600px?

@media (max-width: 600px) { ... }

@media (width < 600px) { ... }

@media screen and (max-width: 600px) { ... }

@media screen and (min-width: 600px) { ... }

3 / 25

Which of the following is a key feature of CSS Grid Layout?

It allows elements to overlap and stack on top of each other.

It is a one-dimensional layout system for a single row or column.

It creates a two-dimensional layout system for rows and columns.

It is used for styling and positioning text and inline elements.

4 / 25

Which of the following values for the `display` property will make an element invisible and remove it from the document flow?

opacity: 0;

display: none;

visibility: hidden;

position: hidden;

5 / 25

Which of the following properties is used to create a multi-column layout similar to a newspaper?

grid-template-columns

float

columns

flex-flow

6 / 25

Which value of the `position` property will position an element relative to the nearest positioned ancestor?

relative

fixed

static

absolute

7 / 25

What is the difference between `margin` and `padding`?

Margin is only for inline elements, and padding is only for block elements.

Padding is the space outside an element's border, while margin is the space inside.

Padding is the space inside an element's border, while margin is the space outside.

They are both the same and are used interchangeably.

8 / 25

What is the purpose of the `z-index` property?

To create 3D transformations on an element.

To control the stacking order of positioned elements.

To set the opacity of an element.

To specify the zoom level of an element.

9 / 25

What does `rem` stand for in CSS?

Root Element Measurement

Relative to EM

Relative Element Measurement

Responsive E-commerce Module

10 / 25

Which of the following is an example of a pseudo-class?

::before

:hover

.container

div

11 / 25

Which CSS selector is used to select all `<p>` elements with a class of 'intro'?

#intro

p.intro

.intro

p .intro

12 / 25

What is the purpose of the `transform` property?

To move, rotate, scale, or skew an element.

To apply a drop shadow or blur effect to an element.

To change the size of an element without affecting its surrounding elements.

To control the transition between two states of an element.

13 / 25

Which CSS property is used to specify the flexibility of an item in a flex container?

flex-basis

flex

lex-shrink

flex-grow

14 / 25

How do you apply a CSS style to every single `<p>` element on a page?

*p { /* styles */ }

p { /* styles */ }

#p { /* styles */ }

.p { /* styles */ }

15 / 25

What is the purpose of the `!important` rule in CSS?

To apply a style to all child elements of a parent.

To make a style declaration the highest priority, overriding all other declarations.

To prevent a style from being applied to an element.

To mark a style as a warning for future developers.

16 / 25

How can you make a `<div>` element span two columns in a CSS Grid layout?

flex: 2;

grid-span: 2;

grid-column: span 2;

columns: 2;

17 / 25

What is the correct way to add a transition to a property with a duration of 0.5 seconds?

transform: transition 0.5s;

transition-duration: 0.5s;

transition-property: all; transition-duration: 0.5s;

animate: all 0.5s;

18 / 25

Which of the following is the most specific selector?

.btn-primary

button

button.btn-primary

#myButton

19 / 25

Which CSS property is used to control the spacing between letters in a text?

text-spacing

line-height

word-spacing

letter-spacing

20 / 25

What is the purpose of the `calc()` function in CSS?

To perform mathematical calculations on CSS property values.

To compute the size of an element based on its content.

To create a responsive grid layout.

To calculate the color of an element based on a formula.

21 / 25

How can you specify a different style for an `<a href="#">` element that the user is currently hovering over?

a.hover { ... }

a::hover { ... }

a:hover { ... }

a:mouseover { ... }

22 / 25

Which CSS property is used to change the background color of an element?

color

background

bgcolor

background-color

23 / 25

What is the correct way to link an external stylesheet named 'styles.css' to an HTML document?

<stylesheet>styles.css</stylesheet>

24 / 25

What is the correct syntax for a CSS comment?

/* This is a comment */

# This is a comment

// This is a comment

/ This is a comment

25 / 25

What does the 'box model' in CSS describe?

The way fonts and text are rendered on a page.

The way a browser renders elements as rectangular boxes, including content, padding, borders, and margins.

The layout of an HTML document in a grid format.

How HTML elements are structured and nested.

Your score is

Overview: