CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 50 · 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 element does the selector p style? (a) <p class="box"> (b) <h2 class="box"> (c) <li id="logo"> (d) <h1>
2. 2.⚖️ What colour is the text of this element?
   <p class="red" id="end">Hi</p>
   CSS:
   #end { color: yellow; }
   #end { color: purple; } (a) purple (b) white (c) yellow (d) blue
3. 3.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 220px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 100px wide (no margins).
4. 4.🖌️ Where does the text sit on its line?
   h1 {
     color: black;
     background-color: red;
     text-align: center;
     font-size: 20px;
   } (a) in the middle (b) on the right (c) on the left
5. 5.🎯 What kind of selector is .card? (a) an element selector (b) an id selector (c) a class selector
6. 6.✍️ Which sign goes between a property and its value? (a) = (b) : (c) - (d) ;
7. 7.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 16px;
     }
   } (a) No (b) Yes
8. 8.⚖️ What colour is the text of this element?
   <p class="big" id="hero">Hi</p>
   CSS:
   .big { color: black; }
   #hero { color: orange; }
   p { color: red; } (a) red (b) orange (c) blue (d) black
9. 9.📱 The screen is 1366px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 10px;
     }
   } (a) No (b) Yes
10. 10.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 28px;
      }
    } (a) No (b) Yes
11. 11.📱 Responsive design means a page ___. (a) is only for laptops (b) never changes (c) has no pictures (d) fits every screen
12. 12.🎯 Which CSS selector matches this element?
    <h1 class="note" id="end">Hello</h1> (a) #hero (b) #note (c) #end (d) .end
13. 13.🎯 Can many elements share the same class? (a) No (b) Yes
14. 14.Which of these does HTML do? (a) sets colours and fonts (b) adds space around boxes (c) makes headings and lists (d) changes the text size
15. 15.🔍 Which is the odd one out? (a) makes a link (b) counts down a timer (c) puts a picture on a page (d) makes headings and lists
16. 16.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
17. 17.Which of these is the border? (a) a solid or dotted edge (b) space outside the border (c) the gap to other boxes (d) the gap round content
18. 18.Which of these does HTML do? (a) checks a quiz answer (b) lays out the page (c) gives the page structure (d) changes the page live
19. 19.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 14px;
      }
    }
20. 20.⚖️ What colour is the text of this element?
    <p class="box" id="hero">Hi</p>
    CSS:
    .box { color: red; }
    p { color: orange; }
    #hero { color: white; } (a) red (b) orange (c) white (d) yellow
21. 21.💪 Which justify-content value packs boxes at the end? (a) flex-end (b) flex-start (c) space-between (d) center
22. 22.📦 In the box model, which part is the gap round content? (a) border (b) margin (c) padding (d) content
23. 23.✍️ Which property is set to 20px in this rule?
    p {
      font-size: 20px;
      background-color: yellow;
      padding: 8px;
    } (a) font-size (b) text-align (c) background-color (d) 20px
24. 24.True or false: HTML rounds box corners. (a) True (b) False
25. 25.🎯 Which element does the selector #intro style? (a) <h1 id="main"> (b) <h2 class="big"> (c) <h1 id="intro"> (d) <h1 class="intro">
26. 26.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      color: red;
    }
27. 27.🎯 Which sign starts an id selector? (a) . (b) & (c) # (d) @
28. 28.True or false: #logo is a class selector. (a) True (b) False
29. 29.⚖️ What colour is the text of this element?
    <h1 class="note" id="main">Hi</h1>
    CSS:
    h1 { color: black; }
    h1 { color: green; } (a) black (b) green (c) blue (d) purple
30. 30.✍️ CSS declarations go inside which brackets? (a) [ ] (b) ( ) (c) < > (d) { }
31. 31.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 24px;
      }
    }
32. 32.🖌️ Where does the text sit on its line?
    h1 {
      font-size: 16px;
      background-color: black;
      text-align: center;
      color: white;
    } (a) on the left (b) in the middle (c) on the right
33. 33.💪 Which flexbox property spaces boxes along a row? (a) justify-content (b) display: flex (c) flex-direction (d) align-items
34. 34.Which of these is padding? (a) the gap round content (b) the line round the box (c) a solid or dotted edge (d) the gap to other boxes
35. 35.True or false: #main is a class selector. (a) False (b) True
36. 36.🖌️ What colour is behind the letters?
    p {
      color: green;
      background-color: black;
      font-size: 40px;
      text-align: center;
    } (a) green (b) red (c) black
37. 37.Which of these does JavaScript do? (a) reacts to a button click (b) gives the page structure (c) makes headings and lists (d) makes a form box
38. 38.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 20px;
      }
    }
39. 39.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 190px;
      padding: 10px;
      border: 1px solid black;
      margin: 10px;
    }
40. 40.✍️ In color: blue; which part is the property? (a) ; (b) blue (c) color (d) :

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