CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 794 · 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 #000000? (a) bright green (b) yellow (c) black (d) cyan
2. 2.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 240px;
     justify-content: space-between;
   }
   Inside are 2 boxes, each 80px wide (no margins).
3. 3.📱 The screen is 1366px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 22px;
     }
   } (a) No (b) Yes
4. 4.True or false: #hero is an element selector. (a) False (b) True
5. 5.🎯 Which element does the selector h1 style? (a) <div id="hero"> (b) <h1 class="box"> (c) <h2> (d) <li class="box">
6. 6.🖌️ What colour are the letters?
   li {
     color: black;
     text-align: center;
     font-size: 16px;
     background-color: red;
   } (a) red (b) black (c) green
7. 7.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 210px;
     justify-content: space-between;
   }
   Inside are 3 boxes, each 50px wide (no margins).
8. 8.🌈 Which colour is rgb(255, 0, 0)? (a) yellow (b) red (c) blue (d) cyan
9. 9.⚖️ What colour is the text of this element?
   <h2 class="box" id="hero">Hi</h2>
   CSS:
   #hero { color: black; }
   .box { color: red; } (a) black (b) blue (c) white (d) red
10. 10.✍️ In color: blue; which part is the value? (a) blue (b) : (c) color (d) ;
11. 11.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 14px;
      }
    }
12. 12.✍️ What is the selector in this CSS rule?
    .box {
      text-align: center;
      color: red;
    } (a) h2 (b) .box (c) red (d) text-align
13. 13.💪 Which flexbox property spaces boxes along a row? (a) flex-direction (b) align-items (c) justify-content (d) display: flex
14. 14.📦 In the box model, which part is the text or picture? (a) content (b) margin (c) padding (d) border
15. 15.🎯 Which element does the selector li style? (a) <div> (b) <p id="top"> (c) <li class="star"> (d) <span class="star">
16. 16.Which of these does JavaScript do? (a) changes the text size (b) counts down a timer (c) sets colours and fonts (d) adds space around boxes
17. 17.🌈 Which colour is #ff0000? (a) magenta (b) cyan (c) red (d) bright green
18. 18.True or false: padding is the gap to other boxes. (a) False (b) True
19. 19.🌈 Which colour is #00ffff? (a) bright green (b) red (c) white (d) cyan
20. 20.🌈 In #0000fc the blue part is the hex number fc. What is it as a normal number?
21. 21.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
22. 22.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      font-size: 20px;
      border: 2px solid;
    }
23. 23.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      font-weight: bold;
      font-size: 20px;
      background-color: yellow;
      font-style: italic;
    }
24. 24.🖌️ Which CSS property picks the font style? (a) color (b) font-size (c) font-weight (d) font-family
25. 25.Which of these does CSS do? (a) adds space around boxes (b) gives the page structure (c) puts a picture on a page (d) shows a pop-up message
26. 26.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the start (c) packs boxes at the end (d) equal gaps, none at ends
27. 27.📦 In the box model, which part is space outside the border? (a) margin (b) border (c) padding (d) content
28. 28.🖌️ What colour are the letters?
    h2 {
      background-color: purple;
      font-size: 20px;
      color: white;
      text-align: center;
    } (a) white (b) purple (c) yellow
29. 29.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 140px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 40px wide (no margins).
30. 30.🎨 One CSS file can style how many pages? (a) no pages (b) only one word (c) only one image (d) many pages
31. 31.Which of these is margin? (a) the text or picture (b) a solid or dotted edge (c) space outside the border (d) space inside the border
32. 32.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 20px;
      }
    }
33. 33.🌈 Which hex code is magenta? (a) #ff0000 (b) #ff00ff (c) #00ff00 (d) #0000ff
34. 34.⚖️ What colour is the text of this element?
    <h2 class="box" id="logo">Hi</h2>
    CSS:
    h2 { color: yellow; }
    h2 { color: green; } (a) black (b) yellow (c) green (d) red
35. 35.What does color do? (a) makes the text bold (b) picks the font style (c) sets the letter colour (d) colours behind the text
36. 36.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) black (c) blue (d) green
37. 37.What does justify-content: center do? (a) packs boxes at the start (b) packs boxes at the end (c) puts boxes in the middle (d) equal gaps, none at ends
38. 38.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 255 (c) 1000 (d) 99
39. 39.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 18px;
      }
    }
40. 40.⚖️ What colour is the text of this element?
    <h2 class="red" id="end">Hi</h2>
    CSS:
    h2 { color: orange; }
    h2 { color: white; } (a) white (b) orange (c) green (d) blue

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