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

A database query written in CSS

Answer

A JavaScript function for fetching data

Answer

A way to query CSS color values

Question 2

What is the CSS box model?

Accepted Answer

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

Answer

A 3D modeling tool for web design

Answer

A method for creating box shadows

Answer

A layout algorithm for container elements

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

A JavaScript animation library

Answer

A responsive image format

Answer

A CSS preprocessor like Sass

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

They are identical layout systems

Answer

Grid is obsolete and replaced by Flexbox

Answer

Grid only works in Internet Explorer

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

To create custom HTML elements

Answer

To define JavaScript variables in CSS

Answer

Variables don't exist in CSS

Question 6

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

Accepted Answer

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

Answer

The speed at which CSS renders on the page

Answer

How specific a CSS color value is

Answer

The accuracy of CSS measurements