CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 636 · 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.📦 In the box model, which part is the gap round content? (a) margin (b) border (c) content (d) padding
2. 2.⚖️ What colour is the text of this element?
   <h1 class="box" id="top">Hi</h1>
   CSS:
   h1 { color: red; }
   h1 { color: black; } (a) blue (b) black (c) red (d) white
3. 3.🌈 What is the biggest number one colour can have in rgb()? (a) 1000 (b) 255 (c) 99 (d) 100
4. 4.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 24px;
     }
   }
5. 5.True or false: .big is an id selector. (a) True (b) False
6. 6.⚖️ What colour is the text of this element?
   <h1 class="big" id="logo">Hi</h1>
   CSS:
   #logo { color: green; }
   #logo { color: red; } (a) red (b) yellow (c) white (d) green
7. 7.Which of these does JavaScript do? (a) makes a form box (b) changes the text size (c) shows a pop-up message (d) rounds box corners
8. 8.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 190px;
     justify-content: flex-end;
   }
   Inside are 4 boxes, each 40px wide (no margins).
9. 9.💪 Which flexbox property spaces boxes along a row? (a) gap (b) display: flex (c) align-items (d) justify-content
10. 10.⚖️ What colour is the text of this element?
    <p class="star" id="logo">Hi</p>
    CSS:
    #logo { color: black; }
    #logo { color: orange; } (a) orange (b) black (c) white (d) blue
11. 11.🖌️ What colour are the letters?
    h2 {
      color: purple;
      text-align: center;
      font-size: 12px;
      background-color: orange;
    } (a) purple (b) blue (c) orange
12. 12.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) red (c) white (d) blue
13. 13.🎯 Which element does the selector #intro style? (a) <p class="intro"> (b) <h1 class="red"> (c) <p id="main"> (d) <p id="intro">
14. 14.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 140px;
      padding: 20px;
      border: 4px solid black;
      margin: 20px;
    }
15. 15.Which of these does CSS do? (a) counts down a timer (b) makes a link (c) adds space around boxes (d) changes the page live
16. 16.✍️ What is the selector in this CSS rule?
    #top {
      background-color: yellow;
      padding: 8px;
    } (a) 8px (b) background-color (c) #top (d) li
17. 17.⚖️ What colour is the text of this element?
    <h1 class="red" id="hero">Hi</h1>
    CSS:
    h1 { color: green; }
    h1 { color: black; } (a) white (b) red (c) black (d) green
18. 18.✍️ What is the selector in this CSS rule?
    body {
      color: red;
      font-size: 20px;
    } (a) color (b) .box (c) 20px (d) body
19. 19.True or false: h1 is an id selector. (a) True (b) False
20. 20.🌈 Which hex code is white? (a) #ffffff (b) #ffff00 (c) #000000 (d) #ff0000
21. 21.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) black (c) blue (d) red
22. 22.🌈 Which colour is rgb(255, 255, 0)? (a) yellow (b) bright green (c) blue (d) magenta
23. 23.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 300px;
      justify-content: center;
    }
    Inside are 4 boxes, each 50px wide (no margins).
24. 24.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 24px;
      }
    }
25. 25.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) 600px or wider (c) turned off (d) 600px or narrower
26. 26.📦 In the box model, which part is space outside the border? (a) padding (b) margin (c) border (d) content
27. 27.✍️ What is the selector in this CSS rule?
    h1 {
      font-style: italic;
      padding: 8px;
    } (a) 8px (b) font-style (c) h1 (d) p
28. 28.🖌️ Which CSS property makes letters bigger? (a) font-size (b) text-align (c) font-weight (d) background-color
29. 29.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) the later one (d) neither
30. 30.🎯 Which sign starts a class selector? (a) . (b) # (c) & (d) @
31. 31.🖌️ Where does the text sit on its line?
    h2 {
      color: green;
      text-align: center;
      background-color: purple;
      font-size: 32px;
    } (a) on the right (b) on the left (c) in the middle
32. 32.🌈 Which colour is #000000? (a) black (b) yellow (c) red (d) blue
33. 33.Which of these is the content? (a) space outside the border (b) the text or picture (c) space inside the border (d) the gap to other boxes
34. 34.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) packs boxes at the start (c) puts boxes in the middle (d) packs boxes at the end
35. 35.✍️ Which property is set to red in this rule?
    h2 {
      font-size: 20px;
      color: red;
    } (a) red (b) color (c) text-align (d) font-size
36. 36.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 16px;
      }
    }
37. 37.🧩 Which language checks a quiz answer? (a) JavaScript (b) HTML (c) CSS
38. 38.What does color do? (a) centres a heading (b) colours behind the text (c) sets the letter colour (d) picks the font style
39. 39.🎨 One CSS file can style how many pages? (a) only one word (b) no pages (c) many pages (d) only one image
40. 40.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 300px;
      padding: 5px;
      border: 5px solid black;
      margin: 10px;
    }

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