CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 43 · 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 is the odd one out? (a) reacts to a button click (b) sets colours and fonts (c) checks a quiz answer (d) counts down a timer
2. 2.🎯 Which element does the selector #intro style? (a) <p class="intro"> (b) <h1 class="red"> (c) <p id="main"> (d) <p id="intro">
3. 3.🎯 Which element does the selector .big style? (a) <li class="box"> (b) <h2 class="big"> (c) <h2 class="red"> (d) <h2 id="big">
4. 4.Which of these does JavaScript do? (a) changes the text size (b) counts down a timer (c) makes headings and lists (d) adds space around boxes
5. 5.🖌️ What colour is behind the letters?
   h2 {
     text-align: right;
     background-color: blue;
     font-size: 24px;
     color: black;
   } (a) black (b) red (c) blue
6. 6.🖌️ Where does the text sit on its line?
   li {
     background-color: yellow;
     color: blue;
     text-align: center;
     font-size: 28px;
   } (a) on the right (b) in the middle (c) on the left
7. 7.Which of these does JavaScript do? (a) lays out the page (b) makes a link (c) rounds box corners (d) checks a quiz answer
8. 8.⚖️ What colour is the text of this element?
   <h2 class="big" id="end">Hi</h2>
   CSS:
   h2 { color: yellow; }
   h2 { color: black; } (a) yellow (b) black (c) orange (d) white
9. 9.✍️ How many declarations (property: value pairs) are in this rule?
   h2 {
     font-weight: bold;
     text-align: center;
     width: 300px;
     margin: 10px;
   }
10. 10.🌈 Which colour is #00ffff? (a) yellow (b) white (c) cyan (d) red
11. 11.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 80px;
      padding: 25px;
      border: 1px solid black;
      margin: 15px;
    }
12. 12.True or false: .menu is an id selector. (a) True (b) False
13. 13.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 140px;
      padding: 5px;
      border: 3px solid black;
      margin: 10px;
    }
14. 14.🎨 Which tag connects an outside CSS file? (a) <css> (b) <link> (c) <a> (d) <img>
15. 15.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 8px;
      }
    } (a) Yes (b) No
16. 16.🎯 What kind of selector is img? (a) a class selector (b) an id selector (c) an element selector
17. 17.What does justify-content: flex-start 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
18. 18.🌈 In #005a00 the green part is the hex number 5a. What is it as a normal number?
19. 19.True or false: img is an element selector. (a) True (b) False
20. 20.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 180px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 80px wide (no margins).
21. 21.⚖️ What colour is the text of this element?
    <p class="red" id="top">Hi</p>
    CSS:
    .red { color: red; }
    .red { color: blue; } (a) white (b) red (c) blue (d) green
22. 22.Which of these does CSS do? (a) makes a link (b) adds space around boxes (c) counts down a timer (d) checks a quiz answer
23. 23.💪 Which flexbox property turns on flexbox? (a) flex-direction (b) display: flex (c) align-items (d) gap
24. 24.Which of these does HTML do? (a) reacts to a button click (b) shows a pop-up message (c) makes headings and lists (d) lays out the page
25. 25.True or false: li is a class selector. (a) False (b) True
26. 26.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 290px;
      padding: 20px;
      border: 3px solid black;
      margin: 20px;
    }
27. 27.🧩 Which language gives the page structure? (a) CSS (b) HTML (c) JavaScript
28. 28.True or false: padding is space inside the border. (a) True (b) False
29. 29.✍️ What is the selector in this CSS rule?
    li {
      font-style: italic;
      width: 300px;
      padding: 8px;
    } (a) body (b) li (c) 300px (d) font-style
30. 30.What does justify-content: center do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the start (d) packs boxes at the end
31. 31.Which of these is the border? (a) space outside the border (b) space inside the border (c) the text or picture (d) a solid or dotted edge
32. 32.True or false: the border is a solid or dotted edge. (a) False (b) True
33. 33.🎯 Which element does the selector #top style? (a) <span class="big"> (b) <div class="top"> (c) <div id="top"> (d) <div id="intro">
34. 34.Which of these does JavaScript do? (a) puts a picture on a page (b) adds space around boxes (c) rounds box corners (d) reacts to a button click
35. 35.🎯 What kind of selector is .big? (a) an element selector (b) an id selector (c) a class selector
36. 36.True or false: HTML puts a picture on a page. (a) True (b) False
37. 37.💪 Which flexbox property sets space between boxes? (a) justify-content (b) align-items (c) flex-direction (d) gap
38. 38.🖌️ Which CSS property sets the letter colour? (a) font-weight (b) color (c) font-family (d) background-color
39. 39.🌈 Which colour is #ffffff? (a) magenta (b) white (c) blue (d) yellow
40. 40.🖌️ What colour is behind the letters?
    h2 {
      text-align: left;
      font-size: 12px;
      color: yellow;
      background-color: green;
    } (a) yellow (b) black (c) green

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