CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 511 · 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 justify-content value puts boxes in the middle? (a) center (b) flex-start (c) flex-end (d) space-between
2. 2.🎯 Which CSS selector matches this element?
   <h1 class="star" id="hero">Hello</h1> (a) .hero (b) #star (c) #top (d) h1
3. 3.📱 The screen is 1366px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 22px;
     }
   } (a) No (b) Yes
4. 4.Which of these is padding? (a) the gap round content (b) the gap to other boxes (c) space outside the border (d) the line round the box
5. 5.🧩 Which language makes a form box? (a) JavaScript (b) CSS (c) HTML
6. 6.⚖️ What colour is the text of this element?
   <h2 class="menu" id="main">Hi</h2>
   CSS:
   #main { color: white; }
   h2 { color: black; }
   .menu { color: yellow; } (a) black (b) yellow (c) white (d) green
7. 7.True or false: HTML gives the page structure. (a) True (b) False
8. 8.🧩 Which language shows a pop-up message? (a) JavaScript (b) HTML (c) CSS
9. 9.What does justify-content: space-between do? (a) puts boxes in the middle (b) packs boxes at the start (c) equal gaps, none at ends (d) packs boxes at the end
10. 10.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    }
11. 11.📦 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: 10px;
      border: 4px solid black;
      margin: 5px;
    }
12. 12.✍️ What is the selector in this CSS rule?
    p {
      font-style: italic;
      text-align: center;
      color: red;
    } (a) font-style (b) center (c) p (d) .note
13. 13.🎨 A CSS file usually ends with which extension? (a) .css (b) .js (c) .html (d) .png
14. 14.🖌️ Where does the text sit on its line?
    li {
      font-size: 40px;
      color: green;
      background-color: blue;
      text-align: right;
    } (a) in the middle (b) on the right (c) on the left
15. 15.🔍 Which is the odd one out? (a) changes the text size (b) gives the page structure (c) puts a picture on a page (d) makes a link
16. 16.Which of these is the content? (a) space outside the border (b) space inside the border (c) the gap to other boxes (d) the text or picture
17. 17.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the title tag (c) the br tag (d) the hr tag
18. 18.True or false: JavaScript makes a form box. (a) False (b) True
19. 19.🖌️ Which CSS property makes the text bold? (a) color (b) text-align (c) font-family (d) font-weight
20. 20.True or false: JavaScript checks a quiz answer. (a) False (b) True
21. 21.True or false: .note is a class selector. (a) False (b) True
22. 22.True or false: JavaScript sets colours and fonts. (a) True (b) False
23. 23.🎯 Which element does the selector .red style? (a) <h1 class="box"> (b) <h1 id="red"> (c) <h1 class="red"> (d) <h2 class="star">
24. 24.What does justify-content: center do? (a) packs boxes at the end (b) packs boxes at the start (c) puts boxes in the middle (d) equal gaps, none at ends
25. 25.🖌️ What colour are the letters?
    li {
      color: orange;
      text-align: center;
      background-color: red;
      font-size: 12px;
    } (a) orange (b) red (c) white
26. 26.🧩 Which language rounds box corners? (a) JavaScript (b) HTML (c) CSS
27. 27.🎯 What kind of selector is #top? (a) a class selector (b) an element selector (c) an id selector
28. 28.True or false: .big is a class selector. (a) True (b) False
29. 29.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 240px;
      padding: 25px;
      border: 1px solid black;
      margin: 10px;
    }
30. 30.🧩 Which language gives the page structure? (a) CSS (b) JavaScript (c) HTML
31. 31.What does font-size do? (a) sets the letter colour (b) makes letters bigger (c) colours behind the text (d) picks the font style
32. 32.Which of these does HTML do? (a) changes the text size (b) shows a pop-up message (c) counts down a timer (d) makes a form box
33. 33.🎯 Which CSS selector matches this element?
    <div class="note" id="intro">Hello</div> (a) #main (b) span (c) .note (d) #note
34. 34.✍️ What is the selector in this CSS rule?
    p {
      text-align: center;
      font-style: italic;
      background-color: yellow;
      margin: 10px;
    } (a) italic (b) p (c) text-align (d) .note
35. 35.🖌️ Which CSS property colours behind the text? (a) background-color (b) font-family (c) font-size (d) font-weight
36. 36.⚖️ What colour is the text of this element?
    <h2 class="red" id="end">Hi</h2>
    CSS:
    h2 { color: red; }
    h2 { color: black; } (a) green (b) black (c) blue (d) red
37. 37.✍️ What is the selector in this CSS rule?
    body {
      width: 300px;
      margin: 10px;
      font-style: italic;
    } (a) .box (b) body (c) 10px (d) width
38. 38.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 20px;
      }
    }
39. 39.Which of these does CSS do? (a) changes the page live (b) checks a quiz answer (c) adds space around boxes (d) reacts to a button click
40. 40.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the shorter one (c) the later one (d) the first one

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