CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 796 · 40 questions

Code tip (Rule, then maths): Find the topic: syntax, selectors, properties, colours, box model, cascade, flexbox or media queries. Decide which rule or property applies to the element. For sizes, write the sum down: both sides for the box model, free space for flexbox.

1. 1.🎯 What kind of selector is .note? (a) a class selector (b) an element selector (c) an id selector
2. 2.🖌️ What colour is behind the letters?
   h1 {
     background-color: green;
     text-align: left;
     color: purple;
     font-size: 32px;
   } (a) yellow (b) green (c) purple
3. 3.🌈 Hex digits go 0 to 9, then A to which letter? (a) G (b) F (c) J (d) Z
4. 4.🎯 Which element does the selector .note style? (a) <div id="note"> (b) <div class="note"> (c) <span class="red"> (d) <div class="big">
5. 5.What does justify-content: flex-end do? (a) packs boxes at the end (b) packs boxes at the start (c) equal gaps, none at ends (d) puts boxes in the middle
6. 6.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 200px;
     padding: 20px;
     border: 4px solid black;
     margin: 15px;
   }
7. 7.✍️ Which property is set to 300px in this rule?
   .box {
     text-align: center;
     width: 300px;
   } (a) 300px (b) color (c) font-style (d) width
8. 8.🎯 Which element does the selector .big style? (a) <h2 class="big"> (b) <li class="box"> (c) <h2 id="big"> (d) <h2 class="red">
9. 9.⚖️ What colour is the text of this element?
   <p class="box" id="logo">Hi</p>
   CSS:
   #logo { color: purple; }
   #logo { color: black; } (a) blue (b) black (c) white (d) purple
10. 10.True or false: CSS counts down a timer. (a) False (b) True
11. 11.🌈 Which colour is #ffff00? (a) blue (b) red (c) black (d) yellow
12. 12.⚖️ What colour is the text of this element?
    <h1 class="red" id="logo">Hi</h1>
    CSS:
    #logo { color: white; }
    h1 { color: green; } (a) white (b) green (c) black (d) yellow
13. 13.🖌️ How big is the text, in px?
    h2 {
      color: red;
      background-color: orange;
      font-size: 12px;
      text-align: center;
    }
14. 14.What does background-color do? (a) makes letters bigger (b) sets the letter colour (c) colours behind the text (d) makes the text bold
15. 15.What does font-size do? (a) picks the font style (b) makes letters bigger (c) colours behind the text (d) sets the letter colour
16. 16.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) red (c) black (d) green
17. 17.🎯 Which sign starts a class selector? (a) & (b) # (c) . (d) @
18. 18.📦 In the box model, which part is a solid or dotted edge? (a) border (b) padding (c) content (d) margin
19. 19.🖌️ Where does the text sit on its line?
    h2 {
      text-align: left;
      background-color: blue;
      font-size: 36px;
      color: yellow;
    } (a) in the middle (b) on the right (c) on the left
20. 20.✍️ In color: blue; which part is the property? (a) ; (b) color (c) blue (d) :
21. 21.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      width: 300px;
      margin: 10px;
      font-size: 20px;
      border: 2px solid;
    }
22. 22.⚖️ What colour is the text of this element?
    <p class="big" id="top">Hi</p>
    CSS:
    #top { color: red; }
    #top { color: black; } (a) white (b) red (c) black (d) green
23. 23.True or false: #top is a class selector. (a) True (b) False
24. 24.📱 Responsive design means a page ___. (a) is only for laptops (b) fits every screen (c) has no pictures (d) never changes
25. 25.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      border: 2px solid;
    }
26. 26.What does font-weight do? (a) makes the text bold (b) picks the font style (c) centres a heading (d) makes letters bigger
27. 27.True or false: HTML sets colours and fonts. (a) False (b) True
28. 28.What does font-family do? (a) picks the font style (b) sets the letter colour (c) makes the text bold (d) centres a heading
29. 29.🎯 What kind of selector is body? (a) a class selector (b) an element selector (c) an id selector
30. 30.🧩 Which language gives the page structure? (a) HTML (b) CSS (c) JavaScript
31. 31.🧩 Which language counts down a timer? (a) CSS (b) JavaScript (c) HTML
32. 32.🖌️ What colour are the letters?
    h2 {
      color: white;
      text-align: right;
      background-color: green;
      font-size: 40px;
    } (a) white (b) yellow (c) green
33. 33.🎯 Which CSS selector matches this element?
    <h1 class="menu" id="top">Hello</h1> (a) #menu (b) .top (c) .note (d) h1
34. 34.🖌️ How big is the text, in px?
    h2 {
      background-color: red;
      font-size: 36px;
      text-align: right;
      color: white;
    }
35. 35.⚖️ What colour is the text of this element?
    <p class="box" id="top">Hi</p>
    CSS:
    #top { color: green; }
    .box { color: white; }
    p { color: yellow; } (a) white (b) yellow (c) purple (d) green
36. 36.Which of these is the border? (a) the line round the box (b) the gap round content (c) the text or picture (d) the gap to other boxes
37. 37.True or false: body is an element selector. (a) True (b) False
38. 38.✍️ In color: blue; which part is the value? (a) blue (b) ; (c) : (d) color
39. 39.🌈 In #a20000 the red part is the hex number a2. What is it as a normal number?
40. 40.🎨 A CSS file usually ends with which extension? (a) .html (b) .js (c) .png (d) .css

Free html and css lessons, practice and worksheets at talentjr.in/html-css-for-kids