CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 348 · 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 element does the selector li style? (a) <div> (b) <li class="big"> (c) <span class="big"> (d) <p id="intro">
2. 2.Which of these does CSS do? (a) counts down a timer (b) makes a form box (c) sets colours and fonts (d) puts a picture on a page
3. 3.🖌️ What colour are the letters?
   li {
     color: red;
     font-size: 40px;
     text-align: left;
     background-color: black;
   } (a) red (b) green (c) black
4. 4.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
5. 5.🧩 Which language adds space around boxes? (a) JavaScript (b) CSS (c) HTML
6. 6.🧩 Which language gives the page structure? (a) HTML (b) CSS (c) JavaScript
7. 7.✍️ What is the selector in this CSS rule?
   h2 {
     font-weight: bold;
     text-align: center;
   } (a) h1 (b) h2 (c) center (d) font-weight
8. 8.True or false: padding is the gap to other boxes. (a) False (b) True
9. 9.Which of these is the content? (a) space inside the border (b) the gap to other boxes (c) the text or picture (d) the gap round content
10. 10.🌈 Which colour is #00ffff? (a) blue (b) yellow (c) bright green (d) cyan
11. 11.🖌️ What colour are the letters?
    p {
      background-color: white;
      font-size: 24px;
      text-align: left;
      color: red;
    } (a) red (b) yellow (c) white
12. 12.🎯 Which element does the selector li style? (a) <div> (b) <span class="note"> (c) <li class="note"> (d) <p id="main">
13. 13.Which of these does HTML do? (a) sets colours and fonts (b) shows a pop-up message (c) gives the page structure (d) reacts to a button click
14. 14.💪 Which flexbox property lines boxes up across? (a) align-items (b) justify-content (c) flex-direction (d) gap
15. 15.🌈 Which colour is #ff00ff? (a) magenta (b) white (c) yellow (d) bright green
16. 16.🎨 Which tag holds CSS inside the head? (a) <body> (b) <style> (c) <css> (d) <script>
17. 17.⚖️ What colour is the text of this element?
    <h1 class="star" id="intro">Hi</h1>
    CSS:
    .star { color: red; }
    .star { color: orange; } (a) purple (b) black (c) orange (d) red
18. 18.🖌️ Where does the text sit on its line?
    li {
      text-align: right;
      color: white;
      font-size: 12px;
      background-color: yellow;
    } (a) in the middle (b) on the right (c) on the left
19. 19.Which of these does CSS do? (a) changes the page live (b) gives the page structure (c) shows a pop-up message (d) rounds box corners
20. 20.✍️ CSS declarations go inside which brackets? (a) < > (b) [ ] (c) { } (d) ( )
21. 21.🧩 Which language reacts to a button click? (a) HTML (b) JavaScript (c) CSS
22. 22.True or false: p is an element selector. (a) False (b) True
23. 23.📦 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: 30px;
      border: 4px solid black;
      margin: 20px;
    }
24. 24.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 250px;
      padding: 15px;
      border: 2px solid black;
      margin: 0px;
    }
25. 25.🌈 Which colour of light is strongest in rgb(178, 69, 100)? (a) blue (b) red (c) green
26. 26.Which of these does CSS do? (a) puts a picture on a page (b) lays out the page (c) makes a form box (d) reacts to a button click
27. 27.📦 In the box model, which part is the gap to other boxes? (a) border (b) content (c) padding (d) margin
28. 28.🎨 A CSS file usually ends with which extension? (a) .html (b) .js (c) .png (d) .css
29. 29.🖌️ What colour is behind the letters?
    li {
      background-color: yellow;
      font-size: 16px;
      color: green;
      text-align: left;
    } (a) purple (b) green (c) yellow
30. 30.🧩 Which language makes headings and lists? (a) JavaScript (b) HTML (c) CSS
31. 31.💪 Which justify-content value equal gaps, none at ends? (a) center (b) flex-start (c) flex-end (d) space-between
32. 32.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      margin: 10px;
      text-align: center;
      font-style: italic;
      border: 2px solid;
    }
33. 33.🔍 Which is the odd one out? (a) sets colours and fonts (b) adds space around boxes (c) lays out the page (d) shows a pop-up message
34. 34.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 60px;
      padding: 5px;
      border: 1px solid black;
      margin: 15px;
    }
35. 35.⚖️ What colour is the text of this element?
    <h2 class="box" id="intro">Hi</h2>
    CSS:
    h2 { color: yellow; }
    h2 { color: red; } (a) white (b) red (c) purple (d) yellow
36. 36.🖌️ Where does the text sit on its line?
    li {
      color: blue;
      text-align: right;
      font-size: 20px;
      background-color: green;
    } (a) in the middle (b) on the right (c) on the left
37. 37.🖌️ Where does the text sit on its line?
    li {
      color: white;
      text-align: right;
      background-color: orange;
      font-size: 40px;
    } (a) in the middle (b) on the left (c) on the right
38. 38.🌈 Which colour is #ffff00? (a) bright green (b) magenta (c) yellow (d) white
39. 39.🖌️ What colour is behind the letters?
    h1 {
      font-size: 40px;
      color: blue;
      background-color: white;
      text-align: right;
    } (a) blue (b) white (c) red
40. 40.Which of these is margin? (a) space inside the border (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