CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 48 · 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.🎯 What kind of selector is .big? (a) a class selector (b) an id selector (c) an element selector
2. 2.🖌️ Where does the text sit on its line?
   h2 {
     background-color: black;
     font-size: 12px;
     text-align: left;
     color: green;
   } (a) in the middle (b) on the left (c) on the right
3. 3.Which of these is padding? (a) space outside the border (b) the text or picture (c) a solid or dotted edge (d) the gap round content
4. 4.🔍 Which is the odd one out? (a) lays out the page (b) sets colours and fonts (c) shows a pop-up message (d) changes the text size
5. 5.What does text-align do? (a) picks the font style (b) colours behind the text (c) sets the letter colour (d) centres a heading
6. 6.True or false: margin is space outside the border. (a) True (b) False
7. 7.🧩 Which language changes the text size? (a) JavaScript (b) CSS (c) HTML
8. 8.💪 Which justify-content value equal gaps, none at ends? (a) space-between (b) center (c) flex-end (d) flex-start
9. 9.True or false: padding is the gap round content. (a) False (b) True
10. 10.Which of these is padding? (a) space outside the border (b) the line round the box (c) the text or picture (d) space inside the border
11. 11.✍️ Which property is set to bold in this rule?
    body {
      font-size: 20px;
      font-style: italic;
      font-weight: bold;
      text-align: center;
    } (a) font-weight (b) bold (c) border (d) width
12. 12.🧩 Which language makes headings and lists? (a) JavaScript (b) CSS (c) HTML
13. 13.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 18px;
      }
    }
14. 14.🖌️ Where does the text sit on its line?
    li {
      text-align: center;
      color: orange;
      background-color: red;
      font-size: 36px;
    } (a) in the middle (b) on the right (c) on the left
15. 15.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      margin: 10px;
      background-color: yellow;
      width: 300px;
    }
16. 16.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the viewport meta tag (c) the br tag (d) the hr tag
17. 17.⚖️ What colour is the text of this element?
    <h1 class="red" id="end">Hi</h1>
    CSS:
    .red { color: blue; }
    #end { color: green; }
    h1 { color: purple; } (a) red (b) green (c) blue (d) purple
18. 18.True or false: HTML makes a form box. (a) True (b) False
19. 19.💪 Which flexbox property picks row or column? (a) align-items (b) display: flex (c) flex-direction (d) justify-content
20. 20.💪 Which flexbox property turns on flexbox? (a) align-items (b) justify-content (c) gap (d) display: flex
21. 21.🎨 Which tag holds CSS inside the head? (a) <css> (b) <body> (c) <style> (d) <script>
22. 22.✍️ Which property is set to 20px in this rule?
    li {
      font-weight: bold;
      margin: 10px;
      font-size: 20px;
    } (a) background-color (b) font-size (c) 20px (d) text-align
23. 23.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 6px;
      }
    }
24. 24.🖌️ What colour are the letters?
    h2 {
      background-color: black;
      text-align: center;
      font-size: 20px;
      color: blue;
    } (a) orange (b) black (c) blue
25. 25.🌈 Which hex code is bright green? (a) #ffff00 (b) #ff0000 (c) #00ff00 (d) #ff00ff
26. 26.📱 Responsive design means a page ___. (a) has no pictures (b) is only for laptops (c) never changes (d) fits every screen
27. 27.🌈 Which colour is rgb(0, 255, 255)? (a) blue (b) yellow (c) cyan (d) magenta
28. 28.🖌️ What colour is behind the letters?
    li {
      font-size: 36px;
      text-align: center;
      background-color: white;
      color: purple;
    } (a) purple (b) green (c) white
29. 29.📦 In the box model, which part is the gap round content? (a) content (b) padding (c) border (d) margin
30. 30.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) exactly 1000px (c) 600px or narrower (d) turned off
31. 31.True or false: CSS gives the page structure. (a) False (b) True
32. 32.✍️ What value is given to width in this rule?
    li {
      border: 2px solid;
      width: 300px;
    } (a) 300px (b) width (c) red (d) italic
33. 33.⚖️ What colour is the text of this element?
    <h2 class="menu" id="main">Hi</h2>
    CSS:
    #main { color: blue; }
    #main { color: yellow; } (a) yellow (b) green (c) white (d) blue
34. 34.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      color: red;
      margin: 10px;
      text-align: center;
    }
35. 35.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 280px;
      padding: 30px;
      border: 4px solid black;
      margin: 10px;
    }
36. 36.True or false: padding is the gap to other boxes. (a) True (b) False
37. 37.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) 800px or narrower (c) exactly 100px (d) turned off
38. 38.🖌️ What colour is behind the letters?
    h1 {
      color: yellow;
      text-align: center;
      font-size: 20px;
      background-color: purple;
    } (a) yellow (b) purple (c) white
39. 39.Which of these does JavaScript do? (a) gives the page structure (b) puts a picture on a page (c) reacts to a button click (d) changes the text size
40. 40.🎯 Which sign starts an id selector? (a) @ (b) & (c) # (d) .

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