CSS Responsive Design & Media Queries

Question 1

What is a CSS media query?

Accepted Answer

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

Answer

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

Question 2

What is the CSS box model?

Accepted Answer

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

Answer

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.

Question 3

What is Flexbox and when should it be used?

Accepted Answer

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

Answer

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

Question 4

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

Accepted Answer

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

Answer

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

Question 5

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

Accepted Answer

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

Answer

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

CSS Language Practice Test

CSS Language Practice Test

CSS Responsive Design & Media Queries