CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 576 · 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 does a CSS comment start? (a) // (b) # (c) <!-- (d) /*
2. 2.What does font-family do? (a) centres a heading (b) makes letters bigger (c) sets the letter colour (d) picks the font style
3. 3.✍️ Which property is set to yellow in this rule?
   h1 {
     background-color: yellow;
     margin: 10px;
     text-align: center;
     padding: 8px;
   } (a) margin (b) yellow (c) background-color (d) padding
4. 4.✍️ In color: blue; which part is the value? (a) blue (b) : (c) ; (d) color
5. 5.🧩 Which language lays out the page? (a) HTML (b) JavaScript (c) CSS
6. 6.🎯 Which element does the selector p style? (a) <h1> (b) <h2 class="star"> (c) <li id="main"> (d) <p class="star">
7. 7.True or false: margin is the line round the box. (a) True (b) False
8. 8.✍️ What value is given to border in this rule?
   h2 {
     border: 2px solid;
     font-size: 20px;
     text-align: center;
   } (a) italic (b) border (c) 2px solid (d) 300px
9. 9.🧩 Which language gives the page structure? (a) HTML (b) CSS (c) JavaScript
10. 10.True or false: CSS puts a picture on a page. (a) True (b) False
11. 11.🖌️ What colour is behind the letters?
    p {
      background-color: white;
      text-align: right;
      font-size: 16px;
      color: blue;
    } (a) blue (b) white (c) yellow
12. 12.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 20px;
      }
    }
13. 13.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 6px;
      }
    }
14. 14.🖌️ Which CSS property picks the font style? (a) font-family (b) font-weight (c) background-color (d) font-size
15. 15.🎯 Which element does the selector #end style? (a) <h2 class="end"> (b) <h2 id="hero"> (c) <h2 id="end"> (d) <li class="note">
16. 16.Which of these does JavaScript do? (a) rounds box corners (b) changes the text size (c) gives the page structure (d) checks a quiz answer
17. 17.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 170px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 50px wide (no margins).
18. 18.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 100px wide (no margins).
19. 19.✍️ Which sign ends each CSS declaration? (a) . (b) , (c) ; (d) :
20. 20.🌈 Which colour is #ffff00? (a) yellow (b) white (c) cyan (d) blue
21. 21.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 3 boxes, each 60px wide (no margins).
22. 22.What does justify-content: center do? (a) packs boxes at the end (b) puts boxes in the middle (c) packs boxes at the start (d) equal gaps, none at ends
23. 23.✍️ What is the selector in this CSS rule?
    p {
      padding: 8px;
      color: red;
      width: 300px;
    } (a) p (b) .note (c) padding (d) red
24. 24.✍️ What is the selector in this CSS rule?
    body {
      color: red;
      margin: 10px;
      font-style: italic;
    } (a) body (b) color (c) 10px (d) .box
25. 25.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 60px;
      padding: 15px;
      border: 3px solid black;
      margin: 5px;
    }
26. 26.🎯 Which CSS selector matches this element?
    <h1 class="red" id="intro">Hello</h1> (a) .intro (b) .box (c) h2 (d) #intro
27. 27.⚖️ Which selector is the strongest? (a) an element selector (b) an id selector (c) a class selector
28. 28.Which of these is the border? (a) space outside the border (b) the line round the box (c) the gap round content (d) the gap to other boxes
29. 29.🎯 Which CSS selector matches this element?
    <p class="menu" id="hero">Hello</p> (a) #menu (b) .hero (c) .note (d) #hero
30. 30.🎯 Which sign starts an id selector? (a) & (b) # (c) @ (d) .
31. 31.Which of these does HTML do? (a) lays out the page (b) adds space around boxes (c) makes a form box (d) changes the page live
32. 32.What does justify-content: flex-end do? (a) puts boxes in the middle (b) packs boxes at the end (c) packs boxes at the start (d) equal gaps, none at ends
33. 33.🧩 Which language shows a pop-up message? (a) CSS (b) HTML (c) JavaScript
34. 34.🔍 Which is the odd one out? (a) adds space around boxes (b) sets colours and fonts (c) rounds box corners (d) puts a picture on a page
35. 35.True or false: .big is an id selector. (a) False (b) True
36. 36.🌈 Which hex code is bright green? (a) #00ff00 (b) #00ffff (c) #ffffff (d) #000000
37. 37.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 80px wide (no margins).
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: 190px;
      padding: 25px;
      border: 4px solid black;
      margin: 15px;
    }
39. 39.⚖️ What colour is the text of this element?
    <h2 class="note" id="logo">Hi</h2>
    CSS:
    #logo { color: blue; }
    #logo { color: orange; } (a) orange (b) green (c) white (d) blue
40. 40.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 26px;
      }
    } (a) No (b) Yes

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