CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 989 · 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.📱 The screen is 414px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 18px;
     }
   } (a) No (b) Yes
2. 2.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 22px;
     }
   }
3. 3.⚖️ What colour is the text of this element?
   <h2 class="menu" id="main">Hi</h2>
   CSS:
   h2 { color: yellow; }
   h2 { color: white; } (a) black (b) white (c) orange (d) yellow
4. 4.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 14px;
     }
   }
5. 5.Which of these does HTML do? (a) counts down a timer (b) reacts to a button click (c) puts a picture on a page (d) checks a quiz answer
6. 6.🌈 Which colour of light is strongest in rgb(155, 38, 50)? (a) blue (b) red (c) green
7. 7.🎯 What kind of selector is p? (a) a class selector (b) an id selector (c) an element selector
8. 8.🖌️ What colour is behind the letters?
   li {
     text-align: left;
     background-color: black;
     font-size: 28px;
     color: blue;
   } (a) black (b) purple (c) blue
9. 9.🧩 Which language changes the text size? (a) HTML (b) JavaScript (c) CSS
10. 10.⚖️ What colour is the text of this element?
    <h1 class="box" id="hero">Hi</h1>
    CSS:
    #hero { color: black; }
    .box { color: orange; }
    h1 { color: red; } (a) black (b) red (c) orange (d) blue
11. 11.🎨 Which attribute adds CSS inside one tag? (a) style (b) href (c) alt (d) src
12. 12.🔍 Which is the odd one out? (a) puts a picture on a page (b) changes the text size (c) sets colours and fonts (d) lays out the page
13. 13.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 110px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 40px wide (no margins).
14. 14.🧩 Which language makes a form box? (a) JavaScript (b) CSS (c) HTML
15. 15.🎯 Which element does the selector span style? (a) <p> (b) <h2 id="main"> (c) <h1 class="note"> (d) <span class="note">
16. 16.✍️ Which sign ends each CSS declaration? (a) . (b) ; (c) , (d) :
17. 17.🖌️ Where does the text sit on its line?
    h2 {
      text-align: left;
      background-color: black;
      font-size: 28px;
      color: purple;
    } (a) in the middle (b) on the left (c) on the right
18. 18.🧩 Which language adds space around boxes? (a) JavaScript (b) HTML (c) CSS
19. 19.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    }
20. 20.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 3 (c) 4 (d) 2
21. 21.🖌️ What colour are the letters?
    h1 {
      background-color: blue;
      text-align: center;
      font-size: 28px;
      color: green;
    } (a) blue (b) black (c) green
22. 22.Which of these is the border? (a) space inside the border (b) the gap to other boxes (c) the text or picture (d) the line round the box
23. 23.✍️ What value is given to font-style in this rule?
    .note {
      font-style: italic;
      font-weight: bold;
      font-size: 20px;
    } (a) 20px (b) italic (c) font-style (d) red
24. 24.🌈 Which colour is rgb(255, 255, 0)? (a) black (b) blue (c) yellow (d) red
25. 25.⚖️ What colour is the text of this element?
    <h2 class="note" id="logo">Hi</h2>
    CSS:
    #logo { color: green; }
    .note { color: purple; }
    h2 { color: red; } (a) purple (b) black (c) green (d) red
26. 26.True or false: margin is the gap to other boxes. (a) False (b) True
27. 27.💪 Which flexbox property spaces boxes along a row? (a) flex-direction (b) justify-content (c) align-items (d) gap
28. 28.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      margin: 10px;
    }
29. 29.🔍 Which is the odd one out? (a) shows a pop-up message (b) adds space around boxes (c) checks a quiz answer (d) reacts to a button click
30. 30.🎯 Which sign starts an id selector? (a) @ (b) # (c) . (d) &
31. 31.🎨 Which tag holds CSS inside the head? (a) <style> (b) <script> (c) <body> (d) <css>
32. 32.🖌️ What colour are the letters?
    h1 {
      font-size: 40px;
      text-align: left;
      color: red;
      background-color: yellow;
    } (a) red (b) black (c) yellow
33. 33.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      border: 2px solid;
      font-size: 20px;
      text-align: center;
      width: 300px;
    }
34. 34.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 270px;
      padding: 20px;
      border: 3px solid black;
      margin: 15px;
    }
35. 35.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) neither (c) the later one (d) the shorter one
36. 36.🌈 Which colour is rgb(0, 255, 0)? (a) white (b) red (c) bright green (d) yellow
37. 37.⚖️ What colour is the text of this element?
    <h1 class="box" id="end">Hi</h1>
    CSS:
    #end { color: purple; }
    h1 { color: orange; } (a) green (b) orange (c) black (d) purple
38. 38.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) blue (c) green (d) black
39. 39.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      text-align: center;
    }
40. 40.Which of these is margin? (a) a solid or dotted edge (b) space inside the border (c) the text or picture (d) the gap to other boxes

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