CSS MCQs Questions Answers

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