CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 447 · 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 hex code is bright green? (a) #ffffff (b) #0000ff (c) #00ff00 (d) #ff0000
2. 2.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 240px;
     padding: 20px;
     border: 1px solid black;
     margin: 15px;
   }
3. 3.🌈 In #460000 the red part is the hex number 46. What is it as a normal number?
4. 4.📱 Which tag helps phones show a page at the right size? (a) the br tag (b) the title tag (c) the hr tag (d) the viewport meta tag
5. 5.✍️ What is the selector in this CSS rule?
   .note {
     color: red;
     margin: 10px;
   } (a) color (b) .note (c) #top (d) 10px
6. 6.🌈 Which colour is #00ff00? (a) bright green (b) blue (c) cyan (d) red
7. 7.✍️ What is the selector in this CSS rule?
   p {
     width: 300px;
     background-color: yellow;
     margin: 10px;
   } (a) width (b) p (c) .note (d) yellow
8. 8.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 10px;
     }
   }
9. 9.📱 Responsive design means a page ___. (a) never changes (b) is only for laptops (c) has no pictures (d) fits every screen
10. 10.🌈 Which colour is #000000? (a) blue (b) magenta (c) black (d) red
11. 11.🎯 What kind of selector is #hero? (a) an id selector (b) an element selector (c) a class selector
12. 12.Which of these does JavaScript do? (a) reacts to a button click (b) puts a picture on a page (c) makes headings and lists (d) lays out the page
13. 13.True or false: h1 is an id selector. (a) True (b) False
14. 14.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 420px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 100px wide (no margins).
15. 15.What does justify-content: center do? (a) packs boxes at the end (b) packs boxes at the start (c) equal gaps, none at ends (d) puts boxes in the middle
16. 16.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) 800px or narrower (c) exactly 100px (d) turned off
17. 17.🌈 Which colour is #ffffff? (a) cyan (b) red (c) blue (d) white
18. 18.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    }
19. 19.✍️ Which property is set to center in this rule?
    li {
      text-align: center;
      padding: 8px;
      color: red;
      font-size: 20px;
    } (a) center (b) margin (c) text-align (d) background-color
20. 20.🖌️ Which CSS property makes the text bold? (a) font-family (b) font-weight (c) text-align (d) color
21. 21.What does color do? (a) sets the letter colour (b) centres a heading (c) makes letters bigger (d) colours behind the text
22. 22.🖌️ How big is the text, in px?
    p {
      font-size: 28px;
      text-align: right;
      background-color: blue;
      color: orange;
    }
23. 23.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) green (c) black (d) blue
24. 24.✍️ In color: blue; which part is the value? (a) : (b) blue (c) color (d) ;
25. 25.🌈 Which colour is rgb(0, 255, 0)? (a) black (b) bright green (c) white (d) cyan
26. 26.Which of these is the border? (a) space outside the border (b) the gap to other boxes (c) space inside the border (d) the line round the box
27. 27.🎯 Which element does the selector p style? (a) <h1> (b) <h2 class="menu"> (c) <li id="main"> (d) <p class="menu">
28. 28.⚖️ What colour is the text of this element?
    <h2 class="menu" id="top">Hi</h2>
    CSS:
    h2 { color: red; }
    h2 { color: green; } (a) green (b) purple (c) yellow (d) red
29. 29.Which of these does CSS do? (a) checks a quiz answer (b) rounds box corners (c) makes headings and lists (d) gives the page structure
30. 30.🖌️ Which CSS property picks the font style? (a) color (b) background-color (c) font-family (d) font-weight
31. 31.🎯 How many elements on a page should have the same id? (a) any number (b) 1 (c) 5 (d) 2
32. 32.✍️ Which property is set to 20px in this rule?
    body {
      color: red;
      font-size: 20px;
    } (a) font-size (b) 20px (c) text-align (d) background-color
33. 33.What does text-align do? (a) makes the text bold (b) centres a heading (c) picks the font style (d) sets the letter colour
34. 34.🖌️ What colour are the letters?
    p {
      font-size: 16px;
      color: green;
      background-color: orange;
      text-align: right;
    } (a) red (b) green (c) orange
35. 35.⚖️ What colour is the text of this element?
    <h2 class="star" id="top">Hi</h2>
    CSS:
    .star { color: white; }
    .star { color: red; } (a) black (b) red (c) blue (d) white
36. 36.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 220px;
      padding: 20px;
      border: 2px solid black;
      margin: 15px;
    }
37. 37.🖌️ How big is the text, in px?
    li {
      background-color: orange;
      text-align: right;
      color: yellow;
      font-size: 32px;
    }
38. 38.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) exactly 1000px (c) 600px or narrower (d) turned off
39. 39.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 32px;
      }
    }
40. 40.🖌️ How big is the text, in px?
    p {
      background-color: white;
      font-size: 16px;
      color: black;
      text-align: left;
    }

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