Home CSS Tutorials Quiz CSS Quiz (50 Questions) Answer all questions, track your progress live, and see your final result at the end. Progress 0 / 50 answered Q1. What does CSS stand for? Cascading Style Sheets Computer Style Syntax Creative Style System Coded Style Scripts Q2. Which property changes text color? font-color text-color color foreground Q3. Which property sets the background color? bgcolor background-color color-background fill Q4. What does the box model include? margin, border, padding, content only width and height only padding only margin Q5. Which display value creates a flex container? block inline flex table Q6. Which property aligns flex items on the main axis? align-items justify-content flex-align place-items Q7. Which property aligns flex items on the cross axis? justify-content align-items flex-wrap order Q8. Which unit is relative to the root font size? em rem px % Q9. Which unit is relative to the parent font size? rem vh em vw Q10. Which property creates space inside an element? margin padding gap outline Q11. Which property creates space outside an element? padding margin border-spacing inset Q12. Which selector targets an id? .name #name name *name Q13. Which selector targets a class? #name .name name[] @name Q14. Which pseudo-class styles hover state? :focus :hover :active :visited Q15. Which pseudo-class is best for keyboard focus styles? :hover :focus-visible :checked :first-child Q16. What does position: absolute position relative to? The viewport always The nearest positioned ancestor The html element only The next sibling Q17. What does position: sticky do? Always fixed to viewport Toggles between relative and fixed based on scroll Removes from flow permanently Creates a stacking context only Q18. Which property controls stacking order? order z-index stack layer Q19. Which layout is two-dimensional by default? Flexbox Floats CSS Grid Inline-block Q20. Which property defines grid columns? grid-template-rows grid-template-columns grid-auto-flow column-count Q21. What does gap control in Grid/Flex? Border width Spacing between items Padding inside items Margin collapse Q22. Which media feature is common for responsive design? color-index max-width resolution-x scan Q23. Which property truncates overflowing text with ellipsis? text-overflow: ellipsis with overflow hidden word-break only white-space: normal overflow: visible Q24. Which property makes text bold? font-style font-weight text-bold font-bold Q25. Which value removes an element from accessibility tree visually but keeps layout? display: none visibility: hidden opacity: 0 always clip: auto Q26. Which property is animatable for transforms? display transform document content Q27. What does specificity help decide? Which stylesheet file loads first Which CSS rule wins when selectors conflict Browser zoom level Image compression Q28. Which selector has higher specificity? div .card #main * Q29. What does !important do? Loads CSS faster Overrides normal specificity (use sparingly) Disables cascade forever Converts CSS to inline Q30. Which property sets multiple backgrounds? background-image with commas multi-bg bg-layers background-stack Q31. Which function creates a fluid size between limits? calc() clamp() attr() var() Q32. What are CSS custom properties? HTML attributes Variables defined with --name Only Sass variables Browser cookies Q33. How do you read a CSS variable? get(--name) var(--name) css(--name) prop(--name) Q34. Which property controls object fitting in replaced elements? object-fit image-fit background-size only fit-content Q35. Which display value hides an element and removes it from flow? visibility: hidden opacity: 0 display: none clip-path: none Q36. What does flex-wrap: wrap allow? Items shrink only Items wrap onto multiple lines Items reverse order Items ignore gap Q37. Which Grid value creates flexible tracks? 1fr 1px auto-fixed sticky Q38. What is mobile-first CSS? Write desktop styles first Base styles for small screens, then enhance with min-width queries Only use rem units Disable hover forever Q39. Which property softens edges of a box? border-radius outline-offset box-corner edge-radius Q40. Which property adds shadow to a box? text-shadow box-shadow drop-filter outline Q41. What does overflow: auto do? Always shows scrollbars Adds scrollbars when content overflows Clips without scroll Expands forever Q42. Which pseudo-element styles the first line? ::first-letter ::first-line ::before ::marker Q43. Which property changes list marker style? list-style-type marker-type ul-style bullet Q44. What does aspect-ratio control? Font metrics Preferred width/height ratio Z-index Animation speed Q45. Which unit is 1% of viewport width? vh vw vmin ch Q46. What does container queries respond to? Viewport only Parent/container size User timezone Network speed Q47. Which property enables smooth scrolling? scroll-behavior: smooth overflow: smooth animation: scroll transition: scroll Q48. What is the cascade? Only file order How origin, importance, specificity, and order resolve conflicts Flex wrapping Grid areas Q49. Which property creates a stacking context commonly? color opacity less than 1 / positioned z-index font-size letter-spacing Q50. Best practice for responsive images? Fixed px width only max-width: 100%; height: auto width: 1000px float: left always Finish Test Your Result