CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 629 · 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.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 160px;
     padding: 15px;
     border: 1px solid black;
     margin: 15px;
   }
2. 2.📱 The screen is 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 8px;
     }
   } (a) Yes (b) No
3. 3.🌈 Which colour is rgb(0, 0, 255)? (a) red (b) white (c) yellow (d) blue
4. 4.✍️ What is the selector in this CSS rule?
   .note {
     font-size: 20px;
     text-align: center;
     border: 2px solid;
   } (a) #top (b) .note (c) center (d) font-size
5. 5.🌈 Which colour is #ffffff? (a) red (b) white (c) magenta (d) cyan
6. 6.💪 Which flexbox property sets space between boxes? (a) display: flex (b) gap (c) align-items (d) justify-content
7. 7.🖌️ How big is the text, in px?
   li {
     font-size: 20px;
     text-align: left;
     background-color: yellow;
     color: white;
   }
8. 8.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
9. 9.📱 Responsive design means a page ___. (a) never changes (b) fits every screen (c) is only for laptops (d) has no pictures
10. 10.Which of these does CSS do? (a) reacts to a button click (b) shows a pop-up message (c) changes the page live (d) adds space around boxes
11. 11.🧩 Which language checks a quiz answer? (a) HTML (b) JavaScript (c) CSS
12. 12.🖌️ Where does the text sit on its line?
    p {
      color: red;
      background-color: orange;
      text-align: left;
      font-size: 40px;
    } (a) on the right (b) in the middle (c) on the left
13. 13.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 32px;
      }
    } (a) No (b) Yes
14. 14.🌈 Which colour is rgb(0, 255, 255)? (a) white (b) bright green (c) black (d) cyan
15. 15.✍️ What value is given to padding in this rule?
    p {
      color: red;
      padding: 8px;
      width: 300px;
    } (a) 2px solid (b) bold (c) padding (d) 8px
16. 16.🔍 Which is the odd one out? (a) makes headings and lists (b) puts a picture on a page (c) makes a form box (d) shows a pop-up message
17. 17.🌈 Which colour is #000000? (a) yellow (b) blue (c) bright green (d) black
18. 18.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: center;
    }
    Inside are 4 boxes, each 40px wide (no margins).
19. 19.✍️ Which sign goes between a property and its value? (a) - (b) ; (c) : (d) =
20. 20.🎯 Which sign starts an id selector? (a) & (b) # (c) @ (d) .
21. 21.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) center (c) flex-end (d) space-between
22. 22.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 340px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 100px wide (no margins).
23. 23.Which of these does HTML do? (a) changes the text size (b) lays out the page (c) makes headings and lists (d) adds space around boxes
24. 24.🌈 Which colour of light is strongest in rgb(19, 183, 70)? (a) red (b) green (c) blue
25. 25.True or false: CSS gives the page structure. (a) True (b) False
26. 26.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      text-align: center;
      border: 2px solid;
      color: red;
      margin: 10px;
    }
27. 27.🧩 Which language changes the text size? (a) HTML (b) CSS (c) JavaScript
28. 28.Which of these does CSS do? (a) puts a picture on a page (b) makes a link (c) changes the text size (d) shows a pop-up message
29. 29.💪 Which flexbox property spaces boxes along a row? (a) gap (b) align-items (c) justify-content (d) flex-direction
30. 30.🌈 Which colour is rgb(0, 255, 0)? (a) black (b) magenta (c) bright green (d) cyan
31. 31.🔍 Which is the odd one out? (a) gives the page structure (b) sets colours and fonts (c) puts a picture on a page (d) makes headings and lists
32. 32.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) blue (c) black (d) red
33. 33.✍️ What is the selector in this CSS rule?
    h2 {
      padding: 8px;
      font-weight: bold;
      color: red;
      border: 2px solid;
    } (a) h1 (b) bold (c) h2 (d) padding
34. 34.🌈 In #b50000 the red part is the hex number b5. What is it as a normal number?
35. 35.🌈 Which colour of light is strongest in rgb(139, 15, 251)? (a) green (b) red (c) blue
36. 36.🖌️ How big is the text, in px?
    h2 {
      font-size: 28px;
      color: red;
      background-color: white;
      text-align: right;
    }
37. 37.True or false: margin is space outside the border. (a) True (b) False
38. 38.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 60px;
      padding: 10px;
      border: 2px solid black;
      margin: 5px;
    }
39. 39.True or false: the content is the line round the box. (a) False (b) True
40. 40.🔍 Which is the odd one out? (a) counts down a timer (b) makes a form box (c) puts a picture on a page (d) makes a link

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