CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 758 · 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="big" id="main">Hi</h2>
   CSS:
   h2 { color: yellow; }
   h2 { color: blue; } (a) black (b) blue (c) red (d) yellow
2. 2.🌈 Which hex code is bright green? (a) #0000ff (b) #000000 (c) #00ffff (d) #00ff00
3. 3.🧩 Which language gives the page structure? (a) HTML (b) CSS (c) JavaScript
4. 4.🔍 Which is the odd one out? (a) reacts to a button click (b) puts a picture on a page (c) changes the page live (d) shows a pop-up message
5. 5.True or false: CSS reacts to a button click. (a) False (b) True
6. 6.Which of these does HTML do? (a) lays out the page (b) makes headings and lists (c) adds space around boxes (d) sets colours and fonts
7. 7.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) green (c) black (d) blue
8. 8.🌈 In #000050 the blue part is the hex number 50. What is it as a normal number?
9. 9.⚖️ What colour is the text of this element?
   <h2 class="menu" id="intro">Hi</h2>
   CSS:
   h2 { color: red; }
   h2 { color: blue; } (a) red (b) black (c) blue (d) purple
10. 10.🎨 Which tag holds CSS inside the head? (a) <style> (b) <script> (c) <css> (d) <body>
11. 11.🎯 Which CSS selector matches this element?
    <span class="red" id="logo">Hello</span> (a) .logo (b) #end (c) p (d) span
12. 12.⚖️ What colour is the text of this element?
    <h1 class="star" id="main">Hi</h1>
    CSS:
    h1 { color: black; }
    h1 { color: green; } (a) green (b) white (c) black (d) yellow
13. 13.📦 In the box model, which part is the gap to other boxes? (a) padding (b) margin (c) content (d) border
14. 14.💪 Which justify-content value equal gaps, none at ends? (a) center (b) flex-start (c) space-between (d) flex-end
15. 15.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
16. 16.⚖️ What colour is the text of this element?
    <p class="big" id="intro">Hi</p>
    CSS:
    #intro { color: purple; }
    #intro { color: red; } (a) orange (b) red (c) purple (d) white
17. 17.🖌️ How big is the text, in px?
    li {
      background-color: green;
      text-align: left;
      color: yellow;
      font-size: 12px;
    }
18. 18.What does font-weight do? (a) sets the letter colour (b) picks the font style (c) makes the text bold (d) centres a heading
19. 19.True or false: padding is the line round the box. (a) False (b) True
20. 20.🖌️ Which CSS property centres a heading? (a) background-color (b) text-align (c) font-weight (d) color
21. 21.🎯 Which element does the selector div style? (a) <span> (b) <p class="menu"> (c) <h1 id="intro"> (d) <div class="menu">
22. 22.🔍 Which is the odd one out? (a) sets colours and fonts (b) adds space around boxes (c) lays out the page (d) changes the page live
23. 23.⚖️ What colour is the text of this element?
    <h1 class="menu" id="top">Hi</h1>
    CSS:
    h1 { color: orange; }
    .menu { color: green; }
    #top { color: purple; } (a) green (b) orange (c) yellow (d) purple
24. 24.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 24px;
      }
    } (a) No (b) Yes
25. 25.🔍 Which is the odd one out? (a) changes the page live (b) sets colours and fonts (c) reacts to a button click (d) shows a pop-up message
26. 26.🎯 Which CSS selector matches this element?
    <span class="menu" id="intro">Hello</span> (a) #menu (b) .intro (c) .note (d) span
27. 27.🌈 Which colour of light is strongest in rgb(28, 81, 215)? (a) red (b) green (c) blue
28. 28.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 120px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 40px wide (no margins).
29. 29.🌈 Which hex code is white? (a) #000000 (b) #00ff00 (c) #ffffff (d) #ff0000
30. 30.✍️ Which property is set to red in this rule?
    body {
      margin: 10px;
      color: red;
      border: 2px solid;
      font-weight: bold;
    } (a) font-size (b) text-align (c) red (d) color
31. 31.⚖️ What colour is the text of this element?
    <p class="box" id="logo">Hi</p>
    CSS:
    p { color: green; }
    #logo { color: orange; }
    .box { color: yellow; } (a) green (b) black (c) yellow (d) orange
32. 32.🖌️ What colour is behind the letters?
    li {
      text-align: left;
      color: purple;
      background-color: black;
      font-size: 32px;
    } (a) purple (b) black (c) red
33. 33.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 120px;
      padding: 10px;
      border: 2px solid black;
      margin: 15px;
    }
34. 34.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 18px;
      }
    }
35. 35.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) turned off (c) exactly 1000px (d) 600px or wider
36. 36.True or false: img is an element selector. (a) False (b) True
37. 37.True or false: #hero is an element selector. (a) True (b) False
38. 38.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) turned off (c) 800px or narrower (d) exactly 100px
39. 39.🎯 Which sign starts an id selector? (a) & (b) @ (c) . (d) #
40. 40.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      border: 2px solid;
      padding: 8px;
      font-size: 20px;
    }

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