Advanced CSS & Responsive Design

Q1. What is CSS Flexbox?

1. A.A JavaScript library for DOM element manipulation
2. B.A CSS keyframe animation type for effects
3. C.A third-party CSS framework for styling pages
4. D.A layout model for one-dimensional rows or columns✓ Correct

Report an error in this question

Q2. Which CSS property creates a flex container?

1. A.display: flex✓ Correct
2. B.flex: true
3. C.layout: flex
4. D.container: flex

Report an error in this question

Q3. What is CSS Grid?

1. A.A JavaScript grid plugin for data tables
2. B.A third-party CSS component library
3. C.A replacement exclusively for HTML tables
4. D.A two-dimensional layout for rows and columns✓ Correct

Report an error in this question

Q4. Which property defines grid columns?

1. A.column-template
2. B.grid-template-columns✓ Correct
3. C.display-columns
4. D.grid-columns

Report an error in this question

Q5. What is a media query in CSS?

1. A.A query for fetching database records
2. B.A technique applying styles based on device traits✓ Correct
3. C.An HTML element for embedding external content
4. D.A JavaScript API for browser feature detection

Report an error in this question

Q6. Which property controls the direction of flex items?

1. A.flex-align
2. B.flex-direction✓ Correct
3. C.flex-orient
4. D.flex-flow

Report an error in this question

Q7. What does justify-content do in Flexbox?

1. A.Distributes space between items along main axis✓ Correct
2. B.Sets the font family for text inside items
3. C.Aligns items along the cross axis vertically
4. D.Changes the text alignment within flex items

Report an error in this question

Q8. What is a CSS transition?

1. A.A JavaScript event triggered by user action
2. B.A smooth change between CSS property values✓ Correct
3. C.An HTML animation tag for visual effects
4. D.A page redirect to a new URL location

Report an error in this question

Q9. Which property creates a CSS animation?

1. A.transition
2. B.animation✓ Correct
3. C.motion
4. D.animate

Report an error in this question

Q10. What does align-items do in Flexbox?

1. A.Sets item width
2. B.Aligns items along the main axis
3. C.Aligns items along the cross axis✓ Correct
4. D.Changes item order

Report an error in this question

Q11. What is the difference between Flexbox and Grid?

1. A.They behave identically in all layout situations
2. B.Flexbox was introduced after Grid in the spec
3. C.Flexbox is one-dimensional, Grid is two-dimensional✓ Correct
4. D.Grid is designed exclusively for table layouts

Report an error in this question

Q12. What does grid-template-areas do?

1. A.Creates content for individual grid items
2. B.Defines named grid areas for placing items✓ Correct
3. C.Creates decorative borders around grid cells
4. D.Sets the color scheme for the grid layout

Report an error in this question

Q13. What is a CSS pseudo-element?

1. A.An HTML5 semantic element like header or footer
2. B.A fake HTML element added via JavaScript
3. C.A keyword styling a specific part of an element✓ Correct
4. D.A JavaScript component for building interfaces

Report an error in this question

Q14. What is the fr unit in CSS Grid?

1. A.A frequency measurement unit for media queries
2. B.A font ratio measurement unit for sizing
3. C.A fraction of available space in the container✓ Correct
4. D.A frame rate measurement unit for animations

Report an error in this question

Q15. How do you create a responsive breakpoint for tablets?

1. A.@responsive (tablet)
2. B.@tablet { max-width }
3. C.@breakpoint (tablet)
4. D.@media (max-width: 768px)✓ Correct

Report an error in this question

Q16. What does flex-wrap: wrap do?

1. A.Creates a decorative border around all items
2. B.Prevents items from wrapping to new lines
3. C.Wraps the text content within each flex item
4. D.Allows flex items to wrap onto multiple lines✓ Correct

Report an error in this question

Q17. What is the gap property in CSS Grid?

1. A.A gap in browser support for older versions
2. B.A grid rendering error in certain browsers
3. C.Sets the spacing between grid rows and columns✓ Correct
4. D.The outer margin space around the entire grid

Report an error in this question

Q18. What does @keyframes define in CSS?

1. A.Key events handled in JavaScript listeners
2. B.The stages of a CSS animation sequence✓ Correct
3. C.Keyboard shortcut bindings for the browser
4. D.Database primary and foreign key definitions

Report an error in this question

Q19. What is the object-fit CSS property?

1. A.A flexbox property for controlling item alignment
2. B.Specifies how an image resizes to fit its container✓ Correct
3. C.A grid alignment property for placing grid items
4. D.Fits text content into its parent containers

Report an error in this question

Q20. What is a mobile-first design approach?

1. A.Using only mobile-specific CSS frameworks
2. B.Designing websites for desktop screens first
3. C.Designing for small screens first then enhancing✓ Correct
4. D.Designing websites for mobile devices only

Report an error in this question

Q21. What is CSS Subgrid?

1. A.A third-party CSS grid component library
2. B.A sub-layout variation of the Flexbox model
3. C.A Grid feature letting nested grids adopt parent tracks✓ Correct
4. D.A standalone CSS framework for page layouts

Report an error in this question

Q22. What is the CSS aspect-ratio property?

1. A.A media query feature for responsive design
2. B.The ratio of CSS file sizes in a project
3. C.A JavaScript API for measuring dimensions
4. D.Sets a preferred aspect ratio for an element✓ Correct

Report an error in this question

Q23. What is CSS Container Queries?

1. A.Docker container related CSS configuration
2. B.Media queries designed for flex containers
3. C.Queries about the size of CSS containers
4. D.Rules applying styles based on container size✓ Correct

Report an error in this question

Q24. What is the CSS isolation property?

1. A.Removes an element completely from the DOM tree
2. B.Creates a new stacking context for the element✓ Correct
3. C.Isolates an element from the internet connection
4. D.Blocks all external CSS from affecting the element

Report an error in this question

Q25. What is the difference between transform and position for moving elements?

1. A.transform skips layout recalculation; position triggers it✓ Correct
2. B.transform only works within CSS Grid containers
3. C.position is faster for rendering than transform
4. D.They produce the same visual result always

Report an error in this question

Q26. What are CSS Logical Properties?

1. A.Properties with conditional logic based on breakpoints
2. B.Properties that adapt to writing direction like inline-start✓ Correct
3. C.Boolean CSS properties that toggle features on or off
4. D.Properties that use logic gates for conditional values

Report an error in this question

Q27. What is the prefers-reduced-motion media query?

1. A.A query detecting slow network connection speeds
2. B.A query specifically targeting mobile touch devices
3. C.A query detecting if user prefers less animation✓ Correct
4. D.A query for applying print-specific style rules

Report an error in this question

Q28. What is CSS Houdini?

1. A.A popular CSS framework for responsive layouts
2. B.Low-level APIs giving access to the CSS engine✓ Correct
3. C.A browser debugging tool for inspecting CSS
4. D.A magic trick animation library for CSS effects

Report an error in this question

Q29. What is the content-visibility CSS property?

1. A.Enables browser to skip rendering off-screen elements✓ Correct
2. B.Controls how text content is displayed on screen
3. C.An alternative to z-index for controlling layer order
4. D.A toggle switching element visibility on and off

Report an error in this question

Q30. How does the CSS cascade layer (@layer) work?

1. A.It creates z-index layers for positioned elements
2. B.It layers multiple background images on a single element
3. C.It creates visible visual layers stacked on the page
4. D.It defines explicit layers giving control over precedence✓ Correct

Report an error in this question