CSS Quiz

1 / 25

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

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

animate: all 0.5s;

transition-duration: 0.5s;

transform: transition 0.5s;

2 / 25

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

p .intro

#intro

.intro

p.intro

3 / 25

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

letter-spacing

word-spacing

text-spacing

line-height

4 / 25

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

To specify the zoom level of an element.

To control the stacking order of positioned elements.

To set the opacity of an element.

To create 3D transformations on an element.

5 / 25

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

background-color

bgcolor

color

background

6 / 25

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

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

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

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

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

7 / 25

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

display: inline-flex;

lex-direction: row;

display: flex;

flex: 1;

8 / 25

What is the purpose of the `transform` property?

To control the transition between two states of an element.

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

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

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

9 / 25

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

flex: 2;

grid-column: span 2;

grid-span: 2;

columns: 2;

10 / 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

11 / 25

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

flex

lex-shrink

flex-grow

flex-basis

12 / 25

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

relative

absolute

fixed

static

13 / 25

What does the 'box model' in CSS describe?

How HTML elements are structured and nested.

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.

The way fonts and text are rendered on a page.

14 / 25

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

float

grid-template-columns

columns

flex-flow

15 / 25

What does `rem` stand for in CSS?

Responsive E-commerce Module

Root Element Measurement

Relative to EM

Relative Element Measurement

16 / 25

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

<stylesheet>styles.css</stylesheet>

17 / 25

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

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

To perform mathematical calculations on CSS property values.

To create a responsive grid layout.

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

18 / 25

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

p { /* styles */ }

.p { /* styles */ }

*p { /* styles */ }

#p { /* styles */ }

19 / 25

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

To prevent a style from being applied to an element.

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

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

To mark a style as a warning for future developers.

20 / 25

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

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

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

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

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

21 / 25

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

position: hidden;

display: none;

visibility: hidden;

opacity: 0;

22 / 25

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

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

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

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

They are both the same and are used interchangeably.

23 / 25

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

:hover

.container

div

::before

24 / 25

Which of the following is the most specific selector?

button

button.btn-primary

#myButton

.btn-primary

25 / 25

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

a:mouseover { ... }

a::hover { ... }

a.hover { ... }

a:hover { ... }

Your score is

Overview: