1. Which CSS pseudo-class is used to style an input field that is required but not filled out?
(A) invalid
(B) required
(C) optional
(D) valid
2. Which pseudo-class targets input elements that are optional?
(A) disabled
(B) required
(C) enabled
(D) optional
3. Which CSS property changes the style of placeholder text inside form fields?
(A) form
(B) input
(C) placeholder
(D) field
4. Which CSS property changes the cursor when hovering over form elements?
(A) pointer-events
(B) cursor
(C) hover
(D) active
5. Which CSS property controls the spacing inside input fields?
(A) margin
(B) padding
(C) border-spacing
(D) gap
6. Which CSS property allows you to create a counter that increments automatically?
(A) counter-increment
(B) counter-reset
(C) list-style-type
(D) content
7. Which CSS property resets a counter to a specific value?
(A) counter-increment
(B) counter-reset
(C) list-style
(D) content
8. Which CSS property inserts content before or after an element, often used with counters?
(A) content
(B) before
(C) after
(D) All of the above
9. Which of the following is an absolute CSS unit?
(A) px
(B) em
(C) %
(D) rem
10. Which of the following is a relative CSS unit?
(A) pt
(B) cm
(C) em
(D) mm
11. Which CSS unit is relative to the font size of the root element?
(A) px
(B) em
(C) rem
(D) %
12. Which CSS unit represents a percentage of the parent element’s width?
(A) %
(B) vh
(C) vw
(D) em
13. Which CSS property is inherited by default by child elements?
(A) color
(B) margin
(C) padding
(D) border
14. Which CSS property is not inherited by default?
(A) font-family
(B) line-height
(C) margin
(D) color
15. Which keyword forces a property to inherit the value from its parent?
(A) inherit
(B) initial
(C) unset
(D) revert
16. Which keyword resets a property to its default initial value?
(A) revert
(B) inherit
(C) unset
(D) initial
17. Which CSS concept determines which style is applied when multiple rules match the same element?
(A) Specificity
(B) Cascade
(C) Inheritance
(D) Priority
18. Which of the following has the highest specificity?
(A) ID selectors
(B) Inline styles
(C) Class selectors
(D) Element selectors
19. Between a class selector and an ID selector, which has higher specificity?
(A) Class selector
(B) ID selector
(C) Both are equal
(D) Depends on order in CSS
20. How is specificity calculated for inline styles?
(A) Inline styles override everything except !important
(B) Inline styles have the same weight as ID selectors
(C) Inline styles are weaker than class selectors
(D) Inline styles are weaker than element selectors
21. What does the !important rule do in CSS?
(A) Disables a style
(B) Makes a style optional
(C) Makes a style the highest priority, overriding other rules
(D) Reverts a style to default
22. Which of the following is a valid CSS math function?
(A) sum()
(B) math()
(C) compute()
(D) calc()
23. Which CSS function allows combining percentages and pixels in one property?
(A) min()
(B) calc()
(C) max()
(D) clamp()
24. Which CSS math function chooses the smallest value from multiple values?
(A) max()
(B) min()
(C) clamp()
(D) calc()
25. Which CSS math function chooses the largest value from multiple values?
(A) calc()
(B) min()
(C) clamp()
(D) max()
26. Which CSS math function clamps a value between a minimum and maximum?
(A) clamp()
(B) calc()
(C) min()
(D) max()
27. Which of the following is a recommended method for CSS optimization?
(A) Minifying CSS
(B) Using shorthand properties
(C) Removing unused CSS
(D) All of the above
28. Which tool can help identify unused CSS rules?
(A) Chrome DevTools Coverage Tab
(B) Text Editor
(C) Browser Cache
(D) Console.log()
29. Why is CSS accessibility important?
(A) Makes sites load faster
(B) Improves SEO ranking only
(C) Ensures websites are usable by people with disabilities
(D) Reduces file size
30. Which CSS property improves accessibility for screen readers?
(A) visibility: hidden;
(B) display: none;
(C) aria-* attributes combined with semantic HTML
(D) opacity: 0;
31. Which CSS property can be used to create a flexible website layout?
(A) flex
(B) grid
(C) float
(D) All of the above
32. Which CSS layout method allows placing items in rows and columns?
(A) Flexbox
(B) Grid
(C) Float
(D) Inline-block
33. Which CSS property defines the spacing between grid items?
(A) spacing
(B) padding
(C) margin
(D) gap
34. Which layout method is best for one-dimensional layouts?
(A) Grid
(B) Flexbox
(C) Float
(D) Table
35. Which CSS property helps create a sticky navigation bar?
(A) position: relative;
(B) position: fixed;
(C) position: sticky;
(D) position: absolute;
36. Which CSS property allows elements to wrap to the next line in a flex container?
(A) flex-basis
(B) flex-flow
(C) flex-direction
(D) flex-wrap
37. Which CSS property defines the minimum width an element can shrink to?
(A) width
(B) max-width
(C) min-width
(D) flex-shrink
38. Which CSS property defines the maximum width an element can expand to?
(A) width
(B) min-width
(C) max-width
(D) flex-grow
39. Which property is used in responsive web design to make layouts adjust automatically?
(A) Media queries
(B) Floats
(C) Inline styles
(D) Fixed widths
40. Which CSS property is used to create smooth changes in property values over time?
(A) transform
(B) animation
(C) transition
(D) keyframes
41. Which property specifies the duration of a CSS transition?
(A) transition-time
(B) transition-duration
(C) transition-delay
(D) transition-effect
42. Which CSS property allows a delay before a transition starts?
(A) transition-delay
(B) transition-duration
(C) animation-delay
(D) animation-duration
43. Which CSS at-rule defines keyframes for animations?
(A) @keyframes
(B) @animation
(C) @transition
(D) @frames
44. Which CSS property sets the name of an animation to use with @keyframes?
(A) animation-frame
(B) animation-key
(C) animation-name
(D) animation-id
45. Which CSS property controls how many times an animation should play?
(A) animation-iteration-count
(B) animation-repeat
(C) animation-duration
(D) animation-cycle
46. Which CSS filter applies a blur effect to an element?
(A) filter: brightness(50%);
(B) filter: opacity(50%);
(C) filter: grayscale(100%);
(D) filter: blur(5px);
47. Which CSS filter converts an element to grayscale?
(A) filter: blur(5px);
(B) filter: grayscale(100%);
(C) filter: brightness(50%);
(D) filter: contrast(100%);
48. Which CSS filter adjusts the brightness of an element?
(A) filter: opacity(50%);
(B) filter: contrast(50%);
(C) filter: blur(5px);
(D) filter: brightness(50%);
49. Which CSS gradient creates a smooth transition from one color to another along a straight line?
(A) conic-gradient
(B) radial-gradient
(C) linear-gradient
(D) repeating-gradient
50. Which CSS gradient radiates from a central point outward in a circular shape?
(A) conic-gradient
(B) linear-gradient
(C) radial-gradient
(D) repeating-gradient
51. Which CSS gradient is rotated around a center point like a pie chart?
(A) linear-gradient
(B) conic-gradient
(C) radial-gradient
(D) repeating-gradient
52. Which CSS function repeats a gradient pattern?
(A) repeating-linear-gradient
(B) repeating-radial-gradient
(C) repeating-conic-gradient
(D) All of the above
53. Which CSS rule is used to apply styles for specific screen sizes or devices?
(A) @device
(B) @screen
(C) @media
(D) @viewport
54. Which media query keyword applies styles when the screen width is less than 768px?
(A) max-width: 768px
(B) min-width: 768px
(C) width: 768px
(D) device-width: 768px
55. Which media query keyword applies styles when the screen width is greater than or equal to 1024px?
(A) device-width: 1024px
(B) max-width: 1024px
(C) width: 1024px
(D) min-width: 1024px
56. Which media feature targets high-resolution (retina) screens?
(A) device-pixel-ratio
(B) resolution
(C) pixel-density
(D) dpi
57. Which media query ensures styles apply only for print output?
(A) @media all
(B) @media screen
(C) @media print
(D) @media projection
58. Which property is commonly combined with media queries to create responsive typography?
(A) font-size
(B) line-height
(C) letter-spacing
(D) font-weight
59. Which unit is recommended for responsive typography in media queries?
(A) pt
(B) px
(C) cm
(D) rem