CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 91 · 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 flexbox property spaces boxes along a row? (a) gap (b) align-items (c) justify-content (d) display: flex
2. 2.True or false: #top is an id selector. (a) False (b) True
3. 3.💪 Which flexbox property picks row or column? (a) align-items (b) justify-content (c) flex-direction (d) gap
4. 4.💪 Which justify-content value packs boxes at the start? (a) center (b) flex-end (c) space-between (d) flex-start
5. 5.⚖️ What colour is the text of this element?
   <p class="note" id="top">Hi</p>
   CSS:
   p { color: yellow; }
   #top { color: purple; }
   .note { color: red; } (a) yellow (b) red (c) green (d) purple
6. 6.🌈 Which colour is #ffffff? (a) white (b) black (c) cyan (d) bright green
7. 7.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 290px;
     padding: 15px;
     border: 5px solid black;
     margin: 5px;
   }
8. 8.🖌️ Which CSS property colours behind the text? (a) font-weight (b) background-color (c) color (d) font-family
9. 9.🎯 Which CSS selector matches this element?
   <h1 class="star" id="main">Hello</h1> (a) #star (b) .star (c) #logo (d) .main
10. 10.🎨 Which tag holds CSS inside the head? (a) <style> (b) <body> (c) <script> (d) <css>
11. 11.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 170px;
      padding: 10px;
      border: 1px solid black;
      margin: 5px;
    }
12. 12.💪 Which flexbox property sets space between boxes? (a) flex-direction (b) align-items (c) gap (d) display: flex
13. 13.✍️ Which property is set to center in this rule?
    .note {
      text-align: center;
      border: 2px solid;
    } (a) center (b) margin (c) background-color (d) text-align
14. 14.✍️ What is the selector in this CSS rule?
    h2 {
      width: 300px;
      font-size: 20px;
      text-align: center;
    } (a) 20px (b) h2 (c) h1 (d) width
15. 15.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
16. 16.Which of these does HTML do? (a) changes the page live (b) puts a picture on a page (c) rounds box corners (d) checks a quiz answer
17. 17.🖌️ Which CSS property makes the text bold? (a) text-align (b) color (c) font-weight (d) font-size
18. 18.🧩 Which language puts a picture on a page? (a) CSS (b) HTML (c) JavaScript
19. 19.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
20. 20.✍️ CSS declarations go inside which brackets? (a) [ ] (b) { } (c) ( ) (d) < >
21. 21.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
22. 22.True or false: padding is space inside the border. (a) True (b) False
23. 23.🖌️ Where does the text sit on its line?
    p {
      text-align: right;
      font-size: 12px;
      background-color: orange;
      color: purple;
    } (a) on the right (b) on the left (c) in the middle
24. 24.🎯 Which CSS selector matches this element?
    <h2 class="star" id="logo">Hello</h2> (a) li (b) .logo (c) #logo (d) #star
25. 25.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 110px;
      padding: 10px;
      border: 5px solid black;
      margin: 20px;
    }
26. 26.⚖️ What colour is the text of this element?
    <h1 class="box" id="logo">Hi</h1>
    CSS:
    #logo { color: white; }
    .box { color: black; } (a) orange (b) green (c) white (d) black
27. 27.True or false: margin is the gap to other boxes. (a) False (b) True
28. 28.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    }
29. 29.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 460px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 100px wide (no margins).
30. 30.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) 800px or narrower (c) exactly 100px (d) turned off
31. 31.🌈 What is the biggest number one colour can have in rgb()? (a) 255 (b) 100 (c) 1000 (d) 99
32. 32.📱 Responsive design means a page ___. (a) has no pictures (b) is only for laptops (c) never changes (d) fits every screen
33. 33.🌈 Hex digits go 0 to 9, then A to which letter? (a) F (b) J (c) Z (d) G
34. 34.🖌️ What colour are the letters?
    li {
      color: orange;
      text-align: center;
      font-size: 20px;
      background-color: red;
    } (a) orange (b) blue (c) red
35. 35.🎯 Which CSS selector matches this element?
    <span class="note" id="intro">Hello</span> (a) #main (b) .intro (c) span (d) .big
36. 36.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) blue (c) red (d) white
37. 37.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 100px;
      padding: 20px;
      border: 2px solid black;
      margin: 10px;
    }
38. 38.🖌️ Where does the text sit on its line?
    li {
      background-color: yellow;
      text-align: center;
      color: green;
      font-size: 28px;
    } (a) in the middle (b) on the left (c) on the right
39. 39.🎯 Which sign starts an id selector? (a) & (b) . (c) @ (d) #
40. 40.🎨 One CSS file can style how many pages? (a) only one image (b) only one word (c) many pages (d) no pages

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