CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 202 · 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 is the odd one out? (a) checks a quiz answer (b) shows a pop-up message (c) reacts to a button click (d) makes a form box
2. 2.✍️ What value is given to font-weight in this rule?
   h1 {
     width: 300px;
     color: red;
     font-weight: bold;
   } (a) bold (b) 300px (c) font-weight (d) 2px solid
3. 3.🎯 What kind of selector is #main? (a) a class selector (b) an element selector (c) an id selector
4. 4.✍️ What is the selector in this CSS rule?
   #top {
     font-weight: bold;
     font-size: 20px;
   } (a) #top (b) li (c) 20px (d) font-weight
5. 5.📦 In the box model, which part is space inside the border? (a) margin (b) border (c) content (d) padding
6. 6.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 26px;
     }
   }
7. 7.🔍 Which is the odd one out? (a) puts a picture on a page (b) makes a link (c) rounds box corners (d) makes a form box
8. 8.What does color do? (a) picks the font style (b) makes letters bigger (c) sets the letter colour (d) colours behind the text
9. 9.Which of these is margin? (a) space outside the border (b) space inside the border (c) the gap round content (d) a solid or dotted edge
10. 10.✍️ Which property is set to 300px in this rule?
    li {
      width: 300px;
      background-color: yellow;
    } (a) color (b) width (c) 300px (d) font-style
11. 11.🔍 Which is the odd one out? (a) reacts to a button click (b) changes the page live (c) counts down a timer (d) makes headings and lists
12. 12.🎯 Which element does the selector #hero style? (a) <p class="hero"> (b) <h1 class="box"> (c) <p id="top"> (d) <p id="hero">
13. 13.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 260px;
      padding: 25px;
      border: 1px solid black;
      margin: 15px;
    }
14. 14.🌈 In #005300 the green part is the hex number 53. What is it as a normal number?
15. 15.🌈 Which colour is #ff0000? (a) red (b) black (c) blue (d) magenta
16. 16.🌈 Which colour is rgb(0, 255, 0)? (a) red (b) bright green (c) black (d) white
17. 17.🎯 What kind of selector is li? (a) a class selector (b) an element selector (c) an id selector
18. 18.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
19. 19.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 255 (c) 1000 (d) 99
20. 20.🧩 Which language reacts to a button click? (a) HTML (b) CSS (c) JavaScript
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.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 260px;
      justify-content: center;
    }
    Inside are 2 boxes, each 80px wide (no margins).
23. 23.🌈 Which colour is #ffffff? (a) white (b) cyan (c) magenta (d) blue
24. 24.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 3 (c) 4 (d) 2
25. 25.🔍 Which is the odd one out? (a) checks a quiz answer (b) reacts to a button click (c) shows a pop-up message (d) puts a picture on a page
26. 26.💪 Which flexbox property picks row or column? (a) flex-direction (b) display: flex (c) justify-content (d) gap
27. 27.📦 In the box model, which part is space outside the border? (a) padding (b) content (c) margin (d) border
28. 28.🖌️ Which CSS property picks the font style? (a) font-size (b) background-color (c) font-family (d) font-weight
29. 29.✍️ What value is given to color in this rule?
    h2 {
      font-weight: bold;
      color: red;
    } (a) 20px (b) red (c) center (d) color
30. 30.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) flex-start (c) center (d) flex-end
31. 31.🎯 Which element does the selector #hero style? (a) <span id="top"> (b) <p class="note"> (c) <span class="hero"> (d) <span id="hero">
32. 32.✍️ Which sign ends each CSS declaration? (a) ; (b) . (c) , (d) :
33. 33.✍️ Which property is set to 300px in this rule?
    h1 {
      text-align: center;
      width: 300px;
      margin: 10px;
    } (a) color (b) font-style (c) 300px (d) width
34. 34.🖌️ What colour are the letters?
    p {
      text-align: right;
      font-size: 40px;
      color: white;
      background-color: blue;
    } (a) green (b) blue (c) white
35. 35.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 20px;
      }
    } (a) No (b) Yes
36. 36.Which of these is margin? (a) a solid or dotted edge (b) the line round the box (c) the gap to other boxes (d) space inside the border
37. 37.🎯 Which element does the selector h1 style? (a) <div id="top"> (b) <li class="box"> (c) <h2> (d) <h1 class="box">
38. 38.💪 Which justify-content value equal gaps, none at ends? (a) flex-end (b) flex-start (c) center (d) space-between
39. 39.🌈 Which colour of light is strongest in rgb(17, 241, 18)? (a) blue (b) green (c) red
40. 40.🧩 Which language sets colours and fonts? (a) HTML (b) CSS (c) JavaScript

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