CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 168 · 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.🌈 In #000000 the blue part is the hex number 00. What is it as a normal number?
2. 2.What does justify-content: center 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
3. 3.🎯 What kind of selector is .star? (a) an element selector (b) an id selector (c) a class selector
4. 4.🎯 What kind of selector is #main? (a) an element selector (b) a class selector (c) an id selector
5. 5.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) red (c) blue (d) black
6. 6.🌈 In #001700 the green part is the hex number 17. What is it as a normal number?
7. 7.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 120px;
     padding: 30px;
     border: 4px solid black;
     margin: 0px;
   }
8. 8.⚖️ What colour is the text of this element?
   <h2 class="big" id="hero">Hi</h2>
   CSS:
   #hero { color: black; }
   #hero { color: orange; } (a) black (b) yellow (c) orange (d) red
9. 9.What does justify-content: space-between do? (a) packs boxes at the start (b) packs boxes at the end (c) puts boxes in the middle (d) equal gaps, none at ends
10. 10.What does justify-content: flex-start 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
11. 11.⚖️ What colour is the text of this element?
    <h2 class="big" id="logo">Hi</h2>
    CSS:
    .big { color: red; }
    #logo { color: purple; } (a) red (b) purple (c) blue (d) yellow
12. 12.✍️ How does a CSS comment start? (a) <!-- (b) # (c) // (d) /*
13. 13.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 180px;
      padding: 10px;
      border: 1px solid black;
      margin: 0px;
    }
14. 14.⚖️ What colour is the text of this element?
    <h2 class="note" id="intro">Hi</h2>
    CSS:
    h2 { color: blue; }
    h2 { color: orange; } (a) yellow (b) orange (c) white (d) blue
15. 15.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 260px;
      padding: 10px;
      border: 1px solid black;
      margin: 20px;
    }
16. 16.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) red (c) green (d) blue
17. 17.🌈 Which colour of light is strongest in rgb(217, 89, 33)? (a) blue (b) red (c) green
18. 18.🧩 Which language checks a quiz answer? (a) CSS (b) JavaScript (c) HTML
19. 19.🎯 Which element does the selector #end style? (a) <li id="hero"> (b) <li id="end"> (c) <div class="box"> (d) <li class="end">
20. 20.True or false: .big is an element selector. (a) False (b) True
21. 21.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) turned off (c) 600px or wider (d) 600px or narrower
22. 22.🖌️ How big is the text, in px?
    h1 {
      background-color: black;
      text-align: left;
      color: white;
      font-size: 16px;
    }
23. 23.Which of these is margin? (a) the line round the box (b) the gap round content (c) space outside the border (d) space inside the border
24. 24.What does font-size do? (a) makes letters bigger (b) picks the font style (c) sets the letter colour (d) makes the text bold
25. 25.True or false: CSS lays out the page. (a) False (b) True
26. 26.⚖️ What colour is the text of this element?
    <h2 class="star" id="top">Hi</h2>
    CSS:
    #top { color: yellow; }
    #top { color: green; } (a) yellow (b) black (c) green (d) blue
27. 27.⚖️ What colour is the text of this element?
    <h1 class="red" id="end">Hi</h1>
    CSS:
    #end { color: black; }
    #end { color: blue; } (a) blue (b) black (c) orange (d) yellow
28. 28.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 100px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 40px wide (no margins).
29. 29.🌈 Which hex code is white? (a) #0000ff (b) #ffffff (c) #00ffff (d) #ffff00
30. 30.🎨 One CSS file can style how many pages? (a) only one image (b) no pages (c) only one word (d) many pages
31. 31.What does font-family do? (a) makes the text bold (b) colours behind the text (c) picks the font style (d) makes letters bigger
32. 32.🌈 Which colour of light is strongest in rgb(157, 26, 4)? (a) blue (b) green (c) red
33. 33.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
34. 34.⚖️ What colour is the text of this element?
    <h1 class="red" id="logo">Hi</h1>
    CSS:
    #logo { color: blue; }
    #logo { color: orange; } (a) red (b) blue (c) orange (d) white
35. 35.✍️ Which property is set to 10px in this rule?
    .box {
      margin: 10px;
      border: 2px solid;
      background-color: yellow;
    } (a) margin (b) padding (c) font-weight (d) 10px
36. 36.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 460px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 100px wide (no margins).
37. 37.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 380px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 80px wide (no margins).
38. 38.🔍 Which is the odd one out? (a) checks a quiz answer (b) gives the page structure (c) changes the page live (d) reacts to a button click
39. 39.🎯 Which sign starts a class selector? (a) # (b) & (c) . (d) @
40. 40.Which of these is margin? (a) the text or picture (b) the gap round content (c) the line round the box (d) the gap to other boxes

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