CSS Responsive Design and Media Queries Quiz

Last Updated :
Discuss
Comments

Question 1

What is the main purpose of using CSS media queries?

  • To change the font size of text

  • To apply styles based on the device's screen size or characteristics

  • To define the background color of an element


  • To define the number of elements on a page


Question 2

In CSS nesting (modern CSS or preprocessors), what does this mean?

nav {
  ul {
    color: red;
  }
}

  • Applies color to all <nav> elements

  • Applies color to all <ul> elements globally

  • Applies color to <ul> inside <nav>

  • Invalid syntax in all CSS

Question 3

Which of the following is the correct equivalent of nested CSS?

.card {
  p {
    color: blue;
  }
}

  • .cardp { color: blue; }

  • .card p { color: blue; }

  • .card > p { color: blue; }

  • p.card { color: blue; }

Question 4

What happens when you apply position: absolute; to an element?

  • It positions relative to the nearest positioned ancestor

  • It positions relative to the viewport

  • It stays in normal document flow

  • It always moves to the top of the page

Question 5

Which layout system is best suited for creating two-dimensional layouts (rows and columns)?

  • Flexbox

  • Grid

  • Float

  • Position

Question 6

What is the effect of display: inline-block;?

  • Element behaves like block and takes full width

  • Element becomes flexible container

  • Element is removed from flow

  • Element behaves inline but allows width/height

Question 7

Which CSS property is used to define the width of an element's content box in the box model?

  • border-width

  • padding

  • content-width

  • width

Question 8

What is the default value of the position property in CSS?

  • absolute

  • relative

  • static

  • fixed

Question 9

What is the purpose of the box-sizing property in CSS?


  • To change the size of an element

  • To include padding and borders in the element's total width and height

  • To create a responsive layout

  • To change the display type of an element

Question 10

How do you apply styles only for screens wider than 600px using media queries?

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

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

  • @media width: 600px { ... }

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

There are 15 questions to complete.

Take a part in the ongoing discussion