CSS Advanced Styling Quiz

In this quiz, we will explore advanced CSS styling techniques like layout properties, pseudo-classes, animations, and transitions. These concepts are essential for creating interactive, modern web designs.

Last Updated :
Discuss
Comments

Question 1

What does the * selector do in CSS?

  • Selects the first child of an element

  • Selects all elements on the page

  • Selects all child elements

  • Selects only div elements

Discuss it

Question 2

How do you select an element with the ID header in CSS?

  • .header

  • #header

  • header

  • *header

Discuss it

Question 3

What does the :hover pseudo-class do in CSS?

  • Targets an element when it's clicked

  • Targets an element when the mouse is over it

  • Targets an element when it’s focused

  • Targets an element when it's active

Discuss it

Question 4

What does justify-content: center do in Flexbox?

  • Aligns flex items to the top

  • Aligns flex items to the center of the container

  • Aligns flex items to the bottom

  • Stretches flex items

Discuss it

Question 5

What is the function of grid-template-columns in CSS Grid?

  • Defines the number of grid rows

  • Defines the size of grid items

  • Defines the number and size of grid columns

  • Defines the alignment of grid items

Discuss it

Question 6

What is the purpose of transition: all 0.3s ease; in CSS?

  • It animates all properties with a delay of 0.3 seconds

  • It creates a 0.3-second fade effect on all properties

  • It changes all properties instantly

  • It animates changes in all properties over 0.3 seconds

Discuss it

Question 7

What does @keyframes do in CSS?

  • Defines the size of an animation

  • Defines the steps and timing of an animation

  • Specifies the direction of an animation

  • Sets the duration of an animation

Discuss it

Question 8

What does box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); do?

  • Adds a solid border around the element

  • Creates a shadow 5px to the right and 5px down with a 10px blur

  • Adds a glow effect around the element

  • Increases the size of the element

Discuss it

Question 9

How do you define a custom property (variable) in CSS?

  • property-name: value;

  • --property-name: value;

  • var(--property-name): value;

  • custom-property: value;

Discuss it

Question 10

What does align-items: baseline; do in Flexbox?

  • Aligns all flex items along their baseline (text alignment)

  • Aligns items to the center

  • Aligns items to the top of the container

  • Aligns items to the bottom of the container

Discuss it
Tags:
CSS

There are 10 questions to complete.

Take a part in the ongoing discussion
We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy