Practice Test GeeksCSS Language Practice Test
← All CSS Flashcard Decks

Responsive Design & Media Queries Flashcards

6 cards from real CSS practice questions. Tap to flip, then mark Knew It or Still Learning — missed cards come back until you master them.

Read the first 6 Responsive Design & Media Queries flashcards as text

  1. What is a CSS media query?

    Answer: A conditional rule that applies styles based on device characteristics like screen width

    Media queries allow CSS to apply different styles based on device characteristics (width, height, orientation), enabling responsive designs that adapt to different screen sizes.

  2. What is the CSS box model?

    Answer: The model describing how elements are rendered with content, padding, border, and margin

    The CSS box model defines how every element is rendered: content area surrounded by padding, then border, then margin, with each layer affecting the element's total size.

  3. What is Flexbox and when should it be used?

    Answer: A CSS layout module for arranging items in one-dimensional rows or columns with flexible sizing

    Flexbox provides efficient layout, alignment, and distribution of space among items in a container, ideal for navigation bars, card layouts, and centering elements.

  4. What is CSS Grid and how does it differ from Flexbox?

    Answer: Grid handles two-dimensional layouts (rows AND columns simultaneously); Flexbox handles one dimension

    CSS Grid creates two-dimensional layouts managing both rows and columns simultaneously, while Flexbox is one-dimensional (row OR column). They complement each other.

  5. What is the purpose of CSS custom properties (variables)?

    Answer: To store reusable values that can be referenced throughout stylesheets and changed dynamically

    CSS custom properties (--var-name) store values that can be reused across stylesheets and updated dynamically via JavaScript, improving maintainability and enabling theming.

  6. What is specificity in CSS and how does it affect styling?

    Answer: A scoring system determining which CSS rule takes precedence when multiple rules target the same element

    CSS specificity uses a scoring system (inline > ID > class > element) to resolve conflicts when multiple rules target the same element, with the highest specificity winning.