CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 398 · 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 colour is the text of this element?
   <h2 class="box" id="end">Hi</h2>
   CSS:
   #end { color: yellow; }
   #end { color: white; } (a) green (b) blue (c) white (d) yellow
2. 2.True or false: h1 is an id selector. (a) False (b) True
3. 3.🌈 Which colour is rgb(255, 255, 255)? (a) white (b) bright green (c) magenta (d) red
4. 4.📱 What does a media query check? (a) the battery level (b) the page title (c) the screen width (d) the time of day
5. 5.🌈 Which colour is #00ff00? (a) black (b) yellow (c) white (d) bright green
6. 6.True or false: HTML rounds box corners. (a) True (b) False
7. 7.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 220px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 60px wide (no margins).
8. 8.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 200px;
     padding: 15px;
     border: 1px solid black;
     margin: 0px;
   }
9. 9.🎨 Which tag connects an outside CSS file? (a) <link> (b) <img> (c) <css> (d) <a>
10. 10.🖌️ Which CSS property colours behind the text? (a) color (b) font-size (c) font-family (d) background-color
11. 11.True or false: li is an element selector. (a) False (b) True
12. 12.🎯 Which element does the selector .red style? (a) <p id="red"> (b) <h1 class="star"> (c) <p class="red"> (d) <p class="box">
13. 13.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 10px;
      border: 2px solid black;
      margin: 5px;
    }
14. 14.⚖️ What colour is the text of this element?
    <h2 class="note" id="hero">Hi</h2>
    CSS:
    h2 { color: blue; }
    #hero { color: purple; } (a) blue (b) orange (c) purple (d) white
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: 180px;
      padding: 30px;
      border: 5px solid black;
      margin: 0px;
    }
16. 16.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 170px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 60px wide (no margins).
17. 17.Which of these does HTML do? (a) reacts to a button click (b) gives the page structure (c) shows a pop-up message (d) counts down a timer
18. 18.⚖️ What colour is the text of this element?
    <p class="menu" id="end">Hi</p>
    CSS:
    p { color: red; }
    #end { color: orange; } (a) green (b) white (c) orange (d) red
19. 19.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 270px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 50px wide (no margins).
20. 20.True or false: .note is an id selector. (a) False (b) True
21. 21.What does font-family do? (a) makes letters bigger (b) sets the letter colour (c) colours behind the text (d) picks the font style
22. 22.True or false: #end is an id selector. (a) False (b) True
23. 23.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      font-weight: bold;
      font-style: italic;
    }
24. 24.⚖️ What colour is the text of this element?
    <h2 class="red" id="top">Hi</h2>
    CSS:
    h2 { color: green; }
    h2 { color: white; } (a) purple (b) white (c) blue (d) green
25. 25.Which of these is padding? (a) space outside the border (b) the text or picture (c) the line round the box (d) space inside the border
26. 26.✍️ What is the selector in this CSS rule?
    h2 {
      width: 300px;
      background-color: yellow;
    } (a) yellow (b) h2 (c) width (d) h1
27. 27.🖌️ Which CSS property sets the letter colour? (a) font-size (b) color (c) font-weight (d) font-family
28. 28.🌈 Which colour is #ff00ff? (a) red (b) cyan (c) black (d) magenta
29. 29.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) blue (c) red (d) green
30. 30.🎯 What kind of selector is li? (a) an element selector (b) a class selector (c) an id selector
31. 31.🎯 Which CSS selector matches this element?
    <h2 class="star" id="top">Hello</h2> (a) .menu (b) li (c) #intro (d) .star
32. 32.🎯 Which CSS selector matches this element?
    <h1 class="menu" id="main">Hello</h1> (a) .main (b) h2 (c) #menu (d) #main
33. 33.True or false: JavaScript makes a form box. (a) True (b) False
34. 34.✍️ What is the selector in this CSS rule?
    h2 {
      margin: 10px;
      color: red;
    } (a) h1 (b) margin (c) red (d) h2
35. 35.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 120px;
      padding: 25px;
      border: 2px solid black;
      margin: 15px;
    }
36. 36.🧩 Which language changes the page live? (a) HTML (b) JavaScript (c) CSS
37. 37.⚖️ What colour is the text of this element?
    <p class="star" id="main">Hi</p>
    CSS:
    p { color: green; }
    #main { color: blue; }
    .star { color: red; } (a) yellow (b) blue (c) red (d) green
38. 38.🎯 What kind of selector is img? (a) a class selector (b) an element selector (c) an id selector
39. 39.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) blue (c) green (d) white
40. 40.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      padding: 8px;
      margin: 10px;
      font-weight: bold;
    }

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