CSS Properties - Exercises, Practice, Solution

CSS Properties [exercises with solution]

1. How to align the items of the flexible element?[More question inside this]

2. How to align item?[More question inside this]

3. How to center the alignments for one of the items inside a flexible element?[More question inside this]

4. How to bind an animation to a division element?

5. How to animation-delay use, then start the animation?

6. How to animation-direction use, then do the animation backward?

7. How to Specify the duration of an animation takes to complete?

8. How to animate something moving from one place to another and have it stay there?

9. How to play the animation two times?

10. How to Specify the name of the keyframe you want to bind to the selector?

11. How to animation-play-state property specify whether the animation is running or paused?

12. How to play an animation with the same speed from beginning to end?

13. How to visible or hide the backside of a rotated division element?

14. How to set different background properties in one declaration?

15. How to set the background-attachment property whether a background image is fixed or scrolls with the rest of the page?

16. How to specify the painting area of the background?

17. How to set the background-color of different elements?

18. How to set a background-image for the body element?

19. How to set the background image start from the upper left corner of the content?[More question inside this]

20. How to set the position of a background-image?[More question inside this]

21. How to repeat background image?[More question inside this]

22. How to specify the size of a background image?[More question inside this]

23. How to sets all the border properties in one declaration?[More question inside this]

24. How to border-style property sets the style of an element?[More question inside this]

25. How to sets all the bottom border properties in one declaration?[More question inside this]

26. How to defines the shape of the border of the bottom-left corner?[More question inside this]

27. How to defines the shape of the border of the bottom-right corner?[More question inside this]

28. How to set the width of the bottom border?[More question inside this]

29. How to set the collapsing borders model for a table?[More question inside this]

30. How to set the color of four borders?[More question inside this]

31. How to specify an image as the border around an element?[More question inside this]

32. How to set the border-image outside the border edges of an element?[More question inside this]

33. How to specify repeat the border image?[More question inside this]

34. How to slice the image specified by border-image-source?[More question inside this]

35. How to specify the border-image-source property is to be used as a border?

36. How to specify the width of the border image?[More question inside this]

37. How to set the style of the left border?[More question inside this]

38. How to set the color of the left border?[More question inside this]

39. How to set the style of the left border?[More question inside this]

40. How to set the width of the left border?[More question inside this]

41. How to set the rounded border to an element?[More question inside this]

42. How to set the style of the right border?[More question inside this]

43. How to set the color of the right border?[More question inside this]

44. How to set the style of the right border?[More question inside this]

45. How to set the width of the right border?[More question inside this]

46. How to set the border-spacing for a table?[More question inside this]

47. How to set the style of the top border?[More question inside this]

48. How to set the color of the top border?[More question inside this]

49. How to set a rounded border to the top-left corner of a division element?[More question inside this]

50. How to set a rounded border to the top-right corner of a division element?[More question inside this]

51. How to set the style of the top border?[More question inside this]

52. How to set the width of the top border?[More question inside this]

53. How to set the width of the four borders?[More question inside this]

54. How to set the bottom edge of the absolute position?[More question inside this]

55. How to set box-shadow of a division element?[More question inside this]

56. How to specify that division elements should have padding and border included in the element?

57. How to specify the placement of a table caption?[More question inside this]

58. How to prevent any element to be floated on the left or right side of paragraph element?[More question inside this]

59. How to set the text-color for different elements?[More question inside this]

60. How to divide the text in the division element into two columns?[More question inside this]

61. How to fills CSS columns?

62. How to set column-gap property to its default value?[More question inside this]

63. How to specify the width, style, and color of the rule between columns?

64. How to specify the color of the rule between columns?[More question inside this]

65. How to specify the style of the rule between columns?[More question inside this]

66. How to specify the width of the rule between columns?[More question inside this]

67. How heading2 element span across all columns?[More question inside this]

68. How to specify the optimal width for the columns?[More question inside this]

69. How to specify the width and number of columns?

70. How to content property is used with the :after?[More question inside this]

71. How to set a number sections and sub-sections with Section?

72. How to make counter-reset property creates or resets one or more counters?

73. How to display different type of cursor?[More question inside this]

74. How to set the text direction to "right-to-left"?

75. How to display paragraph elements as inline elements?

76. How to hide border and background on empty cells in a table?

77. How to change the color of an image to black and white?

78. How the flexible items be the same length, regardless of its content?

79. How to flex-basis property specifies the initial length of a flexible item?

80. How to set the direction of the flexible items inside the division element in reverse order?

81. How to make the flexible items display in reverse order, and wrap if necessary?

82. How to the second flex-item grow three times wider than the rest?

83. How to the second flex-item shrink three times more than the rest?

84. How to make the flexible items wrap if necessary?

85. How to the second flex-item shrink three times more than the rest?

86. How to specify all the font properties in one declaration?

87. How to specify a font named and URL where it can be found?

88. How to specify the font for a paragraph?

89. How to set the font size for different HTML elements?

90. How to specify the font-size-adjust property?

91. How to make the text in all division elements wider?

92. How to the font-style property specify the font style for a text?

93. How to set a paragraph to a small-caps font?

94. How to set different font weight for the paragraphs?

95. How to use grid element using the grid auto placement rules?

96. How to set the height and width of a paragraph?

97. How to make some space around the items of the flexible division element?

98. How to make an element move gradually down?

99. How to set the left edge of the absolute positioned of division element to the right of the left edge of its nearest positioned ancestor?

100. How to set the letter spacing for heading elements?

101. How to set the line height in percent?

102. How to specify all the list properties in one declaration?

103. How to specify an image as the list-item marker in a list?

104. How to specify that the list-item markers should appear inside the content flow?

105. How to set the different type list style?

106. How to set margins of a paragraph element?

107. How to set the bottom margin for a paragraph element?

108. How to set the left margin for a paragraph element?

109. How to set the right margin for a paragraph element?

110. How to set the top margin for a paragraph element?

111. How to set the maximum height of a paragraph element?

112. How to set the maximum width of a paragraph element?

113. How to change the background-color if the viewport is 400 pixels wider?

114. How to set the minimum height of a paragraph element?

115. How to set the minimum width of a paragraph element?

116. How to specify where to navigate when using the arrow keys?

117. How to set the opacity level for a division element?

118. How to set the order of the flexible items?

119. How to set the outline around a paragraph element?

120. How to set the color of a dotted outline?

121. How to specify an outline 10px outside the border edge?

122. How to set the style of an outline?

123. How to set the width of an outline?

124. How to set the overflow property to scroll?

125. How should cause a scrolling mechanism to be provided for overflowing boxes?

126. How the content is not clipped, and it may be rendered outside the content box?

127. How to set the padding of a paragraph element?

128. How to set the bottom padding for a paragraph element?

129. How to set the left padding for a paragraph element?

130. How to set the right padding for a paragraph element?

131. How to set the top padding for a paragraph element?

132. How to insert a page break after each footer element?

133. How to set the perspective from where an element is viewed?

134. How to set a 3D element's base placement?

135. How to set position an heading-2 element?

136. How to specify the quotation marks for quotations?

137. How to specify that a division element should be resizable by the user?

138. How to set the right edge of the absolute position of division element?

139. How to set the tab-size of a paragraph element?

140. How to set the table layout algorithm?

141. How to set the text alignment for elements?

142. How to align the last line of a paragraph element to the right?

143. How to set the text decoration for heading elements?

144. How to set indent of the first line of all paragraph elements?

145. How to set justify property in the paragraph elements?

146. How to use text-overflow property?

147. How to add shadow to text?

148. How to change cases of text in paragraphs?

149. How to place an element at a certain distance from the top of the document?

150. How to rotate an element using CSS?

151. How to set a rotated element's base placement?

152. How to transformed child elements preserve the 3D transformations?

153. How hover over a division element to gradually change the width?

154. How to specify the number of seconds or milliseconds to wait before the transition effect will start?

155. How to set the transition effect last for 5 seconds?

156. How to transition-property effect, when a user hover over the element?

157. How transition-timing-function property specify the speed from start to end?

158. How unicode-bidi property is used?

159. How to set vertical-align property of an element?

160. How to set visibility property of an element?

161. How is white-space property is used to handle inside an element?

162. How to specify the width of the content area of an element?

163. How to specify the word-break property to allow words to be continued to the next line?

164. How to specify the space between words in paragraph element?

165. How word-warp property allows long words to be able to be broken and wrap onto the next line?

166. How z-index property specify the z-order of an element?

See the Pen html css common editor by w3resource (@w3resource) on CodePen.