CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 231 · 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 sets space between boxes? (a) justify-content (b) gap (c) display: flex (d) align-items
2. 2.🔍 Which is the odd one out? (a) makes a form box (b) puts a picture on a page (c) adds space around boxes (d) makes a link
3. 3.⚖️ What colour is the text of this element?
   <p class="big" id="logo">Hi</p>
   CSS:
   #logo { color: blue; }
   #logo { color: green; } (a) black (b) green (c) blue (d) yellow
4. 4.True or false: padding is the line round the box. (a) True (b) False
5. 5.🖌️ Which CSS property makes letters bigger? (a) font-family (b) font-size (c) color (d) font-weight
6. 6.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 120px;
     padding: 5px;
     border: 3px solid black;
     margin: 0px;
   }
7. 7.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 10px;
     }
   }
8. 8.🎯 Which CSS selector matches this element?
   <span class="box" id="main">Hello</span> (a) #box (b) p (c) #main (d) .star
9. 9.🌈 Which colour of light is strongest in rgb(204, 45, 12)? (a) red (b) green (c) blue
10. 10.✍️ What is the selector in this CSS rule?
    .box {
      font-size: 20px;
      color: red;
    } (a) red (b) h2 (c) font-size (d) .box
11. 11.🎨 Which attribute adds CSS inside one tag? (a) src (b) style (c) alt (d) href
12. 12.✍️ What value is given to color in this rule?
    .note {
      color: red;
      padding: 8px;
    } (a) red (b) color (c) center (d) 20px
13. 13.✍️ Which property is set to 300px in this rule?
    body {
      width: 300px;
      font-style: italic;
    } (a) width (b) color (c) 300px (d) font-style
14. 14.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      padding: 8px;
      font-weight: bold;
    }
15. 15.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 160px;
      padding: 10px;
      border: 2px solid black;
      margin: 5px;
    }
16. 16.🎯 What kind of selector is .star? (a) an element selector (b) a class selector (c) an id selector
17. 17.🎯 Which element does the selector .menu style? (a) <h1 id="menu"> (b) <h1 class="menu"> (c) <h1 class="note"> (d) <h2 class="big">
18. 18.🖌️ What colour is behind the letters?
    li {
      font-size: 20px;
      text-align: right;
      color: purple;
      background-color: green;
    } (a) yellow (b) purple (c) green
19. 19.✍️ What value is given to background-color in this rule?
    h1 {
      width: 300px;
      background-color: yellow;
    } (a) background-color (b) 8px (c) 10px (d) yellow
20. 20.Which of these does HTML do? (a) gives the page structure (b) checks a quiz answer (c) reacts to a button click (d) adds space around boxes
21. 21.💪 Which flexbox property spaces boxes along a row? (a) gap (b) flex-direction (c) justify-content (d) align-items
22. 22.📦 In the box model, which part is space outside the border? (a) padding (b) border (c) margin (d) content
23. 23.🎯 Which CSS selector matches this element?
    <h1 class="note" id="end">Hello</h1> (a) .big (b) #note (c) #hero (d) h1
24. 24.🎯 Which element does the selector #top style? (a) <h1 class="top"> (b) <h2 class="box"> (c) <h1 id="top"> (d) <h1 id="intro">
25. 25.📦 In the box model, which part is the gap to other boxes? (a) border (b) content (c) margin (d) padding
26. 26.✍️ Which sign ends each CSS declaration? (a) , (b) . (c) : (d) ;
27. 27.True or false: JavaScript rounds box corners. (a) False (b) True
28. 28.What does color do? (a) makes the text bold (b) makes letters bigger (c) colours behind the text (d) sets the letter colour
29. 29.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 420px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 60px wide (no margins).
30. 30.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 6px;
      }
    } (a) No (b) Yes
31. 31.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 8px;
      }
    }
32. 32.📱 Responsive design means a page ___. (a) is only for laptops (b) never changes (c) fits every screen (d) has no pictures
33. 33.🖌️ Which CSS property makes the text bold? (a) font-weight (b) font-size (c) font-family (d) text-align
34. 34.🎯 What kind of selector is p? (a) an element selector (b) a class selector (c) an id selector
35. 35.What does justify-content: center do? (a) puts boxes in the middle (b) packs boxes at the start (c) equal gaps, none at ends (d) packs boxes at the end
36. 36.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 28px;
      }
    } (a) Yes (b) No
37. 37.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 200px;
      padding: 10px;
      border: 1px solid black;
      margin: 10px;
    }
38. 38.🌈 Which colour is rgb(0, 0, 0)? (a) magenta (b) cyan (c) black (d) bright green
39. 39.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 80px wide (no margins).
40. 40.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) packs boxes at the end (c) puts boxes in the middle (d) packs boxes at the start

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