CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 322 · 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.🖌️ What colour is behind the letters?
   h2 {
     background-color: green;
     font-size: 36px;
     text-align: center;
     color: blue;
   } (a) blue (b) black (c) green
2. 2.🖌️ How big is the text, in px?
   li {
     background-color: orange;
     text-align: right;
     font-size: 12px;
     color: purple;
   }
3. 3.🌈 Which colour is rgb(0, 0, 255)? (a) bright green (b) magenta (c) cyan (d) blue
4. 4.✍️ What value is given to color in this rule?
   h1 {
     margin: 10px;
     color: red;
     border: 2px solid;
     font-size: 20px;
   } (a) 20px (b) color (c) center (d) red
5. 5.🖌️ Which CSS property sets the letter colour? (a) font-size (b) color (c) background-color (d) text-align
6. 6.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 22px;
     }
   }
7. 7.Which of these does HTML do? (a) makes a form box (b) checks a quiz answer (c) changes the text size (d) sets colours and fonts
8. 8.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 32px;
     }
   }
9. 9.⚖️ What colour is the text of this element?
   <h1 class="menu" id="intro">Hi</h1>
   CSS:
   #intro { color: orange; }
   #intro { color: green; } (a) orange (b) blue (c) white (d) green
10. 10.💪 Which flexbox property spaces boxes along a row? (a) gap (b) display: flex (c) justify-content (d) flex-direction
11. 11.✍️ What value is given to color in this rule?
    body {
      font-style: italic;
      color: red;
    } (a) red (b) center (c) 20px (d) color
12. 12.🎯 What kind of selector is h1? (a) an id selector (b) a class selector (c) an element selector
13. 13.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 260px;
      padding: 25px;
      border: 3px solid black;
      margin: 5px;
    }
14. 14.✍️ What is the selector in this CSS rule?
    .box {
      margin: 10px;
      font-weight: bold;
      font-size: 20px;
    } (a) margin (b) h2 (c) bold (d) .box
15. 15.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 400px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 40px wide (no margins).
16. 16.🎯 Which sign starts a class selector? (a) . (b) & (c) # (d) @
17. 17.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 230px;
      justify-content: center;
    }
    Inside are 3 boxes, each 50px wide (no margins).
18. 18.🔍 Which is the odd one out? (a) rounds box corners (b) puts a picture on a page (c) gives the page structure (d) makes headings and lists
19. 19.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 14px;
      }
    }
20. 20.🌈 In #000008 the blue part is the hex number 08. What is it as a normal number?
21. 21.✍️ How does a CSS comment start? (a) /* (b) <!-- (c) // (d) #
22. 22.Which of these is the content? (a) a solid or dotted edge (b) the line round the box (c) space inside the border (d) the text or picture
23. 23.Which of these is the border? (a) the line round the box (b) the gap to other boxes (c) space outside the border (d) the gap round content
24. 24.Which of these is margin? (a) space inside the border (b) the gap to other boxes (c) a solid or dotted edge (d) the text or picture
25. 25.✍️ What value is given to background-color in this rule?
    h1 {
      background-color: yellow;
      text-align: center;
      width: 300px;
    } (a) yellow (b) background-color (c) 10px (d) 8px
26. 26.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) turned off (c) 600px or narrower (d) 600px or wider
27. 27.🌈 Which hex code is magenta? (a) #ffff00 (b) #ff0000 (c) #ff00ff (d) #00ff00
28. 28.🌈 Which colour of light is strongest in rgb(90, 81, 190)? (a) green (b) blue (c) red
29. 29.💪 Which justify-content value packs boxes at the start? (a) space-between (b) center (c) flex-end (d) flex-start
30. 30.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      font-size: 20px;
      background-color: yellow;
      font-style: italic;
    }
31. 31.🎯 What kind of selector is .card? (a) an id selector (b) an element selector (c) a class selector
32. 32.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the end (c) equal gaps, none at ends (d) packs boxes at the start
33. 33.🎯 Which sign starts an id selector? (a) . (b) # (c) @ (d) &
34. 34.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
35. 35.🧩 Which language adds space around boxes? (a) HTML (b) JavaScript (c) CSS
36. 36.✍️ Which property is set to 2px solid in this rule?
    .box {
      text-align: center;
      border: 2px solid;
    } (a) width (b) font-style (c) 2px solid (d) border
37. 37.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 20px;
      border: 1px solid black;
      margin: 0px;
    }
38. 38.✍️ Which sign goes between a property and its value? (a) ; (b) : (c) = (d) -
39. 39.📦 In the box model, which part is space outside the border? (a) padding (b) margin (c) border (d) content
40. 40.True or false: the border is a solid or dotted edge. (a) True (b) False

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