CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 918 · 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.💪 Which flexbox property sets space between boxes? (a) gap (b) justify-content (c) display: flex (d) flex-direction
2. 2.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 110px;
     padding: 25px;
     border: 3px solid black;
     margin: 15px;
   }
3. 3.⚖️ What colour is the text of this element?
   <h1 class="star" id="top">Hi</h1>
   CSS:
   h1 { color: white; }
   h1 { color: purple; } (a) purple (b) red (c) white (d) orange
4. 4.📦 In the box model, which part is space inside the border? (a) border (b) margin (c) padding (d) content
5. 5.✍️ How many declarations (property: value pairs) are in this rule?
   h1 {
     margin: 10px;
   }
6. 6.🖌️ What colour are the letters?
   h1 {
     background-color: green;
     color: white;
     text-align: right;
     font-size: 36px;
   } (a) red (b) white (c) green
7. 7.🖌️ What colour are the letters?
   h2 {
     text-align: right;
     color: red;
     background-color: yellow;
     font-size: 40px;
   } (a) red (b) yellow (c) black
8. 8.📦 In the box model, which part is space outside the border? (a) border (b) padding (c) margin (d) content
9. 9.⚖️ What colour is the text of this element?
   <p class="star" id="intro">Hi</p>
   CSS:
   #intro { color: black; }
   .star { color: green; } (a) white (b) red (c) black (d) green
10. 10.🎯 Which element does the selector div style? (a) <p class="star"> (b) <span> (c) <div class="star"> (d) <h1 id="top">
11. 11.🎨 One CSS file can style how many pages? (a) only one word (b) only one image (c) many pages (d) no pages
12. 12.✍️ CSS declarations go inside which brackets? (a) { } (b) ( ) (c) < > (d) [ ]
13. 13.💪 Which justify-content value equal gaps, none at ends? (a) space-between (b) flex-start (c) flex-end (d) center
14. 14.🧩 Which language shows a pop-up message? (a) CSS (b) HTML (c) JavaScript
15. 15.⚖️ What colour is the text of this element?
    <p class="big" id="hero">Hi</p>
    CSS:
    #hero { color: blue; }
    p { color: red; }
    .big { color: green; } (a) red (b) green (c) blue (d) black
16. 16.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) exactly 100px (c) 800px or wider (d) turned off
17. 17.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 170px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 50px wide (no margins).
18. 18.True or false: margin is a solid or dotted edge. (a) True (b) False
19. 19.🖌️ What colour is behind the letters?
    h2 {
      color: purple;
      font-size: 36px;
      background-color: green;
      text-align: left;
    } (a) purple (b) black (c) green
20. 20.🔍 Which is the odd one out? (a) sets colours and fonts (b) changes the text size (c) adds space around boxes (d) checks a quiz answer
21. 21.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) blue (c) black (d) red
22. 22.What does justify-content: center do? (a) puts boxes in the middle (b) packs boxes at the end (c) packs boxes at the start (d) equal gaps, none at ends
23. 23.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
24. 24.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 110px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 50px wide (no margins).
25. 25.True or false: padding is space inside the border. (a) True (b) False
26. 26.✍️ What is the selector in this CSS rule?
    .note {
      border: 2px solid;
      font-style: italic;
    } (a) italic (b) .note (c) border (d) #top
27. 27.True or false: HTML makes a link. (a) True (b) False
28. 28.🌈 Which colour of light is strongest in rgb(114, 132, 232)? (a) red (b) green (c) blue
29. 29.🌈 Which hex code is white? (a) #000000 (b) #00ff00 (c) #ffffff (d) #0000ff
30. 30.🖌️ What colour are the letters?
    p {
      background-color: red;
      font-size: 16px;
      text-align: left;
      color: black;
    } (a) green (b) black (c) red
31. 31.✍️ In color: blue; which part is the value? (a) blue (b) color (c) : (d) ;
32. 32.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 120px;
      padding: 20px;
      border: 1px solid black;
      margin: 20px;
    }
33. 33.🌈 In #000044 the blue part is the hex number 44. What is it as a normal number?
34. 34.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
35. 35.🖌️ Which CSS property centres a heading? (a) font-weight (b) color (c) font-size (d) text-align
36. 36.Which of these is the border? (a) the line round the box (b) the gap round content (c) space outside the border (d) the gap to other boxes
37. 37.🖌️ Which CSS property sets the letter colour? (a) font-weight (b) color (c) background-color (d) font-size
38. 38.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 150px;
      padding: 5px;
      border: 3px solid black;
      margin: 15px;
    }
39. 39.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 50px wide (no margins).
40. 40.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 14px;
      }
    }

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