CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 210 · 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 of these does CSS do? (a) makes a form box (b) counts down a timer (c) shows a pop-up message (d) changes the text size
2. 2.✍️ Which sign ends each CSS declaration? (a) , (b) . (c) ; (d) :
3. 3.🖌️ What colour are the letters?
   li {
     text-align: left;
     background-color: orange;
     font-size: 20px;
     color: black;
   } (a) black (b) orange (c) yellow
4. 4.🎯 Which CSS selector matches this element?
   <h2 class="big" id="main">Hello</h2> (a) .red (b) .main (c) .big (d) #big
5. 5.🔍 Which is the odd one out? (a) sets colours and fonts (b) shows a pop-up message (c) counts down a timer (d) checks a quiz answer
6. 6.Which of these is padding? (a) a solid or dotted edge (b) space inside the border (c) space outside the border (d) the gap to other boxes
7. 7.🌈 Which colour of light is strongest in rgb(117, 71, 220)? (a) blue (b) red (c) green
8. 8.🎯 What kind of selector is #top? (a) an id selector (b) an element selector (c) a class selector
9. 9.💪 Which justify-content value puts boxes in the middle? (a) center (b) flex-start (c) space-between (d) flex-end
10. 10.✍️ What is the selector in this CSS rule?
    body {
      width: 300px;
      padding: 8px;
      font-style: italic;
    } (a) .box (b) 8px (c) width (d) body
11. 11.✍️ What is the selector in this CSS rule?
    #top {
      color: red;
      text-align: center;
      font-size: 20px;
      background-color: yellow;
    } (a) color (b) li (c) center (d) #top
12. 12.🔍 Which is the odd one out? (a) puts a picture on a page (b) checks a quiz answer (c) makes headings and lists (d) makes a form box
13. 13.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
14. 14.🧩 Which language rounds box corners? (a) JavaScript (b) CSS (c) HTML
15. 15.True or false: #end is a class selector. (a) True (b) False
16. 16.✍️ What value is given to margin in this rule?
    h2 {
      font-size: 20px;
      margin: 10px;
    } (a) margin (b) 8px (c) 10px (d) bold
17. 17.Which of these does JavaScript do? (a) puts a picture on a page (b) lays out the page (c) reacts to a button click (d) rounds box corners
18. 18.🎯 What kind of selector is body? (a) a class selector (b) an element selector (c) an id selector
19. 19.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 2 boxes, each 40px wide (no margins).
20. 20.🖌️ Which CSS property makes the text bold? (a) font-family (b) text-align (c) font-weight (d) background-color
21. 21.🎯 How many elements on a page should have the same id? (a) 2 (b) 1 (c) 5 (d) any number
22. 22.Which of these does HTML do? (a) adds space around boxes (b) counts down a timer (c) checks a quiz answer (d) gives the page structure
23. 23.🎯 Which CSS selector matches this element?
    <p class="box" id="logo">Hello</p> (a) #logo (b) .logo (c) #end (d) #box
24. 24.🖌️ How big is the text, in px?
    p {
      background-color: black;
      font-size: 24px;
      text-align: right;
      color: green;
    }
25. 25.🎯 What kind of selector is #hero? (a) a class selector (b) an element selector (c) an id selector
26. 26.✍️ What value is given to text-align in this rule?
    .box {
      border: 2px solid;
      text-align: center;
      background-color: yellow;
    } (a) 10px (b) text-align (c) yellow (d) center
27. 27.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 18px;
      }
    }
28. 28.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
29. 29.🧩 Which language makes a link? (a) HTML (b) CSS (c) JavaScript
30. 30.🎯 What kind of selector is .note? (a) a class selector (b) an id selector (c) an element selector
31. 31.💪 Which justify-content value packs boxes at the end? (a) space-between (b) center (c) flex-end (d) flex-start
32. 32.🌈 Which colour is #0000ff? (a) bright green (b) red (c) cyan (d) blue
33. 33.🖌️ How big is the text, in px?
    h2 {
      text-align: left;
      background-color: orange;
      font-size: 24px;
      color: black;
    }
34. 34.⚖️ What colour is the text of this element?
    <h2 class="red" id="top">Hi</h2>
    CSS:
    .red { color: purple; }
    .red { color: yellow; } (a) purple (b) white (c) yellow (d) green
35. 35.Which of these is the border? (a) the text or picture (b) the gap to other boxes (c) the gap round content (d) the line round the box
36. 36.🖌️ Where does the text sit on its line?
    p {
      color: black;
      text-align: right;
      font-size: 40px;
      background-color: yellow;
    } (a) in the middle (b) on the left (c) on the right
37. 37.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 180px;
      padding: 20px;
      border: 4px solid black;
      margin: 0px;
    }
38. 38.True or false: HTML makes a link. (a) True (b) False
39. 39.🎯 Which sign starts a class selector? (a) & (b) . (c) @ (d) #
40. 40.What does font-size do? (a) makes letters bigger (b) colours behind the text (c) picks the font style (d) centres a heading

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