CSS MCQ Questions Answers

1. Which choice uses the correct syntax for adding a hover pseudo class to element ?

2. You want to move an element up 100px. Which CSS property would you use?

3. Which style rule would you apply to set the background image to display the contents of the wood.png file?

4. To rotate an object 30 degrees counterclockwise, which style property would you apply?

5. To make the font size of an element one size smaller than the font size of the element's container, which style property would you apply?

6. When using a font stack to declare the font family, in what order should the values appear?

7. Which five style features are associated with the box model?

8. Which statement is not true?

9. Which selector is used to select the paragraph element that is a direct descendent of section?

10. Which answer is an example of a type selector (also sometimes referred to as an element selector)?

11. Pseudo-classes are used to _.

12. Which choice is not a valid transition?

13. How can you create a semi-transparent background color?

14. What is the correct selector for targeting all text inputs that are not disabled?

15. Which property is used to create a drop shadow effect on an HTML element?

16. Which style rule would make the image 50% smaller during a hover?

17. How will the grid items display? grid-template-columns: 2fr 1fr;

18. What is the effect of this style? background-position: 10% 50%;

19. What is the correct syntax for changing the cursor from an arrow to a pointing hand when it interacts with a named element?

20. What property is used to adjust the space between text characters?

21. How do you add Google fonts to your project?

22. What is one disadvantage of using a web font service?

23. You want your styling to be based on a font stack consisting of three fonts. Where should the generic font for your font family be specified?

24. What is an alternate way to define the following CSS rule? font-weight: bold;

25. In the following CSS code, 'h1' is the ___, while 'color' is the ___. h1 { color: red;}

26. A universal selector is specified using a(n) ___.

27. Which CSS selector can you use to select all elements on your page associated with the two classes header and clear?

28. Which color will look the brightest on your screen, assuming the background is white?

29. You can use the ___ pseudo-class to set a different color on a link if it was clicked on.

30. Which CSS keyword can you use to override standard source order and specificity rules?

31. Which CSS rule takes precedence over the others listed?

32. Which W3C status code represents a CSS specification that is fully implemented by modern browsers?

33. What is an advantage of using inline CSS?

34. What is the recommended name you should give the folder that holds your project's images?

35. While HTML controls document structure, CSS controls ___.

36. In Chrome's Developer Tools view, where are the default styles listed?

37. You have a large image that needs to fit into a 400 x 200 pixel area. What should you resize the image to if your users are using Retina displays?

38. When would you use the @font-face method?

39. Which choice is not valid value for the font-style property?

40. Which statement is true of the single colon (:) or double colon (::) notations for pseudo-elements-for example, ::before and :before?

41. What is the ::placeholder pseudo-element used for?

42. Which code would you use to absolutely position an element of the logo class?

43. What is the CSS selector for an tag containing the title attribute?

44. The calc() CSS function is often used for calculating relative values. In the example below, what is the specified margin-left value? .example { margin-left: calc(5% + 5px);}

45. Which style places an element at a fixed location within its container?

46. What is not a valid way of declaring a padding value of 10 pixels on the top and bottom, and 0 pixels on the left and right?

47. What is the difference between the margin and padding properties?

48. What is not true about class selectors?

49. Which selector would select only internal links within the current page?

50. If the width of the container is 500 pixels, what would the width of the three columns be in this layout? .grid { display: grid; grid-template-columns: 50px 1fr 2fr; }

51. The values for the font-weight property can be keywords or numbers. For each numbered value below, what is the associated keyword? font-weight: 400; font-weight: 700;

52. Which statement regarding icon fonts is true?

53. What selector and property would you use to scale an element to be 50% smaller on hover?

54. What is the difference between display:none and visibility:hidden?

55. There are many advantages to using icon fonts. What is one of those advantages?

56. Which type of declaration will take precedence?

57. When using the Flexbox method, what property and value is used to display flex items in a column?

58. What is the vertical gap between the two elements below?

59. Which of the following is not a valid color value? (Alternative: Which choice is not a valid color value?)

60. CSS transform properties are used to change the shape and position of the selected objects. The transform-origin property specifies the location of the element's transformation origin. By default, what is the location of the origin?

61. In the following media query example, what conditions are being targeted?@media (min-width: 1024px), screen and (orientation: landscape) { … }

62. Which choice would give a block element rounded corners?

63. What is the rem unit based on?

64. How would you make the first letter of every paragraph on the page red?

65. When using media queries, media types are used to target a device category. Which choice lists current valid media types?

66. By default, a background image will repeat _

67. When using position: fixed, what will the element always be positioned relative to?

68. To change the color of an SVG using CSS, which property is used?

69. In the example below, when will the color pink be applied to the anchor element? a:active { color: pink;}

70. Which of the following is true of the SVG image format? (Alternative: Which statement about the SVG image format is true?)

71. What is the difference between the following line-height settings? line-height: 20px; line-height: 2;

72. When elements overlap, they are ordered on the z-axis (i.e., which element covers another). The z-index property can be used to specify the z-order of overlapping elements. Which set of statements about the z-index property are true?

73. There are many properties that can be used to align elements and create page layouts such as float, position, flexbox and grid. Of these four properties, which one should be used to align a global navigation bar which stays fixed at the top of the page?

74. Three of these choices are true about class selectors. Which is NOT true?

75. What is the line-height property primarily used for?

76. What is true of block and inline elements? (Alternative: Which statement about block and inline elements is true?)

77. When adding transparency styles, what is the difference between using the opacity property versus the background property with an rgba() value?

78. CSS grid and flexbox are now becoming a more popular way to create page layouts. However, floats are still commonly used, especially when working with an older code base, or if you need to support older browser version. What are two valid techniques used to clear floats?

79. Using an attribute selector, how would you select an element with a "title" attribute?

80. An embedded style sheet includes the style sheet within the _____ tags of the html document.

81. You can specify font-weight using numerical values from ____.

82. A function prototype is ____

83. The _____ separates the padding and the margin of a block element.

84. The number of colors a monitor can display is referred to as ____

85. If you enter only one value for border-radius properly, that radius is applied to ____ corner(s).

86. Css lets you specify the exact position of an element on a web page using the ____ property.

87. A valid value for the font-size property is any of the following except ____.

88. A style ____ is a series of rules that defines the style for a web page or an entire web site.

89. A layout for a mobile device is typically based on a _____ grid.

90. A _____ is a rule that defines the appearance of an element on a webpage.

91. A ____ is the fundamental unit in css measurements.

92. Read the following statements:

@page rotated {size: landscape}
TABLE {page: rotated; page-break-before: right}

What does this code do?

93. You defined two styles as follows:

td.right {text-align: right}
td.left {text-align: left}

Which of the following is the right way to use them in an HTML page?

94. How will you display text as a superscript?

95. Which of the following statements is correct?

96. Background-position sets the position of the background image. What happens if its value is 0% 0%?

97. Paged media differ from continuous media in that the content of the document is divided into one or more pages. When you set the dimensions, which of the following will be applied?

98. Which element property is required to define inline styles?

99. You have the following style definition:

h2, h4, h5, h6
{
color: cyan;
}

Which of the following is correct for the above definition?

100. When would you prefer to use the @import technique for applying a style sheet to your web page?