CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 10 · 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 CSS property colours behind the text? (a) background-color (b) font-family (c) text-align (d) font-size
2. 2.🌈 What is the biggest number one colour can have in rgb()? (a) 1000 (b) 99 (c) 255 (d) 100
3. 3.🎯 Which sign starts an id selector? (a) . (b) & (c) @ (d) #
4. 4.Which of these does HTML do? (a) adds space around boxes (b) changes the page live (c) makes headings and lists (d) rounds box corners
5. 5.🎯 How many elements on a page should have the same id? (a) 1 (b) any number (c) 5 (d) 2
6. 6.🎯 Which element does the selector #main style? (a) <div class="main"> (b) <div id="main"> (c) <span class="red"> (d) <div id="logo">
7. 7.🎨 Which attribute adds CSS inside one tag? (a) alt (b) href (c) src (d) style
8. 8.✍️ What value is given to padding in this rule?
   .box {
     padding: 8px;
     font-size: 20px;
     font-style: italic;
     border: 2px solid;
   } (a) bold (b) 2px solid (c) padding (d) 8px
9. 9.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) center (c) space-between (d) flex-end
10. 10.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      font-weight: bold;
      color: red;
    }
11. 11.✍️ Which sign ends each CSS declaration? (a) : (b) ; (c) , (d) .
12. 12.✍️ What value is given to border in this rule?
    h2 {
      text-align: center;
      border: 2px solid;
      width: 300px;
    } (a) border (b) 300px (c) 2px solid (d) italic
13. 13.🎨 Which tag connects an outside CSS file? (a) <link> (b) <css> (c) <a> (d) <img>
14. 14.🖌️ What colour is behind the letters?
    h2 {
      background-color: orange;
      color: yellow;
      font-size: 24px;
      text-align: left;
    } (a) yellow (b) orange (c) red
15. 15.True or false: img is a class selector. (a) True (b) False
16. 16.🌈 Which colour of light is strongest in rgb(122, 80, 187)? (a) green (b) blue (c) red
17. 17.🎯 Which element does the selector li style? (a) <div> (b) <span class="note"> (c) <li class="note"> (d) <p id="top">
18. 18.🖌️ Which CSS property sets the letter colour? (a) background-color (b) font-weight (c) color (d) font-family
19. 19.True or false: JavaScript changes the page live. (a) False (b) True
20. 20.What does justify-content: flex-end do? (a) packs boxes at the start (b) puts boxes in the middle (c) packs boxes at the end (d) equal gaps, none at ends
21. 21.🎯 What kind of selector is #logo? (a) a class selector (b) an element selector (c) an id selector
22. 22.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 110px;
      padding: 20px;
      border: 3px solid black;
      margin: 5px;
    }
23. 23.⚖️ What colour is the text of this element?
    <h2 class="big" id="intro">Hi</h2>
    CSS:
    .big { color: yellow; }
    #intro { color: black; }
    h2 { color: purple; } (a) black (b) yellow (c) white (d) purple
24. 24.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      color: red;
    }
25. 25.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
26. 26.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 210px;
      padding: 10px;
      border: 1px solid black;
      margin: 5px;
    }
27. 27.What does font-size do? (a) makes the text bold (b) sets the letter colour (c) makes letters bigger (d) centres a heading
28. 28.🎯 What kind of selector is #end? (a) a class selector (b) an element selector (c) an id selector
29. 29.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
30. 30.✍️ What value is given to color in this rule?
    h1 {
      color: red;
      text-align: center;
    } (a) color (b) center (c) red (d) 20px
31. 31.🧩 Which language puts a picture on a page? (a) HTML (b) CSS (c) JavaScript
32. 32.True or false: JavaScript reacts to a button click. (a) False (b) True
33. 33.True or false: body is an element selector. (a) True (b) False
34. 34.✍️ In color: blue; which part is the value? (a) color (b) ; (c) : (d) blue
35. 35.🧩 Which language gives the page structure? (a) JavaScript (b) CSS (c) HTML
36. 36.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) green (c) red (d) black
37. 37.What does color do? (a) picks the font style (b) sets the letter colour (c) centres a heading (d) makes the text bold
38. 38.Which of these does CSS do? (a) rounds box corners (b) puts a picture on a page (c) makes headings and lists (d) gives the page structure
39. 39.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 80px wide (no margins).
40. 40.🌈 Which colour is rgb(0, 0, 0)? (a) yellow (b) black (c) magenta (d) white

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