CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 32 · 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.🖌️ Where does the text sit on its line?
   p {
     background-color: green;
     color: purple;
     text-align: left;
     font-size: 36px;
   } (a) in the middle (b) on the left (c) on the right
2. 2.True or false: .note is a class selector. (a) False (b) True
3. 3.Which of these is the content? (a) the text or picture (b) the gap round content (c) the line round the box (d) the gap to other boxes
4. 4.⚖️ What colour is the text of this element?
   <h2 class="red" id="logo">Hi</h2>
   CSS:
   .red { color: yellow; }
   .red { color: white; } (a) red (b) yellow (c) blue (d) white
5. 5.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 270px;
     padding: 30px;
     border: 3px solid black;
     margin: 15px;
   }
6. 6.True or false: the border is a solid or dotted edge. (a) False (b) True
7. 7.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the later one (c) the shorter one (d) the first one
8. 8.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) space-between (c) flex-end (d) center
9. 9.✍️ Which property is set to 8px in this rule?
   .note {
     padding: 8px;
     width: 300px;
     background-color: yellow;
   } (a) border (b) padding (c) font-weight (d) 8px
10. 10.True or false: margin is the line round the box. (a) False (b) True
11. 11.📱 Responsive design means a page ___. (a) never changes (b) is only for laptops (c) fits every screen (d) has no pictures
12. 12.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    }
13. 13.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 160px;
      padding: 25px;
      border: 2px solid black;
      margin: 20px;
    }
14. 14.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 22px;
      }
    }
15. 15.✍️ CSS declarations go inside which brackets? (a) < > (b) [ ] (c) ( ) (d) { }
16. 16.What does font-family do? (a) picks the font style (b) colours behind the text (c) centres a heading (d) sets the letter colour
17. 17.✍️ Which property is set to yellow in this rule?
    .note {
      background-color: yellow;
      text-align: center;
    } (a) padding (b) yellow (c) background-color (d) margin
18. 18.✍️ In color: blue; which part is the property? (a) : (b) ; (c) color (d) blue
19. 19.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 140px;
      padding: 30px;
      border: 4px solid black;
      margin: 10px;
    }
20. 20.🎯 Which CSS selector matches this element?
    <li class="menu" id="logo">Hello</li> (a) .menu (b) #end (c) div (d) .logo
21. 21.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 4 boxes, each 50px wide (no margins).
22. 22.🎯 What kind of selector is .card? (a) a class selector (b) an element selector (c) an id selector
23. 23.💪 Which flexbox property turns on flexbox? (a) align-items (b) display: flex (c) justify-content (d) gap
24. 24.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Cascading Style Sheets (c) Computer Style Sheets (d) Creative Sheet System
25. 25.💪 Which justify-content value packs boxes at the end? (a) space-between (b) flex-end (c) center (d) flex-start
26. 26.Which of these is padding? (a) the gap to other boxes (b) space outside the border (c) the text or picture (d) space inside the border
27. 27.True or false: margin is a solid or dotted edge. (a) False (b) True
28. 28.⚖️ What colour is the text of this element?
    <p class="menu" id="top">Hi</p>
    CSS:
    .menu { color: yellow; }
    .menu { color: purple; } (a) yellow (b) purple (c) black (d) red
29. 29.True or false: #main is an id selector. (a) False (b) True
30. 30.✍️ What is the selector in this CSS rule?
    h1 {
      text-align: center;
      font-weight: bold;
    } (a) text-align (b) p (c) bold (d) h1
31. 31.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 240px;
      justify-content: center;
    }
    Inside are 2 boxes, each 80px wide (no margins).
32. 32.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 16px;
      }
    }
33. 33.What does color do? (a) makes letters bigger (b) colours behind the text (c) sets the letter colour (d) makes the text bold
34. 34.🌈 Which colour is #000000? (a) black (b) yellow (c) red (d) blue
35. 35.🧩 Which language puts a picture on a page? (a) CSS (b) HTML (c) JavaScript
36. 36.💪 Which justify-content value equal gaps, none at ends? (a) space-between (b) center (c) flex-end (d) flex-start
37. 37.🖌️ What colour is behind the letters?
    li {
      background-color: white;
      color: orange;
      font-size: 16px;
      text-align: left;
    } (a) orange (b) white (c) red
38. 38.🌈 Which colour of light is strongest in rgb(85, 133, 246)? (a) green (b) red (c) blue
39. 39.✍️ In color: blue; which part is the value? (a) : (b) color (c) ; (d) blue
40. 40.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 1000 (c) 99 (d) 255

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