CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 42 · 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 does HTML do? (a) gives the page structure (b) rounds box corners (c) sets colours and fonts (d) counts down a timer
2. 2.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 14px;
     }
   } (a) Yes (b) No
3. 3.💪 Which flexbox property turns on flexbox? (a) justify-content (b) gap (c) display: flex (d) align-items
4. 4.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Cascading Style Sheets (c) Creative Sheet System (d) Colourful Site Styles
5. 5.True or false: the content is the gap round content. (a) False (b) True
6. 6.True or false: JavaScript changes the text size. (a) False (b) True
7. 7.📱 The screen is 700px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 18px;
     }
   } (a) No (b) Yes
8. 8.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 26px;
     }
   }
9. 9.True or false: .star is an id selector. (a) True (b) False
10. 10.📦 In the box model, which part is the gap round content? (a) border (b) margin (c) padding (d) content
11. 11.🖌️ How big is the text, in px?
    h2 {
      color: red;
      background-color: orange;
      text-align: left;
      font-size: 24px;
    }
12. 12.⚖️ What colour is the text of this element?
    <h2 class="note" id="intro">Hi</h2>
    CSS:
    h2 { color: purple; }
    .note { color: orange; } (a) white (b) green (c) purple (d) orange
13. 13.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) neither (c) the later one (d) the first one
14. 14.🖌️ How big is the text, in px?
    p {
      font-size: 28px;
      background-color: purple;
      color: orange;
      text-align: right;
    }
15. 15.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 300px;
      padding: 30px;
      border: 4px solid black;
      margin: 5px;
    }
16. 16.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 140px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 50px wide (no margins).
17. 17.🌈 What is the biggest number one colour can have in rgb()? (a) 1000 (b) 255 (c) 100 (d) 99
18. 18.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      font-size: 20px;
      font-weight: bold;
      border: 2px solid;
      font-style: italic;
    }
19. 19.🎯 What kind of selector is .star? (a) a class selector (b) an element selector (c) an id selector
20. 20.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) packs boxes at the end (c) puts boxes in the middle (d) packs boxes at the start
21. 21.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 190px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 40px wide (no margins).
22. 22.💪 Which justify-content value packs boxes at the end? (a) flex-end (b) center (c) space-between (d) flex-start
23. 23.🎯 Which CSS selector matches this element?
    <h2 class="big" id="end">Hello</h2> (a) #hero (b) #big (c) li (d) .big
24. 24.Which of these does HTML do? (a) reacts to a button click (b) adds space around boxes (c) changes the page live (d) makes a form box
25. 25.🎯 Which CSS selector matches this element?
    <h2 class="star" id="hero">Hello</h2> (a) h2 (b) .hero (c) #star (d) .menu
26. 26.🎨 Which tag connects an outside CSS file? (a) <img> (b) <css> (c) <link> (d) <a>
27. 27.🧩 Which language checks a quiz answer? (a) HTML (b) JavaScript (c) CSS
28. 28.🎯 Which CSS selector matches this element?
    <span class="star" id="hero">Hello</span> (a) #top (b) p (c) .hero (d) #hero
29. 29.📦 In the box model, which part is the gap to other boxes? (a) border (b) padding (c) content (d) margin
30. 30.🧩 Which language shows a pop-up message? (a) JavaScript (b) HTML (c) CSS
31. 31.🌈 Which colour is rgb(0, 0, 255)? (a) black (b) yellow (c) blue (d) red
32. 32.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
33. 33.True or false: margin is the gap round content. (a) True (b) False
34. 34.🎯 Which CSS selector matches this element?
    <h1 class="menu" id="end">Hello</h1> (a) #hero (b) .menu (c) #menu (d) .end
35. 35.🖌️ Which CSS property picks the font style? (a) font-weight (b) text-align (c) background-color (d) font-family
36. 36.🧩 Which language gives the page structure? (a) CSS (b) HTML (c) JavaScript
37. 37.What does justify-content: space-between do? (a) packs boxes at the start (b) packs boxes at the end (c) equal gaps, none at ends (d) puts boxes in the middle
38. 38.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 100px;
      padding: 10px;
      border: 5px solid black;
      margin: 10px;
    }
39. 39.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 24px;
      }
    } (a) No (b) Yes
40. 40.🔍 Which is the odd one out? (a) shows a pop-up message (b) changes the page live (c) counts down a timer (d) gives the page structure

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