50+ CSS MCQs

1. What is CSS stands for?

  1. Cascading Style Sheets
  2. Cascade Style Sheet
  3. Color Style Sheets
  4. Color Style Sheet

Answer: A) Cascading Style Sheets

2. What CSS describes?

  1. CSS describes how calculation perform on button click.
  2. CSS describes how HTML elements are to be displayed on screen, paper, or in other media
  3. Both A. and B.
  4. None of the above

Answer: B) CSS describes how HTML elements are to be displayed on screen, paper, or in other media

3. What is the correct syntax for referring an external CSS?

  1. <link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
  2. <stylesheet rel=”stylesheet” type=”text/css” href=”mystyle.css”>
  3. <style rel=”stylesheet” type=”text/css” href=”mystyle.css”>
  4. All of the above

Answer: A) <link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

4. What is a CSS selector?

  1. A CSS selector is the CSS class name
  2. A CSS selector is the set of properties that are going to be applied on HTML elements
  3. A CSS selector is name of CSS file.
  4. A CSS selector is the first part of a CSS Rule. It may an HTML element or pattern of elements.

Answer: D) A CSS selector is the first part of a CSS Rule. It may an HTML element or pattern of elements

5. In a CSS file, there is a CSS rule for paragraphs tags – what does p can be called?

  1. Selector
  2. Attribute
  3. Property
  4. Tag

Answer: A) Selector

6. Internal styles are written within the _____ element.

  1. <style>…</style>
  2. <css>…</css>
  3. <stylesheet>…</stylesheet>
  4. Both A. and B.

Answer: A) <style>…</style>

7. Inline styles are written within the _____ attribute.

  1. style
  2. css
  3. stylesheet
  4. Both A. and B.

Answer: A) style

8. CSS comments are placed within the ______.

  1. //
  2. /* and */
  3. <* and *>
  4. <! And !>

Answer: B) /* and */

9. Can comments also span multiple lines?

  1. Yes
  2. No

Answer: A) Yes

10. Which property is used to define the text color?

  1. text-color
  2. color
  3. font-color
  4. Both A. and B.

Answer: B) color

11. Which property is used to define the background color?

  1. bgcolor
  2. bg-color
  3. background
  4. background-color

Answer: D) background-color

  1. A valid color name like “blue”
  2. HEX code like “#0000ff”
  3. RGB Value like “rgb(0,0,255)
  4. All of the above

Answer: D) All of the above

13. Which property is used to define the font of the element’s text?

  1. font
  2. font-family
  3. font-style
  4. All of the above

Answer: B) font-family

14. To make a text italic, which CSS property is used?

  1. font
  2. font-family
  3. font-style
  4. All of the above

Answer: C) font-style

15. What are the valid values of font-style property?

  1. italic, bold, bolder
  2. normal, bold, italic
  3. underline, bold, italic
  4. inherit, italic, normal, oblique

Answer: D) inherit, italic, normal, oblique

16. Why font-weight property is used?

  1. Sets how thick or thin characters in text should be displayed.
  2. Sets the size of the font
  3. Both A. and B.
  4. None of the above

Answer: A) Sets how thick or thin characters in text should be displayed

17. What is/are the correct value(s) of font-weight property?

  1. bold, italic, underline
  2. normal, bold, italic
  3. normal, bold, bolder, lighter, initial, and inherit
  4. None of the above

Answer: C) normal, bold, bolder, lighter, initial, and inherit

18. Which is the correct inline CSS for p tag to define paragraph’s text and background colors?

  1. <p css=”color: red; background-color: yellow;”>
  2. <p cssstyle=”color: red; background-color: yellow;”>
  3. <p inline=”color: red; background-color: yellow;”>
  4. <p style=”color: red; background-color: yellow;”>

Answer: D) <p style=”color: red; background-color: yellow;”>

19. What is the correct syntax of border property in CSS?

  1. border: border-width border-style border-color
  2. border: border-color border-width border-style
  3. border: border-style border-width border-color
  4. All of the above

Answer: A) border: border-width border-style border-color

20. Which of the following is the correct syntax to display the hyperlinks without any underline?

  1. a {text-decoration : underline;}
  2. a {text-decoration : none;}
  3. a {text-decoration : block;}
  4. None of the above

Answer: B) a {text-decoration : none;}

21. Which of the following is the correct syntax to remove the underline on hyperlinks and visited hyperlinks?

  1. a {text-decoration : underline;}, a:visited {text-decoration : underline;}
  2. a {text-decoration : block;}, a:visited {text-decoration : block;}
  3. a {text-decoration : none;}, a:visited {text-decoration : none;}
  4. None of the above

Answer: C) a {text-decoration : none;}, a:visited {text-decoration : none;}

22. Which CSS property is used to style the hyperlinks on hover (Mouse over)?

  1. a:mouseover
  2. a:move
  3. a:mover
  4. a:hover

Answer: D) a:hover

23. If you want to use a green dotted border around an image, which CSS property is used for that?

  1. border-style
  2. border-color
  3. border-decoration
  4. Both A. and B.

Answer: D) Both A. and B.

24. Which CSS property and value is used to center an element?

  1. text-align:center
  2. align:center
  3. text-align:middle
  4. align:middle

Answer: A) text-align:center

25. What are the valid values of text-align property?

  1. left, middle, right
  2. left, center, right
  3. left, center, right, justify
  4. left, middle, right, justify

Answer: C) left, center, right, justify

26. What is the use of “text-align:justify” in CSS?

  1. Stretches the lines so that each line has equal width
  2. Stretches the lines so that each line can be arranged in left alignment
  3. Stretches the lines so that each line can be arranged in right alignment
  4. None of the above

Answer: A) Stretches the lines so that each line has equal width

27. Which CSS property is used to specify the indentation of the first line of a text?

  1. text-align
  2. padding-left
  3. margin-left
  4. text-indent

Answer: D) text-indent

28. Which CSS property is used to specify the space between the characters in a text?

  1. text-space
  2. letter-space
  3. letter-spacing
  4. letter-distance

Answer: C) letter-spacing

29. Which CSS property is used to specify the space between lines?

  1. line-space
  2. line-spacing
  3. line-padding
  4. line-height

Answer: D) line-height

30. Which CSS property is used to specify the space between the words in a text?

  1. word-spacing
  2. word-padding
  3. word-height
  4. characters-spacing

Answer: A) word-spacing

31. Which CSS property adds shadow to text?

  1. content-shadow
  2. text-shadow
  3. word-shadow
  4. text-outline

Answer: B) text-shadow

32. Which CSS property is used to specify uppercase and lowercase letters in a text?

  1. text-transform
  2. text-case
  3. case
  4. text-casing

Answer: A) text-transform

33. Which is the correct CSS statement to capitalize the first letter of each word?

  1. text-transform: uppercase
  2. text-transform: capitalize
  3. text-transform: sentence
  4. Both A. and B.

Answer: B) text-transform: capitalize

34. What are the valid values of text-transform property?

  1. uppercase, lowercase, and capitalize
  2. uppercase, lowercase, capitalize, and sentence
  3. upper, lower, and capital
  4. upper, lower, capital, and sentence

Answer: A) uppercase, lowercase, and capitalize

35. What are the valid values of “text-decoration” property?

  1. overline, line-through, underline, and none
  2. overline, strike, line-through, underline, and none
  3. double-line, overline, line-through, underline, and none
  4. None of these

Answer: A) overline, line-through, underline, and none

36. Which CSS property specifies how to align the last line of a text?

  1. text-align
  2. last-text-align
  3. text-align-last-line
  4. text-align-last

Answer: D) text-align-last

37. Which CSS property sets the vertical alignment of an element?

  1. vertical-align
  2. vertical-text-align
  3. text-valign
  4. vertical-align-text

Answer: A) vertical-align

38. What are the valid values of vertical-align property?

  1. baseline, text-top, text-bottom, subscript, and superscript
  2. baseline, top, bottom, sub, and super
  3. baseline, text-top, text-bottom, sub, and super
  4. base, text-top, text-bottom, sub, and super

Answer: C) baseline, text-top, text-bottom, sub, and super

39. Which is the correct CSS statement to define multiple font families?

  1. font: “Times New Roman”, Times, serif;
  2. font-name: “Times New Roman”, Times, serif;
  3. font-family: “Times New Roman, Times, serif”;
  4. font-family: “Times New Roman”, Times, serif;

Answer: D) font-family: “Times New Roman”, Times, serif;

40. Which CSS property specifies the type of list item marker?

  1. list-style
  2. list-style-type
  3. list-style-circle
  4. list-style-square

Answer: B) list-style-type

41. Which is the correct CSS statement is used to remove the markers/bullets?

  1. list-style: none;
  2. list-style-type: 0;
  3. list-style-type: blank;
  4. list-style-type: none;

Answer: D) list-style-type: none;

42. Which CSS property specifies an image as the list item marker?

  1. list-style-image
  2. list-style-picture
  3. list-style-background
  4. list-style-bgimage

Answer: A) list-style-image

43. Which CSS property specifies if/how an element is displayed?

  1. block
  2. display
  3. element-display
  4. element-block

Answer: B) display

44. Which CSS property specifies the type of positioning method used for an element?

  1. positions
  2. text-position
  3. positioning
  4. position

Answer: D) position

45. HTML elements are positioned ___ by default.

  1. static
  2. fixed
  3. relative
  4. none

Answer: A) static

46. What are the valid values for “position” property?

  1. block, none, fixed, absolute, and static
  2. block, static, fixed, absolute, and sticky
  3. static, relative, fixed, absolute, and none
  4. static, relative, fixed, absolute, and sticky

Answer: D) static, relative, fixed, absolute, and sticky

47. Which CSS property specifies the opacity/transparency of an element?

  1. transparency
  2. opacity
  3. transform-opacity
  4. opacity-all

Answer: B) opacity

48. Which CSS function performs a calculation to be used as the property value?

  1. sum()
  2. add()
  3. calc()
  4. addition()

Answer: C) calc()

49. Which CSS function uses the largest value?

  1. large()
  2. maximum()
  3. max_value()
  4. max()

Answer: D) max()

50. Which CSS function uses the smallest value?

  1. small()
  2. minimum()
  3. min_value()
  4. min()

Answer: D) min()

51. In how many ways can CSS be added to HTML?

  1. One
  2. Two
  3. Three
  4. Infinite

Answer: C) Three

52. The <style> in Internal CSS refers to ___.

  1. Attributes
  2. HTML tags
  3. Selector
  4. All of the above

Answer: B) HTML tags

53. Can we link multiple stylesheets to a single page?

  1. Yes
  2. No
  3. Can’t say, it depends on CSS properties
  4. None of the above

Answer: A) Yes

54. The CSS property used to change text sizes?

  1. font-family
  2. font-size
  3. font
  4. Both A and C

Answer: D) Both A and C

55. In this line of code, identify the selector ___.

p {border: 2px solid blue;}

  1. p
  2. border
  3. 2px
  4. None of these

Answer: A) p

56. How many color names does CSS supports?

  1. 140
  2. 100
  3. 75
  4. 90

Answer: A) 140

57. The ___ property is used in the positioning of the background image.

  1. background-image
  2. background-position
  3. padding
  4. All of the above

Answer: B) background-position

58. ___ means 4 times the size of the current font.

  1. 4px
  2. 4 pt.
  3. 4em
  4. 4vw

Answer: C) 4em

59. Amongst the following browsers, which browser supports almost all the CSS properties?

  1. Firefox
  2. Safari
  3. Google Chrome
  4. Opera

Answer: C) Google Chrome

60. What is the CSS Entity for the character ‘#’?

  1. 0023
  2. 0026
  3. 0027
  4. None of the these

Answer: A) 0023

61. This selector selects all the <h> elements where the parent is a <div> element.

  1. h + p
  2. h > p
  3. p.h
  4. p > h

Answer: B) h > p

62. Which selector selects the markers of list items?

  1. :: marker
  2. .marker
  3. ::selector
  4. None of these

Answer: A) ::marker

63. Which is the most widely used font in customizing web pages?

  1. Times New Roman
  2. Georgia
  3. Arial
  4. Garamond

Answer: C) Arial

64. Which of the following CSS properties are animatable?

  1. color
  2. border-left
  3. flex
  4. All of the above

Answer: D) All of the above

65. We can give space between unit and value when assigning length values to CSS properties.

  1. True
  2. False

Answer: B) False

66. Which of these units of length is supported by Chrome Version 1.0?

  1. rem
  2. px
  3. vw
  4. vh

Answer: B) px

67. Which line of code is a must to write to apply CSS Flexbox properties?

  1. display: flex;
  2. display: flexbox;
  3. display: block;
  4. flex-direction: row;

Answer: A) display: flex;

68. The default value of justify-content property is ___.

  1. flex-start
  2. flex-end
  3. space-between
  4. None

Answer: A) flex-start

69. Which is the correct syntax for adding animation?

  1. animation: name timing-function duration
  2. animation: name duration timing-function
  3. animation: name delay duration
  4. None of these

Answer: B) animation: name duration timing-function

70. Which line of code specifies playing an animation with the same speed from beginning to the end?

  1. div {animation- timing function: linear;}
  2. div {animation- timing function: ease in;}
  3. div {animation- play- state: paused;}
  4. div {animation- fill-mode: both;}

Answer: A) div {animation- timing function: linear;}

71. Which line of code represents a universal selector?

  1. *{border: 2px solid red;}
  2. body {border: 2px solid red;}
  3. both A&B
  4. None of these

Answer: A) *{border: 2px solid red;}

72. Which of the following properties specify the width of the borders?

  1. border-width
  2. border-style
  3. border
  4. Both A and C

Answer: D) Both A and C

73. Is border-image property animatable?

  1. Yes
  2. No

Answer: B) No

74. What value is set to border: collapse property to define borders around each cell? (Refer to the image)

  1. collapse
  2. separate
  3. initial
  4. inherit

Answer: B) separate

75. Which cursor property value indicates that the program is busy?

  1. help
  2. default
  3. auto
  4. wait

Answer: D) wait

76. What does this line of code explain?

p {display: flex;}

  1. All the <p> elements are displayed as a block-level flex container
  2. All the <p> elements are not displayed by the browser
  3. All the <p> elements are displayed as a grid container
  4. All the <p> elements are displayed as an inline flex container

Answer: A) All the <p> elements are displayed as a block-level flex container

77. The text-align property defines the ___ alignment of text in an element.

  1. horizontal
  2. vertical
  3. both horizontal & vertical
  4. None of these

Answer: A) horizontal

78. Does the z-index property accept negative values?

  1. Yes
  2. No

Answer: A) Yes

79. Which CSS property is not supported by the Firefox browser?

  1. text-indent
  2. scroll- behavior
  3. overflow
  4. viewport

Answer: D) viewport

80. Which one is a fallback font?

  1. Times New Roman
  2. Georgia
  3. Serif
  4. None of these

Answer: C) Serif

81. Where do we store external stylesheets?

  1. HTML files
  2. CSS files
  3. Folder
  4. None of these

Answer: B) CSS files

82. In the given line of code, identify the type of selector used.

#Main {background-color: yellow;}

  1. CSS element selector
  2. CSS id selector
  3. Combinator selector
  4. All of the above

Answer: B) CSS id selector

83. The Hex Code for the red color is ___.

  1. #FF0000
  2. #F0F000
  3. #F0000F
  4. None of these

Answer: A) #FF0000

84. In CSS, what does HSL stands for?

  1. hue, standard, light
  2. height, standard, line-width
  3. hue, saturation, lightness
  4. hue, standard, line-width

Answer: C) hue, saturation, lightness

85. Among the following CSS properties, which property is not a shorthand property?

  1. background
  2. padding
  3. display
  4. border

Answer: C) display

86. In this line of code, what is the use of the alt attribute?

<img src=”circle.jpg” alt=”It is red”>

  1. Adds a text description to an image
  2. Provides alternative information for an image
  3. To hide an image
  4. Both A & B

Answer: D) Both A & B

87. The CSS border property specifies the style, color, and ___ of an element’s border.

  1. length
  2. size
  3. width
  4. area

Answer: C) width

88. To get this output, the CSS properties put to use are ___.

  1. display, border, align-items, justify-content
  2. display, border-width, justify-content, border-color
  3. margin, display, padding-left, justify-content
  4. None of these

Answer: A) display, border, align-items, justify-content

89. What does ‘padding: 50px 20px;’ specifies?

  1. top padding is 50px
  2. bottom padding is 20px
  3. right padding is 20px
  4. Both A & C

Answer: D) Both A & C

90. What is the default size for normal text, like paragraphs?

  1. 11px
  2. 12px
  3. 16px
  4. 18px

Answer: C) 16px

91. Which CSS property defines the radius of an element’s corners?

  1. border-corner
  2. radius
  3. corner
  4. border-radius

Answer: D) border-radius

92. Which CSS property allows you to specify an image to be used instead of the normal border around an element?

  1. border-image
  2. border-picture
  3. border-background
  4. border-bgimage

Answer: A) border-image

93. What are the RGBA color values?

  1. RGBA color values are combination of four colors
  2. RGBA color values are an extension of RGB color values with background image
  3. RGBA color values are an extension of RGB color values with an alpha channel
  4. None of the above

Answer: C) RGBA color values are an extension of RGB color values with an alpha channel

94. In a RGBA color value, what does A stand for?

  1. A specifies the opacity for a color
  2. A specifies the Aqua color
  3. A specifies the opacity Azure color
  4. All of the above

Answer: A) A specifies the opacity for a color

95. Which of the following specifies the red color with opacity?

  1. rgba(255, 0, 0, 255)
  2. rgba(255, 255, 255, 0.3)
  3. rgba(0, 0, 255, 0.3)
  4. rgba(255, 0, 0, 0.3)

Answer: D) rgba(255, 0, 0, 0.3)

96. Which is correct CSS statement to define blue background color with opacity?

  1. background-color: rgba(0, 0, 255, 0.3)
  2. background-color: rgba(0, 0, 255, 255)
  3. background-color: rgba(0, 255, 255, 0.3)
  4. background-color: rgba(0, 0, 1, 0.3)

Answer: A) background-color: rgba(0, 0, 255, 0.3)

97. HSL color value stands for_____.

  1. Hex, Saturation and Lightness
  2. Hex, Solid and Lightness
  3. Hue, Solid and Lightness
  4. Hue, Saturation and Lightness

Answer: D) Hue, Saturation and Lightness

98. What is Hue in HSL color value?

  1. Hue is a degree on the color wheel (from 0 to 360)
  2. Hue is a degree on the color wheel (from 0 to 90)
  3. Hue is a degree on the color wheel (from 0 to 180)
  4. Hue is a special color name

Answer: A) Hue is a degree on the color wheel (from 0 to 360)

99. Which is the correct HSL value for green color?

  1. background-color: hsl(180, 100%, 50%)
  2. background-color: hsl(360, 100%, 50%)
  3. background-color: hsl(120, 100%, 50%)
  4. background-color: hsl(0, 100%, 50%)

Answer: C) background-color: hsl(120, 100%, 50%)

100. What are the HSLA color values?

  1. hsla(hex, saturation, lightness, alpha)
  2. hsla(hex, solid, lightness, alpha)
  3. hsla(hue, solid, lightness, alpha)
  4. hsla(hue, saturation, lightness, alpha)

Answer: D) hsla(hue, saturation, lightness, alpha)

101. What is the valid value of alpha parameter?

  1. 0 to 255
  2. 0 to 90
  3. 0 to 16
  4. 0.1 to 1.0

Answer: D) 0.1 to 1.0

102. Which is the correct HSLA value for green color with fully transparent?

  1. hsla(360, 100%, 50%, 0.3)
  2. hsla(120, 100%, 50%, 1.0)
  3. hsla(120, 100%, 50%, 0.1)
  4. hsla(360, 100%, 100%, 0.3)

Answer: B) hsla(120, 100%, 50%, 1.0)

103. Which CSS property sets the opacity for the whole element?

  1. aplha
  2. opacity-value
  3. opacity
  4. background-opacity

Answer: C) opacity

104. Which keyword is used to make a color transparent?

  1. transparent
  2. opacity
  3. color-transparent
  4. alpha

Answer: A) transparent

105. The “transparent” keyword is equivalent to ___ RGBA value.

  1. rgba(0,0,0,0)
  2. rgba(0,0,0,1)
  3. rgba(255,255,255,0)
  4. rgba(255,255,255,1)

Answer: A) rgba(0,0,0,0)

106. Which keyword is like a variable that holds the current value of the color property of an element?

  1. color
  2. current_color
  3. currentcolor
  4. elementcolor

Answer: C) currentcolor

107. Which keyword inherits its value from its parent element?

  1. inheritfromparent
  2. parenetvalue
  3. inherit
  4. inherits

Answer: C) inherit

108. What are the names of different gradients in CSS?

  1. Linear Gradients, Radial Gradients, and Conic Gradients
  2. Linear Gradients, Vertical Gradients, and Corner Gradients
  3. Horizontal Gradients, Vertical Gradients, and Conic Gradients
  4. Linear Gradients, Radial Gradients, Vertical Gradients, and Conic Gradients

Answer: A) Linear Gradients, Radial Gradients, and Conic Gradients

109. Which gradients define the color by their center?

  1. Linear Gradients
  2. Radial Gradients
  3. Conic Gradients
  4. Both A. and B.

Answer: B) Radial Gradients

110. Which gradients rotate color around a center point?

  1. Linear Gradients
  2. Radial Gradients
  3. Conic Gradients
  4. Both A. and B.

Answer: C) Conic Gradients

Similar: