CSS Responsive Design & Media Queries 1 — Questions and Answers
Question 1: What is a CSS media query?
- A conditional rule that applies styles based on device characteristics like screen width (Correct answer)
- A database query written in CSS
- A JavaScript function for fetching data
- A way to query CSS color values
Correct 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.
Question 2: What is the CSS box model?
- The model describing how elements are rendered with content, padding, border, and margin (Correct answer)
- A 3D modeling tool for web design
- A method for creating box shadows
- A layout algorithm for container elements
Correct 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.
Question 3: What is Flexbox and when should it be used?
- A CSS layout module for arranging items in one-dimensional rows or columns with flexible sizing (Correct answer)
- A JavaScript animation library
- A responsive image format
- A CSS preprocessor like Sass
Correct 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.
Question 4: What is CSS Grid and how does it differ from Flexbox?
- Grid handles two-dimensional layouts (rows AND columns simultaneously); Flexbox handles one dimension (Correct answer)
- They are identical layout systems
- Grid is obsolete and replaced by Flexbox
- Grid only works in Internet Explorer
Correct 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.
Question 5: What is the purpose of CSS custom properties (variables)?
- To store reusable values that can be referenced throughout stylesheets and changed dynamically (Correct answer)
- To create custom HTML elements
- To define JavaScript variables in CSS
- Variables don't exist in CSS
Correct 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.
Question 6: What is specificity in CSS and how does it affect styling?
- A scoring system determining which CSS rule takes precedence when multiple rules target the same element (Correct answer)
- The speed at which CSS renders on the page
- How specific a CSS color value is
- The accuracy of CSS measurements
Correct 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.
CSS Responsive Design & Media Queries 1
What is a CSS media query?