CSS Web Programming MCQs

1. Which CSS property is used to create rounded corners on elements?
(A) radius
(B) corner-radius
(C) border-round
(D) border-radius

2. Which value rounds all four corners of an element equally?
(A) border-radius: 10px 20px 30px 40px;
(B) border-radius: 10px 20px;
(C) border-radius: 10px;
(D) border-radius: 50% 50%;

3. Which CSS property allows using an image as the border of an element?
(A) border-picture
(B) border-image
(C) border-src
(D) border-style-image

4. Which three sub-properties are commonly used with border-image?
(A) border-image-source, border-image-slice, border-image-repeat
(B) border-image-url, border-image-size, border-image-style
(C) border-source, image-slice, image-repeat
(D) border-img, img-slice, img-repeat

5. Which CSS property sets the background color of an element?
(A) background-color
(B) bg-color
(C) color
(D) background

6. Which property sets an image as the background of an element?
(A) background-pic
(B) background-src
(C) background-image
(D) image-background

7. Which CSS property controls whether a background image repeats?
(A) repeat-image
(B) background-tiling
(C) background-repeat
(D) image-repeat

8. Which CSS property sets the position of a background image?
(A) image-position
(B) background-align
(C) background-orientation
(D) background-position

9. Which CSS property defines the overall color of text?
(A) color
(B) text-color
(C) font-color
(D) foreground-color

10. Which of these is a valid CSS color keyword?
(A) cyanblue
(B) ultraviolet
(C) brightred
(D) rebeccapurple

11. Which of the following is NOT a valid CSS color keyword?
(A) blurple
(B) gold
(C) lime
(D) teal

12. Which CSS function creates a linear gradient?
(A) radial-gradient()
(B) linear-gradient()
(C) gradient-linear()
(D) color-gradient()

13. Which CSS function creates a gradient radiating from the center outward?
(A) conic-gradient()
(B) linear-gradient()
(C) radial-gradient()
(D) circular-gradient()

14. Which CSS property applies a shadow to text?
(A) font-shadow
(B) shadow
(C) box-shadow
(D) text-shadow

15. Which CSS property applies a shadow to a box element?
(A) box-shadow
(B) shadow-box
(C) text-shadow
(D) element-shadow

16. Which of the following values is required to define a basic box shadow?
(A) Width, height, blur, spread
(B) Horizontal offset, vertical offset, blur radius, color
(C) Offset-x, offset-y, rotation, color
(D) Left, top, right, bottom

17. How do you make a circular element using border-radius?
(A) border-radius: circle;
(B) border-radius: 100%;
(C) border-radius: 50%;
(D) border-radius: round;

18. Which CSS property sets multiple background images on the same element?
(A) images-background
(B) background-images
(C) multi-background
(D) background-image with comma-separated values

19. Which CSS gradient can be used to create repeating stripes?
(A) linear-gradient()
(B) repeating-linear-gradient()
(C) radial-gradient()
(D) gradient-repeat()

20. Which of the following is a correct syntax for a text shadow?
(A) text-shadow: 2px 2px gray 5px;
(B) text-shadow: gray 2px 2px 5px;
(C) text-shadow: 2px 2px 5px gray;
(D) text-shadow: 5px 2px 2px gray;

21. Which CSS property adds a shadow effect to text?
(A) font-shadow
(B) box-shadow
(C) text-shadow
(D) shadow-text

22. Which CSS property is used to transform text into uppercase?
(A) text-case
(B) text-transform
(C) font-transform
(D) text-style

23. Which property is used to control letter spacing in text?
(A) letter-spacing
(B) word-spacing
(C) text-spacing
(D) spacing

24. Which CSS property allows importing and using custom fonts?
(A) font-import
(B) @font-face
(C) custom-font
(D) font-family

25. Which property defines the name of the custom font inside @font-face?
(A) font-family
(B) font-name
(C) font-src
(D) font-style

26. Which property specifies the URL of a custom font in @font-face?
(A) url
(B) src
(C) font-url
(D) font-src

27. Which CSS property rotates an element in 2D space?
(A) transform: translate(45px);
(B) transform: skew(45deg);
(C) transform: rotate(45deg);
(D) transform: scale(1.5);

28. Which CSS function moves an element along the X and Y axes?
(A) skew(x, y)
(B) rotate(x, y)
(C) translate(x, y)
(D) scale(x, y)

29. Which property can skew an element along the X or Y axis in 2D?
(A) skew(x-angle, y-angle)
(B) translate(x-angle, y-angle)
(C) rotate(x-angle, y-angle)
(D) scale(x-angle, y-angle)

30. Which property resizes an element in 2D space?
(A) stretch(x, y)
(B) resize(x, y)
(C) transform-size(x, y)
(D) scale(x, y)

31. Which CSS property applies a perspective to 3D transformed elements?
(A) perspective
(B) transform-perspective
(C) perspective-origin
(D) perspective-depth

32. Which property sets the origin point for 3D transformations?
(A) perspective-origin
(B) origin-3d
(C) transform-origin
(D) transform-center

33. Which CSS function rotates an element around the X-axis in 3D?
(A) rotate3D(angle)
(B) rotateY(angle)
(C) rotateZ(angle)
(D) rotateX(angle)

34. Which function rotates an element around the Y-axis?
(A) rotateZ(angle)
(B) rotateX(angle)
(C) rotateY(angle)
(D) rotate3D(angle)

35. Which CSS function rotates an element around the Z-axis?
(A) rotateX(angle)
(B) rotateZ(angle)
(C) rotateY(angle)
(D) rotate3D(x, y, z, angle)

36. Which CSS function allows rotating an element in an arbitrary 3D axis?
(A) rotate3D(x, y, z, angle)
(B) rotateX(angle)
(C) rotateY(angle)
(D) rotateZ(angle)

37. Which CSS function moves an element in 3D space along X, Y, and Z axes?
(A) transform3D(x, y, z)
(B) translate(x, y, z)
(C) move3D(x, y, z)
(D) translate3d(x, y, z)

38. Which CSS function scales an element in 3D space?
(A) scale3d(x, y, z)
(B) scale(x, y, z)
(C) transform-scale(x, y, z)
(D) resize3d(x, y, z)

39. Which property combines multiple 2D and 3D transformations in one declaration?
(A) multi-transform
(B) transform-combine
(C) transform
(D) transform-all

40. Which property allows smooth transitions for 2D and 3D transforms?
(A) transition
(B) transform-duration
(C) animation
(D) transform-delay

41. #41: Which CSS property defines how long a transition should take to complete?
(A) transition-timing
(B) transition-delay
(C) transition-duration
(D) animation-duration

42. Which property sets the timing function for a CSS transition?
(A) transition-timing-function
(B) transition-function
(C) animation-timing
(D) transition-style

43. Which property specifies which CSS properties should transition?
(A) transition-target
(B) transition-style
(C) transition-property
(D) transition-apply

44. Which at-rule defines keyframes for CSS animations?
(A) @frames
(B) @animation
(C) @transition
(D) @keyframes

45. Which property sets the name of the animation to use?
(A) animation-name
(B) animation-key
(C) animation-frame
(D) animation-id

46. Which property controls how many times an animation should play?
(A) animation-repeat
(B) animation-iteration-count
(C) animation-duration
(D) animation-cycle

47. Which CSS property displays additional information when hovering over an element?
(A) tooltip
(B) title
(C) data-tooltip
(D) hover-text

48. Which CSS pseudo-class is commonly used to show a tooltip on hover?
(A) active
(B) hover
(C) focus
(D) tooltip

49. Which CSS property adds a border radius to an image?
(A) border-radius
(B) image-radius
(C) img-border
(D) radius

50. Which CSS property applies a shadow to an image?
(A) shadow-img
(B) image-shadow
(C) box-shadow
(D) img-shadow

51. Which CSS property controls the opacity of an image?
(A) opacity
(B) filter-opacity
(C) image-opacity
(D) alpha

52. Which CSS property can make an image grayscale?
(A) opacity: 100%
(B) filter: grayscale(100%)
(C) image-filter: gray
(D) filter-gray

53. Which CSS property is used to display an image in a modal popup?
(A) image-popup
(B) modal-image
(C) display: block with JavaScript for modal
(D) display: modal

54. Which property centers an image inside a modal container?
(A) align-items: center;
(B) text-align: center;
(C) margin: auto;
(D) justify-content: center;

55. Which property adds a transition effect to an image hover state?
(A) transition
(B) animation
(C) transform
(D) filter

56. Which CSS function can scale an image on hover?
(A) image-scale(1.1)
(B) scale-image(1.1)
(C) zoom(1.1)
(D) transform: scale(1.1);

57. Which pseudo-class is used to change an image style when hovered?
(A) active
(B) focus
(C) hover
(D) image

58. Which CSS property can make an image appear circular?
(A) border-radius: 50%;
(B) circle-shape: true;
(C) shape: circle;
(D) border-radius: 100%;

59. Which CSS property adds a smooth transition effect when hovering over an image?
(A) animation: hover 0.3s;
(B) transition-hover: all 0.3s;
(C) hover-effect: smooth;
(D) transition: all 0.3s ease;

60. Which property is commonly used with image modals to darken the background?
(A) background-opacity: 0.7;
(B) background-color: rgba(0, 0, 0, 0.7);
(C) overlay-color: black;
(D) filter: darken(70%);

61. Which CSS property centers an image horizontally inside a block element?
(A) text-align: center;
(B) margin: 0 auto;
(C) align-items: center;
(D) justify-content: center;

62. Which property centers an image inside a parent using flexbox?
(A) display: flex; justify-content: center; align-items: center;
(B) display: flex; text-align: center;
(C) display: block; margin: auto;
(D) align: center;

63. Which CSS filter makes an image appear brighter?
(A) filter: opacity(150%);
(B) filter: contrast(150%);
(C) filter: grayscale(150%);
(D) filter: brightness(150%);

64. Which filter converts an image to grayscale?
(A) filter: contrast(100%);
(B) filter: blackwhite(100%);
(C) filter: grayscale(100%);
(D) filter: opacity(100%);

65. Which CSS property creates circular or elliptical image shapes?
(A) object-fit
(B) clip
(C) shape-outside
(D) border-radius

66. Which CSS property can clip an image into a custom shape?
(A) clip-path
(B) clip-image
(C) mask-shape
(D) shape-clip

67. Which property determines how an image fits into its container?
(A) image-fit
(B) object-position
(C) object-fit
(D) fit-image

68. Which object-fit value scales the image to cover the entire container, possibly cropping?
(A) cover
(B) contain
(C) fill
(D) none

69. Which object-fit value scales the image to fit inside the container without cropping?
(A) cover
(B) contain
(C) fill
(D) none

70. Which object-fit value stretches the image to fill the container, ignoring aspect ratio?
(A) fill
(B) cover
(C) contain
(D) scale

71. Which CSS property sets the alignment of an image inside its container?
(A) align-image
(B) image-position
(C) object-position
(D) position

72. Which is the correct syntax to position an image at the top right of its container using object-position?
(A) position: top right;
(B) object-position: right top;
(C) object-align: top right;
(D) object-position: top right;

73. Which filter blurs an image?
(A) filter: soften(5px);
(B) filter: smooth(5px);
(C) filter: blur(5px);
(D) filter: fade(5px);

74. Which filter adjusts image contrast?
(A) filter: brightness(120%);
(B) filter: contrast(120%);
(C) filter: saturation(120%);
(D) filter: hue-rotate(120deg);

75. Which CSS property is used to create rounded corners for circular or oval images?
(A) border-radius: 50%;
(B) border-radius: 100%;
(C) clip-path: circle();
(D) shape: circle;

76. Which filter rotates the hue of an image?
(A) filter: color-rotate(90deg);
(B) filter: rotate-hue(90deg);
(C) filter: hue-rotate(90deg);
(D) filter: color-shift(90deg);

77. Which object-position value centers an image inside its container?
(A) object-position: center;
(B) object-position: middle;
(C) object-align: center;
(D) position: center;

78. Which object-fit value leaves the image at its original size?
(A) none
(B) fill
(C) cover
(D) contain

79. Which filter inverts the colors of an image?
(A) filter: reverse(100%);
(B) filter: negative(100%);
(C) filter: invert(100%);
(D) filter: flip(100%);

80. Which filter increases the saturation of an image?
(A) filter: hue-rotate(150deg);
(B) filter: contrast(150%);
(C) filter: brightness(150%);
(D) filter: saturate(150%);

81. Which CSS property is used to hide parts of an image or element?
(A) filter
(B) clip
(C) mask
(D) overflow

82. Which property sets the image to use as a mask?
(A) mask-image
(B) mask-src
(C) clip-image
(D) image-mask

83. Which property sets the size of a mask image?
(A) clip-size
(B) mask-scale
(C) mask-dimensions
(D) mask-size

84. Which CSS property creates clickable buttons with custom styles?
(A) button-style
(B) input-type="button"
(C) button
(D) cursor: pointer;

85. Which property changes the background color of a button on hover?
(A) button-hover { color: #f00; }
(B) button:hover { background-color: #f00; }
(C) hover-button { background: #f00; }
(D) button:active { background-color: #f00; }

86. Which property adds a shadow effect to a button?
(A) shadow-button
(B) text-shadow
(C) box-shadow
(D) button-shadow

87. Which property creates pagination links for a website?
(A) ul li { display: inline-block; }
(B) pagination { list-style: none; }
(C) nav { display: pagination; }
(D) page-links { display: block; }

88. Which property styles active pagination links?
(A) pagination:active { color: #fff; }
(B) a.current { background-color: #333; color: #fff; }
(C) li.active { color: #333; }
(D) a.active { background-color: #333; color: #fff; }

89. Which property sets the number of columns for multi-column layout?
(A) column-count
(B) columns
(C) column-width
(D) multi-columns

90. Which property sets the width of each column in a multi-column layout?
(A) column-width
(B) column-size
(C) columns
(D) column-span

91. Which property sets the gap between columns?
(A) columns-gap
(B) column-spacing
(C) column-gap
(D) gap-columns

92. Which property allows an element to span multiple columns?
(A) span-columns
(B) column-span
(C) multi-span
(D) columns-merge

93. Which CSS property controls the appearance of a scrollbar?
(A) scrollbar-color
(B) overflow-style
(C) scroll-color
(D) scroll-style

94. Which pseudo-element styles the scrollbar thumb?
(A) -scroll-thumb
(B) scroll-thumb
(C) -webkit-scrollbar-thumb
(D) thumb-scroll

95. Which property changes the cursor when hovering over a UI element?
(A) mouse: pointer;
(B) cursor-style: hand;
(C) cursor: pointer;
(D) hover-cursor: pointer;

96. Which property sets the visual focus style of an input element?
(A) input-focus
(B) border-focus
(C) focus-style
(D) outline

97. Which property disables text selection for UI elements?
(A) text-select: off;
(B) disable-select: true;
(C) user-select: none;
(D) selectable: false;

98. Which property makes a UI element unclickable while still visible?
(A) disabled: true;
(B) pointer-events: none;
(C) clickable: false;
(D) opacity: 0.5;

99. Which property adds smooth transitions to UI element changes?
(A) effect
(B) animation
(C) transition
(D) ui-transition

100. Which property controls the stacking order of UI elements?
(A) order
(B) stack-order
(C) layer
(D) z-index