CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 341 · 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 sign ends each CSS declaration? (a) , (b) . (c) ; (d) :
2. 2.What does justify-content: flex-start do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the start (d) packs boxes at the end
3. 3.🎯 Which element does the selector #main style? (a) <p class="box"> (b) <span class="main"> (c) <span id="main"> (d) <span id="logo">
4. 4.🎯 Which element does the selector #top style? (a) <h2 id="intro"> (b) <h2 id="top"> (c) <h2 class="top"> (d) <li class="menu">
5. 5.📱 What does a media query check? (a) the time of day (b) the page title (c) the screen width (d) the battery level
6. 6.✍️ In color: blue; which part is the value? (a) color (b) ; (c) : (d) blue
7. 7.💪 Which flexbox property turns on flexbox? (a) justify-content (b) flex-direction (c) align-items (d) display: flex
8. 8.⚖️ What colour is the text of this element?
   <h2 class="red" id="intro">Hi</h2>
   CSS:
   .red { color: green; }
   h2 { color: red; } (a) green (b) red (c) blue (d) black
9. 9.Which of these is margin? (a) the gap round content (b) the text or picture (c) space inside the border (d) the gap to other boxes
10. 10.🖌️ Which CSS property colours behind the text? (a) background-color (b) font-family (c) font-weight (d) color
11. 11.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 180px;
      padding: 10px;
      border: 3px solid black;
      margin: 15px;
    }
12. 12.🎯 Which element does the selector #end style? (a) <div class="end"> (b) <span class="box"> (c) <div id="end"> (d) <div id="hero">
13. 13.🌈 Which colour of light is strongest in rgb(23, 139, 158)? (a) green (b) blue (c) red
14. 14.🔍 Which is the odd one out? (a) puts a picture on a page (b) adds space around boxes (c) makes headings and lists (d) makes a link
15. 15.🖌️ What colour is behind the letters?
    li {
      text-align: center;
      font-size: 12px;
      background-color: orange;
      color: yellow;
    } (a) white (b) yellow (c) orange
16. 16.📦 In the box model, which part is the gap to other boxes? (a) border (b) padding (c) margin (d) content
17. 17.Which of these does JavaScript do? (a) shows a pop-up message (b) adds space around boxes (c) puts a picture on a page (d) makes headings and lists
18. 18.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) center (c) flex-end (d) flex-start
19. 19.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) exactly 100px (c) 800px or narrower (d) turned off
20. 20.🌈 Which colour of light is strongest in rgb(57, 230, 135)? (a) blue (b) red (c) green
21. 21.🎯 Which element does the selector .note style? (a) <h1 class="red"> (b) <p class="big"> (c) <p id="note"> (d) <p class="note">
22. 22.⚖️ What colour is the text of this element?
    <p class="big" id="end">Hi</p>
    CSS:
    #end { color: green; }
    .big { color: orange; }
    p { color: blue; } (a) orange (b) purple (c) green (d) blue
23. 23.💪 Which flexbox property spaces boxes along a row? (a) justify-content (b) flex-direction (c) gap (d) display: flex
24. 24.🧩 Which language counts down a timer? (a) HTML (b) CSS (c) JavaScript
25. 25.🖌️ Where does the text sit on its line?
    h1 {
      text-align: center;
      font-size: 12px;
      color: green;
      background-color: red;
    } (a) on the left (b) in the middle (c) on the right
26. 26.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) black (c) green (d) red
27. 27.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 60px;
      padding: 10px;
      border: 1px solid black;
      margin: 5px;
    }
28. 28.True or false: CSS makes a link. (a) False (b) True
29. 29.✍️ What is the selector in this CSS rule?
    body {
      color: red;
      text-align: center;
    } (a) center (b) .box (c) body (d) color
30. 30.🎨 A CSS file usually ends with which extension? (a) .js (b) .png (c) .css (d) .html
31. 31.⚖️ What colour is the text of this element?
    <h2 class="note" id="end">Hi</h2>
    CSS:
    h2 { color: yellow; }
    #end { color: red; }
    .note { color: black; } (a) red (b) yellow (c) purple (d) black
32. 32.🔍 Which is the odd one out? (a) puts a picture on a page (b) changes the text size (c) rounds box corners (d) adds space around boxes
33. 33.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 270px;
      padding: 10px;
      border: 1px solid black;
      margin: 5px;
    }
34. 34.🧩 Which language sets colours and fonts? (a) JavaScript (b) HTML (c) CSS
35. 35.🔍 Which is the odd one out? (a) makes a link (b) puts a picture on a page (c) shows a pop-up message (d) gives the page structure
36. 36.True or false: CSS makes headings and lists. (a) True (b) False
37. 37.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
38. 38.🖌️ Where does the text sit on its line?
    p {
      font-size: 32px;
      text-align: left;
      color: purple;
      background-color: green;
    } (a) on the left (b) in the middle (c) on the right
39. 39.💪 Which justify-content value equal gaps, none at ends? (a) flex-end (b) flex-start (c) space-between (d) center
40. 40.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 260px;
      padding: 10px;
      border: 4px solid black;
      margin: 0px;
    }

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