CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 395 · 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 colour is rgb(0, 0, 255)? (a) red (b) blue (c) black (d) magenta
2. 2.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 340px;
     justify-content: center;
   }
   Inside are 4 boxes, each 80px wide (no margins).
3. 3.📱 The screen is 700px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 14px;
     }
   } (a) No (b) Yes
4. 4.🔍 Which is the odd one out? (a) gives the page structure (b) reacts to a button click (c) checks a quiz answer (d) changes the page live
5. 5.🖌️ Which CSS property centres a heading? (a) font-size (b) text-align (c) font-weight (d) background-color
6. 6.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 10px;
     }
   }
7. 7.✍️ Which property is set to 300px in this rule?
   #top {
     width: 300px;
     font-weight: bold;
     background-color: yellow;
   } (a) 300px (b) color (c) width (d) font-style
8. 8.🖌️ Which CSS property colours behind the text? (a) font-size (b) background-color (c) color (d) text-align
9. 9.🖌️ What colour is behind the letters?
   h1 {
     text-align: center;
     color: red;
     font-size: 16px;
     background-color: purple;
   } (a) blue (b) red (c) purple
10. 10.Which of these does CSS do? (a) makes headings and lists (b) checks a quiz answer (c) reacts to a button click (d) lays out the page
11. 11.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) 800px or wider (c) 800px or narrower (d) turned off
12. 12.🌈 Which colour is rgb(255, 255, 255)? (a) bright green (b) red (c) black (d) white
13. 13.✍️ In color: blue; which part is the property? (a) color (b) ; (c) blue (d) :
14. 14.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 16px;
      }
    }
15. 15.What does justify-content: center do? (a) packs boxes at the end (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the start
16. 16.📦 In the box model, which part is the gap round content? (a) content (b) border (c) margin (d) padding
17. 17.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
18. 18.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) black (c) red (d) green
19. 19.🖌️ Which CSS property makes the text bold? (a) text-align (b) font-size (c) background-color (d) font-weight
20. 20.🌈 Which colour is #0000ff? (a) white (b) red (c) blue (d) bright green
21. 21.🎯 Which element does the selector .big style? (a) <h2 id="big"> (b) <h2 class="big"> (c) <h2 class="red"> (d) <li class="box">
22. 22.True or false: CSS adds space around boxes. (a) False (b) True
23. 23.True or false: the content is space inside the border. (a) False (b) True
24. 24.🧩 Which language lays out the page? (a) JavaScript (b) CSS (c) HTML
25. 25.🎨 Which attribute adds CSS inside one tag? (a) href (b) src (c) style (d) alt
26. 26.What does color do? (a) picks the font style (b) colours behind the text (c) sets the letter colour (d) makes the text bold
27. 27.True or false: .big is an id selector. (a) False (b) True
28. 28.🧩 Which language makes headings and lists? (a) HTML (b) CSS (c) JavaScript
29. 29.✍️ How does a CSS comment start? (a) <!-- (b) // (c) # (d) /*
30. 30.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) space-between (c) flex-end (d) center
31. 31.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
32. 32.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 22px;
      }
    }
33. 33.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      background-color: yellow;
      font-weight: bold;
      border: 2px solid;
      text-align: center;
    }
34. 34.✍️ In color: blue; which part is the value? (a) color (b) blue (c) ; (d) :
35. 35.True or false: #end is an element selector. (a) True (b) False
36. 36.💪 Which flexbox property picks row or column? (a) align-items (b) gap (c) flex-direction (d) display: flex
37. 37.🌈 Which hex code is blue? (a) #000000 (b) #0000ff (c) #ff0000 (d) #00ffff
38. 38.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 330px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 80px wide (no margins).
39. 39.✍️ Which property is set to 300px in this rule?
    #top {
      background-color: yellow;
      width: 300px;
      font-size: 20px;
      border: 2px solid;
    } (a) 300px (b) color (c) width (d) font-style
40. 40.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 130px;
      padding: 25px;
      border: 3px solid black;
      margin: 5px;
    }

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