CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 749 · 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.🖌️ Where does the text sit on its line?
   p {
     background-color: purple;
     text-align: left;
     font-size: 12px;
     color: orange;
   } (a) in the middle (b) on the left (c) on the right
2. 2.Which of these is padding? (a) the gap round content (b) space outside the border (c) the gap to other boxes (d) a solid or dotted edge
3. 3.🎨 A CSS file usually ends with which extension? (a) .css (b) .png (c) .js (d) .html
4. 4.True or false: CSS makes headings and lists. (a) False (b) True
5. 5.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 180px;
     padding: 30px;
     border: 5px solid black;
     margin: 20px;
   }
6. 6.💪 Which flexbox property spaces boxes along a row? (a) justify-content (b) flex-direction (c) align-items (d) display: flex
7. 7.✍️ How many declarations (property: value pairs) are in this rule?
   h1 {
     font-size: 20px;
     margin: 10px;
     padding: 8px;
   }
8. 8.🖌️ What colour is behind the letters?
   h2 {
     text-align: right;
     background-color: purple;
     font-size: 24px;
     color: green;
   } (a) green (b) purple (c) orange
9. 9.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 60px;
     padding: 25px;
     border: 1px solid black;
     margin: 5px;
   }
10. 10.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 16px;
      }
    } (a) Yes (b) No
11. 11.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 16px;
      }
    }
12. 12.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
13. 13.🌈 In #0000dc the blue part is the hex number dc. What is it as a normal number?
14. 14.🎯 Which CSS selector matches this element?
    <p class="note" id="end">Hello</p> (a) .note (b) #note (c) .end (d) .big
15. 15.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    }
16. 16.🌈 Which colour is rgb(0, 255, 0)? (a) cyan (b) bright green (c) red (d) black
17. 17.🌈 Which hex code is cyan? (a) #00ff00 (b) #ffff00 (c) #0000ff (d) #00ffff
18. 18.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 160px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 50px wide (no margins).
19. 19.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 180px;
      padding: 10px;
      border: 5px solid black;
      margin: 20px;
    }
20. 20.⚖️ What colour is the text of this element?
    <h1 class="note" id="hero">Hi</h1>
    CSS:
    #hero { color: green; }
    .note { color: blue; } (a) green (b) blue (c) white (d) orange
21. 21.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 2 boxes, each 100px wide (no margins).
22. 22.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 20px;
      }
    }
23. 23.🖌️ Which CSS property sets the letter colour? (a) font-size (b) background-color (c) color (d) font-family
24. 24.True or false: JavaScript changes the page live. (a) True (b) False
25. 25.⚖️ What colour is the text of this element?
    <p class="red" id="logo">Hi</p>
    CSS:
    .red { color: green; }
    .red { color: purple; } (a) purple (b) red (c) blue (d) green
26. 26.🌈 Which colour is #ffffff? (a) black (b) bright green (c) red (d) white
27. 27.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: center;
    }
    Inside are 3 boxes, each 60px wide (no margins).
28. 28.True or false: #main is a class selector. (a) False (b) True
29. 29.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 16px;
      }
    } (a) No (b) Yes
30. 30.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) blue (c) black (d) red
31. 31.🎨 What does CSS stand for? (a) Cascading Style Sheets (b) Creative Sheet System (c) Computer Style Sheets (d) Colourful Site Styles
32. 32.✍️ Which property is set to center in this rule?
    .box {
      font-weight: bold;
      color: red;
      border: 2px solid;
      text-align: center;
    } (a) center (b) margin (c) background-color (d) text-align
33. 33.🎨 One CSS file can style how many pages? (a) many pages (b) only one image (c) no pages (d) only one word
34. 34.✍️ What value is given to background-color in this rule?
    h1 {
      margin: 10px;
      background-color: yellow;
      font-size: 20px;
    } (a) background-color (b) yellow (c) 10px (d) 8px
35. 35.🖌️ How big is the text, in px?
    p {
      background-color: yellow;
      text-align: right;
      font-size: 20px;
      color: blue;
    }
36. 36.True or false: li is an id selector. (a) False (b) True
37. 37.🌈 Which colour is #000000? (a) bright green (b) white (c) red (d) black
38. 38.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 8px;
      }
    } (a) Yes (b) No
39. 39.True or false: HTML makes headings and lists. (a) False (b) True
40. 40.True or false: margin is space inside the border. (a) False (b) True

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