CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 929 · 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 colour is rgb(0, 255, 0)? (a) black (b) bright green (c) white (d) cyan
2. 2.🌈 In #020000 the red part is the hex number 02. What is it as a normal number?
3. 3.📦 In the box model, which part is the gap to other boxes? (a) border (b) margin (c) content (d) padding
4. 4.What does justify-content: center do? (a) packs boxes at the end (b) packs boxes at the start (c) equal gaps, none at ends (d) puts boxes in the middle
5. 5.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 60px;
     padding: 10px;
     border: 4px solid black;
     margin: 10px;
   }
6. 6.🖌️ Which CSS property makes letters bigger? (a) background-color (b) font-family (c) font-size (d) font-weight
7. 7.🌈 Which colour is rgb(255, 255, 0)? (a) white (b) yellow (c) red (d) cyan
8. 8.True or false: .menu is an element selector. (a) False (b) True
9. 9.🖌️ How big is the text, in px?
   h1 {
     background-color: black;
     color: blue;
     text-align: left;
     font-size: 12px;
   }
10. 10.⚖️ What colour is the text of this element?
    <h2 class="box" id="logo">Hi</h2>
    CSS:
    #logo { color: white; }
    #logo { color: red; } (a) yellow (b) purple (c) red (d) white
11. 11.🎨 A CSS file usually ends with which extension? (a) .js (b) .html (c) .css (d) .png
12. 12.🖌️ What colour are the letters?
    li {
      background-color: purple;
      color: black;
      text-align: right;
      font-size: 12px;
    } (a) purple (b) black (c) blue
13. 13.🎯 Which element does the selector li style? (a) <span class="menu"> (b) <div> (c) <li class="menu"> (d) <p id="end">
14. 14.✍️ CSS declarations go inside which brackets? (a) ( ) (b) [ ] (c) { } (d) < >
15. 15.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 230px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 40px wide (no margins).
16. 16.🧩 Which language makes headings and lists? (a) CSS (b) JavaScript (c) HTML
17. 17.🎯 Which element does the selector p style? (a) <h1> (b) <h2 class="big"> (c) <p class="big"> (d) <li id="top">
18. 18.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 160px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 40px wide (no margins).
19. 19.Which of these is margin? (a) a solid or dotted edge (b) the gap round content (c) the gap to other boxes (d) space inside the border
20. 20.🌈 Which colour is rgb(0, 255, 255)? (a) cyan (b) yellow (c) red (d) magenta
21. 21.🌈 In #410000 the red part is the hex number 41. What is it as a normal number?
22. 22.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      color: red;
      padding: 8px;
      border: 2px solid;
      text-align: center;
    }
23. 23.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the later one (c) the shorter one (d) neither
24. 24.💪 Which justify-content value packs boxes at the end? (a) center (b) flex-start (c) flex-end (d) space-between
25. 25.⚖️ What colour is the text of this element?
    <h2 class="note" id="end">Hi</h2>
    CSS:
    #end { color: white; }
    h2 { color: black; } (a) black (b) blue (c) red (d) white
26. 26.🧩 Which language shows a pop-up message? (a) HTML (b) CSS (c) JavaScript
27. 27.⚖️ What colour is the text of this element?
    <h1 class="box" id="intro">Hi</h1>
    CSS:
    #intro { color: black; }
    .box { color: purple; } (a) black (b) green (c) purple (d) white
28. 28.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
29. 29.🔍 Which is the odd one out? (a) rounds box corners (b) reacts to a button click (c) adds space around boxes (d) sets colours and fonts
30. 30.⚖️ What colour is the text of this element?
    <h2 class="note" id="end">Hi</h2>
    CSS:
    #end { color: purple; }
    h2 { color: black; }
    .note { color: blue; } (a) blue (b) red (c) purple (d) black
31. 31.🌈 Hex digits go 0 to 9, then A to which letter? (a) F (b) G (c) J (d) Z
32. 32.🎯 Which element does the selector #intro style? (a) <li class="intro"> (b) <div class="red"> (c) <li id="main"> (d) <li id="intro">
33. 33.🎯 What kind of selector is #main? (a) a class selector (b) an id selector (c) an element selector
34. 34.🎯 Which sign starts an id selector? (a) & (b) # (c) . (d) @
35. 35.⚖️ What colour is the text of this element?
    <h1 class="note" id="main">Hi</h1>
    CSS:
    #main { color: blue; }
    .note { color: black; } (a) blue (b) black (c) white (d) yellow
36. 36.True or false: HTML sets colours and fonts. (a) False (b) True
37. 37.🎯 Which CSS selector matches this element?
    <span class="box" id="main">Hello</span> (a) #logo (b) p (c) .star (d) span
38. 38.🖌️ Which CSS property picks the font style? (a) font-family (b) font-weight (c) text-align (d) color
39. 39.⚖️ What colour is the text of this element?
    <p class="red" id="hero">Hi</p>
    CSS:
    #hero { color: white; }
    p { color: yellow; } (a) yellow (b) black (c) blue (d) white
40. 40.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 400px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 80px wide (no margins).

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