CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 431 · 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 background-color do? (a) centres a heading (b) makes the text bold (c) sets the letter colour (d) colours behind the text
2. 2.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
3. 3.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the shorter one (c) the later one (d) the first one
4. 4.🎨 Which tag holds CSS inside the head? (a) <script> (b) <css> (c) <style> (d) <body>
5. 5.⚖️ What colour is the text of this element?
   <h2 class="box" id="main">Hi</h2>
   CSS:
   #main { color: black; }
   #main { color: white; } (a) white (b) yellow (c) black (d) green
6. 6.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 340px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 100px wide (no margins).
7. 7.🌈 Which colour is #ffff00? (a) yellow (b) black (c) red (d) magenta
8. 8.🌈 Which colour of light is strongest in rgb(6, 36, 185)? (a) green (b) blue (c) red
9. 9.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) center (c) space-between (d) flex-end
10. 10.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 160px;
      padding: 15px;
      border: 5px solid black;
      margin: 5px;
    }
11. 11.📱 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
12. 12.Which of these does CSS do? (a) counts down a timer (b) lays out the page (c) checks a quiz answer (d) reacts to a button click
13. 13.🎯 Which sign starts a class selector? (a) & (b) @ (c) # (d) .
14. 14.🖌️ What colour are the letters?
    li {
      color: blue;
      background-color: yellow;
      font-size: 28px;
      text-align: left;
    } (a) blue (b) purple (c) yellow
15. 15.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 210px;
      padding: 5px;
      border: 1px solid black;
      margin: 15px;
    }
16. 16.📦 In the box model, which part is space inside the border? (a) margin (b) border (c) padding (d) content
17. 17.🔍 Which is the odd one out? (a) puts a picture on a page (b) makes a form box (c) makes headings and lists (d) adds space around boxes
18. 18.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 18px;
      }
    }
19. 19.✍️ What value is given to text-align in this rule?
    .note {
      text-align: center;
      background-color: yellow;
      border: 2px solid;
    } (a) 10px (b) text-align (c) center (d) yellow
20. 20.🎯 Which CSS selector matches this element?
    <span class="box" id="end">Hello</span> (a) #box (b) span (c) .end (d) p
21. 21.🎯 Which CSS selector matches this element?
    <h2 class="star" id="top">Hello</h2> (a) #star (b) #top (c) li (d) .top
22. 22.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    }
23. 23.✍️ Which property is set to 2px solid in this rule?
    h1 {
      border: 2px solid;
      width: 300px;
    } (a) font-style (b) 2px solid (c) width (d) border
24. 24.🌈 Which hex code is red? (a) #ff00ff (b) #00ffff (c) #00ff00 (d) #ff0000
25. 25.🎯 Which sign starts an id selector? (a) @ (b) . (c) & (d) #
26. 26.✍️ What value is given to width in this rule?
    body {
      color: red;
      text-align: center;
      width: 300px;
    } (a) 300px (b) red (c) italic (d) width
27. 27.🧩 Which language adds space around boxes? (a) HTML (b) JavaScript (c) CSS
28. 28.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) blue (c) black (d) green
29. 29.🖌️ What colour is behind the letters?
    h2 {
      background-color: green;
      text-align: right;
      color: purple;
      font-size: 20px;
    } (a) red (b) green (c) purple
30. 30.True or false: margin is the line round the box. (a) True (b) False
31. 31.What does font-size do? (a) centres a heading (b) picks the font style (c) colours behind the text (d) makes letters bigger
32. 32.True or false: p is an id selector. (a) True (b) False
33. 33.🧩 Which language makes a link? (a) CSS (b) JavaScript (c) HTML
34. 34.🧩 Which language changes the page live? (a) HTML (b) CSS (c) JavaScript
35. 35.⚖️ What colour is the text of this element?
    <h1 class="box" id="top">Hi</h1>
    CSS:
    .box { color: purple; }
    .box { color: blue; } (a) orange (b) purple (c) blue (d) green
36. 36.🌈 Which colour is #00ffff? (a) white (b) magenta (c) blue (d) cyan
37. 37.⚖️ What colour is the text of this element?
    <h2 class="note" id="hero">Hi</h2>
    CSS:
    h2 { color: red; }
    h2 { color: green; } (a) yellow (b) white (c) green (d) red
38. 38.⚖️ What colour is the text of this element?
    <p class="red" id="logo">Hi</p>
    CSS:
    #logo { color: green; }
    .red { color: yellow; }
    p { color: orange; } (a) green (b) orange (c) red (d) yellow
39. 39.Which of these does CSS do? (a) checks a quiz answer (b) changes the page live (c) rounds box corners (d) puts a picture on a page
40. 40.What does justify-content: center do? (a) packs boxes at the end (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the start

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