CSS Programming MCQs

1. Which CSS property specifies the type of positioning method used for an element?
(A) z-index
(B) top
(C) position
(D) display

2. What is the default position value for HTML elements?
(A) relative
(B) absolute
(C) static
(D) fixed

3. Which CSS property controls the stack order of elements?
(A) position
(B) z-index
(C) overflow
(D) float

4. Which z-index value brings an element to the top of the stack?
(A) Lower number
(B) 0
(C) auto
(D) Higher number

5. Which CSS property specifies how to handle content that overflows an element’s box?
(A) overflow
(B) clip
(C) hidden
(D) scroll

6. Which overflow value adds scrollbars only when content overflows?
(A) visible
(B) hidden
(C) scroll
(D) auto

7. Which CSS property moves an element to the left or right of its container?
(A) position
(B) float
(C) display
(D) align

8. Which float value removes an element from normal flow and moves it to the right?
(A) left
(B) none
(C) right
(D) inline

9. What is the effect of display: inline-block;?
(A) Makes element absolute
(B) Makes element inline only
(C) Makes element float
(D) Makes element block-level but inline with text

10. Which CSS property aligns inline elements vertically within a line?
(A) text-align
(B) vertical-align
(C) align-items
(D) float

11. Which CSS property aligns flex items along the main axis?
(A) align-items
(B) text-align
(C) justify-content
(D) vertical-align

12. Which combinator selects elements that are direct children of a specified element?
(A) Descendant (space)
(B) Child (>)
(C) Adjacent sibling (+)
(D) General sibling (~)

13. Which combinator selects an element that is immediately preceded by a sibling element?
(A) >
(B) +
(C) ~
(D) (space)

14. Which combinator selects all siblings after a specified element?
(A) >
(B) +
(C) ~
(D) (space)

15. Which CSS position value allows an element to move relative to its normal position?
(A) static
(B) fixed
(C) absolute
(D) relative

16. Which positioning value fixes an element relative to the browser window?
(A) absolute
(B) relative
(C) sticky
(D) fixed

17. Which position value allows an element to stick based on scroll but only within its container?
(A) sticky
(B) fixed
(C) absolute
(D) relative

18. What does overflow: hidden; do?
(A) Displays all content
(B) Adds scrollbars always
(C) Clips content that overflows
(D) Makes content float

19. Which property can reset a floated element to normal flow?
(A) clear
(B) float: none;
(C) display: block;
(D) Both (A) and (B)

20. Which vertical-align value aligns the baseline of an element with the baseline of its parent?
(A) top
(B) middle
(C) baseline
(D) bottom

21. #21: Which pseudo-class targets an element when a user hovers over it?
(A) focus
(B) hover
(C) active
(D) visited

22. Which pseudo-class applies styles to the first child of its parent?
(A) first-child
(B) last-child
(C) nth-child(1)
(D) only-child

23. Which pseudo-class targets elements that are being clicked or activated?
(A) focus
(B) hover
(C) active
(D) checked

24. Which pseudo-class targets a form input that currently has focus?
(A) focus
(B) active
(C) hover
(D) target

25. Which pseudo-class selects all checked checkboxes or radio buttons?
(A) selected
(B) checked
(C) enabled
(D) valid

26. Which pseudo-class applies styles to elements that are the nth child of their parent?
(A) nth-child(n)
(B) nth-of-type(n)
(C) first-child
(D) last-child

27. Which pseudo-class selects elements that are not targeted by another selector?
(A) disabled
(B) empty
(C) root
(D) not()

28. Which pseudo-element is used to insert content before an element’s content?
(A) after
(B) before
(C) first-letter
(D) first-line

29. Which pseudo-element is used to style the first letter of an element?
(A) first-line
(B) first-letter
(C) before
(D) after

30. Which pseudo-element is used to style the first line of a block of text?
(A) first-line
(B) first-letter
(C) before
(D) after

31. Which pseudo-element inserts content after an element’s content?
(A) after
(B) before
(C) first-line
(D) first-letter

32. Which pseudo-class selects only elements that have no children?
(A) first-child
(B) only-child
(C) empty
(D) nth-child

33. Which pseudo-class selects elements that are enabled?
(A) disabled
(B) enabled
(C) checked
(D) read-only

34. Which pseudo-class selects the last child of its parent?
(A) only-child
(B) first-child
(C) nth-child(n)
(D) last-child

35. Which pseudo-element can be used to style the placeholder text inside an input field?
(A) placeholder
(B) before
(C) after
(D) first-letter

36. Which pseudo-class targets links that have already been visited?
(A) hover
(B) visited
(C) link
(D) active

37. Which pseudo-class applies styles to links that have not yet been visited?
(A) hover
(B) visited
(C) link
(D) active

38. Which pseudo-class selects elements that are the only child of their parent?
(A) nth-child
(B) first-child
(C) last-child
(D) only-child

39. Which pseudo-class targets elements that are invalid according to form validation?
(A) valid
(B) invalid
(C) checked
(D) enabled

40. Which pseudo-element can be used to style text selection by the user?
(A) before
(B) after
(C) selection
(D) first-letter

41. Which CSS property is used to set the transparency level of an element?
(A) visibility
(B) opacity
(C) transparent
(D) filter

42. What is the range of values for the CSS opacity property?
(A) 1 to 10
(B) 0 to 1
(C) 0% to 100%
(D) 0 to 100

43. Which CSS property can also be used to adjust opacity using RGBA colors?
(A) background-color
(B) color
(C) border-color
(D) all-color

44. Which CSS property is commonly used to create horizontal navigation links?
(A) display: block;
(B) display: inline;
(C) float: left;
(D) position: relative;

45. How can a dropdown menu be displayed on hover using CSS?
(A) hover pseudo-class
(B) active pseudo-class
(C) focus pseudo-class
(D) checked pseudo-class

46. Which property ensures the dropdown menu is hidden by default?
(A) display: none;
(B) visibility: hidden;
(C) opacity: 0;
(D) All of the above

47. Which CSS layout method is commonly used for image galleries?
(A) flexbox
(B) grid
(C) float
(D) All of the above

48. Which CSS property can be used to create spacing between images in a gallery?
(A) margin
(B) padding
(C) gap
(D) All of the above

49. What is an image sprite?
(A) A single image used for multiple UI elements
(B) Multiple images combined into a slideshow
(C) A type of animated GIF
(D) A background pattern

50. Which CSS property is used to display a specific part of an image sprite?
(A) background-position
(B) background-image
(C) background-repeat
(D) object-position

51. Which CSS property prevents the background image from repeating?
(A) background-size: cover;
(B) background-repeat: no-repeat;
(C) background-position: center;
(D) background-clip: content-box;

52. Which attribute selector targets elements with a specific attribute, regardless of its value?
(A) [attr]
(B) [attr=value]
(C) [attr~=value]
(D) [attr|=value]

53. Which attribute selector targets elements whose attribute value is exactly equal to a specified value?
(A) [attr]
(B) [attr=value]
(C) [attr^=value]
(D) [attr$=value]

54. Which attribute selector targets elements whose attribute value starts with a specified value?
(A) [attr*=value]
(B) [attr$=value]
(C) [attr^=value]
(D) [attr|=value]

55. Which attribute selector targets elements whose attribute value ends with a specified value?
(A) [attr^=value]
(B) [attr$=value]
(C) [attr*=value]
(D) [attr|=value]

56. Which attribute selector targets elements whose attribute value contains a specified substring?
(A) [attr^=value]
(B) [attr$=value]
(C) [attr*=value]
(D) [attr|=value]

57. Which attribute selector targets elements whose attribute value is either exactly equal to a value or starts with a value followed by a hyphen?
(A) [attr|=value]
(B) [attr^=value]
(C) [attr$=value]
(D) [attr*=value]

58. Which CSS property is commonly used to create hover effects in navigation bars?
(A) color
(B) background-color
(C) transform
(D) All of the above

59. In an image gallery using flexbox, which property evenly spaces items along the main axis?
(A) justify-content: space-between;
(B) align-items: center;
(C) flex-wrap: wrap;
(D) gap: 10px;