CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 471 · 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.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) white (c) red (d) blue
2. 2.🎯 Which CSS selector matches this element?
   <div class="box" id="top">Hello</div> (a) .top (b) span (c) div (d) .star
3. 3.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) black (c) blue (d) green
4. 4.🧩 Which language makes a link? (a) JavaScript (b) HTML (c) CSS
5. 5.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
6. 6.✍️ What value is given to text-align in this rule?
   body {
     text-align: center;
     font-size: 20px;
     font-style: italic;
   } (a) yellow (b) 10px (c) text-align (d) center
7. 7.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 20px;
     }
   }
8. 8.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 24px;
     }
   }
9. 9.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 16px;
     }
   } (a) Yes (b) No
10. 10.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 3 (c) 4 (d) 2
11. 11.True or false: JavaScript gives the page structure. (a) False (b) True
12. 12.🌈 Which hex code is yellow? (a) #ffff00 (b) #ff00ff (c) #00ff00 (d) #ffffff
13. 13.✍️ Which property is set to center in this rule?
    li {
      text-align: center;
      font-style: italic;
      background-color: yellow;
    } (a) margin (b) center (c) text-align (d) background-color
14. 14.Which of these does HTML do? (a) gives the page structure (b) changes the text size (c) changes the page live (d) adds space around boxes
15. 15.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 24px;
      }
    }
16. 16.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 80px;
      padding: 25px;
      border: 5px solid black;
      margin: 15px;
    }
17. 17.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 270px;
      padding: 5px;
      border: 5px solid black;
      margin: 5px;
    }
18. 18.🎯 Which CSS selector matches this element?
    <div class="star" id="end">Hello</div> (a) div (b) span (c) #hero (d) .end
19. 19.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 99 (c) 255 (d) 1000
20. 20.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 100px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 40px wide (no margins).
21. 21.🖌️ Where does the text sit on its line?
    p {
      background-color: purple;
      text-align: right;
      font-size: 12px;
      color: white;
    } (a) in the middle (b) on the left (c) on the right
22. 22.✍️ What value is given to font-weight in this rule?
    #top {
      font-weight: bold;
      border: 2px solid;
    } (a) 300px (b) 2px solid (c) bold (d) font-weight
23. 23.True or false: JavaScript puts a picture on a page. (a) True (b) False
24. 24.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 230px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 50px wide (no margins).
25. 25.🎯 Which CSS selector matches this element?
    <li class="box" id="intro">Hello</li> (a) div (b) #box (c) #main (d) #intro
26. 26.🔍 Which is the odd one out? (a) makes headings and lists (b) makes a form box (c) makes a link (d) checks a quiz answer
27. 27.🌈 Which hex code is white? (a) #ffff00 (b) #ff0000 (c) #00ffff (d) #ffffff
28. 28.Which of these is the content? (a) the gap round content (b) space inside the border (c) the text or picture (d) space outside the border
29. 29.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 200px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 40px wide (no margins).
30. 30.🌈 Which colour of light is strongest in rgb(184, 136, 76)? (a) blue (b) green (c) red
31. 31.🎨 Which attribute adds CSS inside one tag? (a) src (b) style (c) href (d) alt
32. 32.True or false: CSS makes headings and lists. (a) False (b) True
33. 33.🔍 Which is the odd one out? (a) reacts to a button click (b) counts down a timer (c) makes a link (d) checks a quiz answer
34. 34.🎯 Which CSS selector matches this element?
    <span class="star" id="main">Hello</span> (a) span (b) #logo (c) p (d) .main
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 language sets colours and fonts? (a) HTML (b) CSS (c) JavaScript
37. 37.🎯 Which sign starts a class selector? (a) & (b) # (c) @ (d) .
38. 38.📦 In the box model, which part is the gap to other boxes? (a) content (b) border (c) padding (d) margin
39. 39.Which of these is the border? (a) the gap round content (b) the text or picture (c) space inside the border (d) the line round the box
40. 40.🔍 Which is the odd one out? (a) gives the page structure (b) sets colours and fonts (c) rounds box corners (d) lays out the page

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