CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 509 · 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.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 70px;
     padding: 20px;
     border: 2px solid black;
     margin: 5px;
   }
2. 2.🔍 Which is the odd one out? (a) changes the text size (b) rounds box corners (c) adds space around boxes (d) makes a link
3. 3.🖌️ What colour are the letters?
   h1 {
     font-size: 16px;
     background-color: white;
     text-align: left;
     color: green;
   } (a) white (b) green (c) red
4. 4.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) green (c) blue (d) red
5. 5.🔍 Which is the odd one out? (a) changes the text size (b) sets colours and fonts (c) rounds box corners (d) checks a quiz answer
6. 6.🖌️ What colour is behind the letters?
   p {
     color: green;
     font-size: 16px;
     text-align: center;
     background-color: blue;
   } (a) red (b) blue (c) green
7. 7.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
8. 8.🌈 Hex digits go 0 to 9, then A to which letter? (a) G (b) Z (c) F (d) J
9. 9.What does background-color do? (a) centres a heading (b) colours behind the text (c) makes letters bigger (d) picks the font style
10. 10.🖌️ Which CSS property sets the letter colour? (a) font-weight (b) color (c) text-align (d) font-family
11. 11.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 8px;
      }
    } (a) Yes (b) No
12. 12.🖌️ What colour are the letters?
    h2 {
      color: red;
      text-align: right;
      background-color: black;
      font-size: 36px;
    } (a) red (b) black (c) blue
13. 13.True or false: HTML lays out the page. (a) True (b) False
14. 14.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 220px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 100px wide (no margins).
15. 15.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the first one (c) the shorter one (d) the later one
16. 16.Which of these is the border? (a) space inside the border (b) the gap round content (c) the text or picture (d) a solid or dotted edge
17. 17.What does font-weight do? (a) colours behind the text (b) picks the font style (c) makes the text bold (d) centres a heading
18. 18.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) turned off (c) 600px or narrower (d) 600px or wider
19. 19.✍️ What value is given to width in this rule?
    li {
      width: 300px;
      font-size: 20px;
    } (a) 300px (b) red (c) italic (d) width
20. 20.🌈 Which colour of light is strongest in rgb(237, 19, 132)? (a) red (b) green (c) blue
21. 21.🖌️ Which CSS property centres a heading? (a) color (b) background-color (c) text-align (d) font-family
22. 22.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 150px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 50px wide (no margins).
23. 23.💪 Which flexbox property turns on flexbox? (a) justify-content (b) align-items (c) flex-direction (d) display: flex
24. 24.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 130px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 50px wide (no margins).
25. 25.Which of these does HTML do? (a) checks a quiz answer (b) lays out the page (c) reacts to a button click (d) makes headings and lists
26. 26.🖌️ What colour is behind the letters?
    h2 {
      color: red;
      font-size: 28px;
      background-color: blue;
      text-align: center;
    } (a) green (b) red (c) blue
27. 27.🖌️ What colour are the letters?
    h1 {
      color: red;
      text-align: right;
      font-size: 28px;
      background-color: purple;
    } (a) yellow (b) red (c) purple
28. 28.🎯 Which CSS selector matches this element?
    <div class="menu" id="main">Hello</div> (a) div (b) #menu (c) .main (d) .note
29. 29.🎯 Which sign starts an id selector? (a) @ (b) . (c) & (d) #
30. 30.🔍 Which is the odd one out? (a) rounds box corners (b) shows a pop-up message (c) counts down a timer (d) checks a quiz answer
31. 31.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 6px;
      }
    } (a) Yes (b) No
32. 32.🎯 Which sign starts a class selector? (a) & (b) # (c) @ (d) .
33. 33.🌈 Which hex code is red? (a) #ffffff (b) #ffff00 (c) #ff0000 (d) #000000
34. 34.True or false: the border is the line round the box. (a) True (b) False
35. 35.🎯 What kind of selector is #top? (a) an element selector (b) a class selector (c) an id selector
36. 36.What does font-size do? (a) colours behind the text (b) makes the text bold (c) centres a heading (d) makes letters bigger
37. 37.💪 Which justify-content value packs boxes at the end? (a) flex-end (b) flex-start (c) center (d) space-between
38. 38.🌈 Which colour is rgb(255, 255, 0)? (a) red (b) blue (c) yellow (d) white
39. 39.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    }
40. 40.✍️ What value is given to background-color in this rule?
    .box {
      width: 300px;
      background-color: yellow;
      font-size: 20px;
    } (a) 8px (b) yellow (c) background-color (d) 10px

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