CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 112 · 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 of these is margin? (a) the text or picture (b) space outside the border (c) a solid or dotted edge (d) the line round the box
2. 2.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 90px;
     padding: 10px;
     border: 2px solid black;
     margin: 15px;
   }
3. 3.✍️ Which property is set to italic in this rule?
   .note {
     color: red;
     font-style: italic;
     font-weight: bold;
   } (a) font-style (b) color (c) font-size (d) italic
4. 4.🌈 In #7a0000 the red part is the hex number 7a. What is it as a normal number?
5. 5.True or false: HTML makes a form box. (a) False (b) True
6. 6.🌈 In #002b00 the green part is the hex number 2b. What is it as a normal number?
7. 7.📱 The screen is 375px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 18px;
     }
   } (a) Yes (b) No
8. 8.✍️ How many declarations (property: value pairs) are in this rule?
   .box {
     margin: 10px;
   }
9. 9.📱 What does a media query check? (a) the page title (b) the time of day (c) the battery level (d) the screen width
10. 10.🎯 Which CSS selector matches this element?
    <p class="note" id="top">Hello</p> (a) #intro (b) h1 (c) p (d) #note
11. 11.Which of these does HTML do? (a) rounds box corners (b) shows a pop-up message (c) gives the page structure (d) reacts to a button click
12. 12.🔍 Which is the odd one out? (a) checks a quiz answer (b) changes the page live (c) shows a pop-up message (d) makes headings and lists
13. 13.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 14px;
      }
    }
14. 14.True or false: #main is an id selector. (a) True (b) False
15. 15.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      border: 2px solid;
      margin: 10px;
      color: red;
      width: 300px;
    }
16. 16.📦 In the box model, which part is space inside the border? (a) content (b) margin (c) padding (d) border
17. 17.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 18px;
      }
    }
18. 18.Which of these does CSS do? (a) adds space around boxes (b) makes headings and lists (c) counts down a timer (d) puts a picture on a page
19. 19.🧩 Which language changes the page live? (a) HTML (b) JavaScript (c) CSS
20. 20.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      background-color: yellow;
    }
21. 21.💪 Which flexbox property lines boxes up across? (a) display: flex (b) gap (c) align-items (d) flex-direction
22. 22.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 190px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 40px wide (no margins).
23. 23.🌈 Which hex code is magenta? (a) #ff0000 (b) #000000 (c) #00ffff (d) #ff00ff
24. 24.⚖️ What colour is the text of this element?
    <p class="note" id="hero">Hi</p>
    CSS:
    #hero { color: white; }
    #hero { color: orange; } (a) white (b) green (c) orange (d) black
25. 25.🌈 Which hex code is white? (a) #ff0000 (b) #00ffff (c) #ffffff (d) #ff00ff
26. 26.🌈 Which colour is rgb(0, 0, 255)? (a) red (b) blue (c) cyan (d) bright green
27. 27.What does font-weight do? (a) colours behind the text (b) sets the letter colour (c) makes the text bold (d) makes letters bigger
28. 28.Which of these does HTML do? (a) counts down a timer (b) changes the page live (c) sets colours and fonts (d) puts a picture on a page
29. 29.🖌️ Which CSS property centres a heading? (a) background-color (b) text-align (c) font-size (d) font-family
30. 30.🖌️ What colour are the letters?
    li {
      text-align: left;
      color: red;
      background-color: black;
      font-size: 28px;
    } (a) black (b) red (c) blue
31. 31.🧩 Which language sets colours and fonts? (a) HTML (b) JavaScript (c) CSS
32. 32.True or false: CSS changes the page live. (a) True (b) False
33. 33.✍️ What is the selector in this CSS rule?
    #top {
      font-weight: bold;
      text-align: center;
      background-color: yellow;
      padding: 8px;
    } (a) center (b) font-weight (c) #top (d) li
34. 34.🌈 Which colour is #ffff00? (a) magenta (b) cyan (c) red (d) yellow
35. 35.🔍 Which is the odd one out? (a) adds space around boxes (b) counts down a timer (c) changes the page live (d) checks a quiz answer
36. 36.📱 Responsive design means a page ___. (a) never changes (b) is only for laptops (c) fits every screen (d) has no pictures
37. 37.✍️ Which property is set to bold in this rule?
    h2 {
      font-weight: bold;
      font-size: 20px;
    } (a) bold (b) border (c) font-weight (d) width
38. 38.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 370px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 100px wide (no margins).
39. 39.💪 Which justify-content value packs boxes at the start? (a) space-between (b) flex-end (c) flex-start (d) center
40. 40.✍️ Which property is set to bold in this rule?
    li {
      font-weight: bold;
      color: red;
    } (a) bold (b) border (c) font-weight (d) width

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