CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 474 · 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.What does font-size do? (a) picks the font style (b) makes letters bigger (c) sets the letter colour (d) colours behind the text
2. 2.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 70px;
     padding: 10px;
     border: 5px solid black;
     margin: 5px;
   }
3. 3.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 260px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 80px wide (no margins).
4. 4.⚖️ What colour is the text of this element?
   <h1 class="big" id="end">Hi</h1>
   CSS:
   #end { color: orange; }
   #end { color: white; } (a) yellow (b) red (c) white (d) orange
5. 5.📱 The screen is 414px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 20px;
     }
   } (a) No (b) Yes
6. 6.⚖️ What colour is the text of this element?
   <h2 class="big" id="intro">Hi</h2>
   CSS:
   #intro { color: orange; }
   #intro { color: yellow; } (a) green (b) yellow (c) orange (d) white
7. 7.🎯 Which CSS selector matches this element?
   <div class="box" id="end">Hello</div> (a) span (b) .star (c) div (d) .end
8. 8.🌈 Which colour is #ff0000? (a) red (b) magenta (c) blue (d) yellow
9. 9.⚖️ What colour is the text of this element?
   <h2 class="note" id="hero">Hi</h2>
   CSS:
   .note { color: green; }
   h2 { color: yellow; }
   #hero { color: blue; } (a) yellow (b) purple (c) blue (d) green
10. 10.✍️ CSS declarations go inside which brackets? (a) ( ) (b) [ ] (c) { } (d) < >
11. 11.🎯 Can many elements share the same class? (a) No (b) Yes
12. 12.Which of these is the content? (a) the gap round content (b) the text or picture (c) the line round the box (d) space outside the border
13. 13.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
14. 14.🎯 Which CSS selector matches this element?
    <li class="box" id="main">Hello</li> (a) div (b) .main (c) #logo (d) li
15. 15.🖌️ How big is the text, in px?
    p {
      color: red;
      background-color: white;
      font-size: 12px;
      text-align: left;
    }
16. 16.🖌️ What colour are the letters?
    h1 {
      font-size: 40px;
      background-color: orange;
      text-align: center;
      color: yellow;
    } (a) orange (b) yellow (c) black
17. 17.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
18. 18.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 200px;
      padding: 10px;
      border: 4px solid black;
      margin: 10px;
    }
19. 19.🖌️ What colour are the letters?
    h1 {
      background-color: black;
      font-size: 24px;
      color: yellow;
      text-align: center;
    } (a) yellow (b) green (c) black
20. 20.🖌️ How big is the text, in px?
    li {
      background-color: purple;
      text-align: center;
      font-size: 36px;
      color: red;
    }
21. 21.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 100px;
      padding: 30px;
      border: 3px solid black;
      margin: 5px;
    }
22. 22.True or false: .big is a class selector. (a) False (b) True
23. 23.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    }
24. 24.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 80px;
      padding: 30px;
      border: 4px solid black;
      margin: 15px;
    }
25. 25.✍️ What value is given to background-color in this rule?
    p {
      margin: 10px;
      background-color: yellow;
      font-style: italic;
    } (a) 10px (b) background-color (c) 8px (d) yellow
26. 26.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) 800px or wider (c) 800px or narrower (d) turned off
27. 27.🖌️ How big is the text, in px?
    h2 {
      color: orange;
      background-color: yellow;
      text-align: left;
      font-size: 16px;
    }
28. 28.🧩 Which language makes headings and lists? (a) CSS (b) JavaScript (c) HTML
29. 29.🖌️ How big is the text, in px?
    p {
      background-color: black;
      text-align: left;
      color: green;
      font-size: 36px;
    }
30. 30.📦 In the box model, which part is the gap round content? (a) margin (b) content (c) border (d) padding
31. 31.🌈 Hex digits go 0 to 9, then A to which letter? (a) G (b) F (c) Z (d) J
32. 32.🎨 One CSS file can style how many pages? (a) many pages (b) only one image (c) only one word (d) no pages
33. 33.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 270px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 50px wide (no margins).
34. 34.Which of these does CSS do? (a) reacts to a button click (b) shows a pop-up message (c) counts down a timer (d) sets colours and fonts
35. 35.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the hr tag (c) the viewport meta tag (d) the br tag
36. 36.✍️ In color: blue; which part is the value? (a) ; (b) color (c) blue (d) :
37. 37.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 320px;
      justify-content: center;
    }
    Inside are 2 boxes, each 100px wide (no margins).
38. 38.What does justify-content: center do? (a) packs boxes at the end (b) packs boxes at the start (c) puts boxes in the middle (d) equal gaps, none at ends
39. 39.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 25px;
      border: 3px solid black;
      margin: 10px;
    }
40. 40.🌈 Which colour is rgb(255, 255, 0)? (a) yellow (b) red (c) blue (d) cyan

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