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

    • Include padding in sizing

    • 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