CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 218 · 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 is the odd one out? (a) changes the text size (b) reacts to a button click (c) lays out the page (d) adds space around boxes
2. 2.True or false: margin is a solid or dotted edge. (a) True (b) False
3. 3.🎯 Which CSS selector matches this element?
   <li class="menu" id="hero">Hello</li> (a) div (b) .hero (c) .note (d) .menu
4. 4.⚖️ What colour is the text of this element?
   <h1 class="box" id="hero">Hi</h1>
   CSS:
   h1 { color: green; }
   h1 { color: orange; } (a) green (b) purple (c) orange (d) white
5. 5.🔍 Which is the odd one out? (a) counts down a timer (b) changes the page live (c) checks a quiz answer (d) puts a picture on a page
6. 6.✍️ In color: blue; which part is the property? (a) blue (b) : (c) ; (d) color
7. 7.🎯 Which element does the selector #top style? (a) <h1 id="intro"> (b) <h1 class="top"> (c) <h2 class="menu"> (d) <h1 id="top">
8. 8.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) blue (c) green (d) white
9. 9.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 180px;
     padding: 10px;
     border: 3px solid black;
     margin: 5px;
   }
10. 10.🖌️ What colour is behind the letters?
    h2 {
      font-size: 24px;
      color: purple;
      text-align: left;
      background-color: black;
    } (a) black (b) red (c) purple
11. 11.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the title tag (c) the viewport meta tag (d) the br tag
12. 12.True or false: #hero is an id selector. (a) True (b) False
13. 13.Which of these does CSS do? (a) makes headings and lists (b) changes the page live (c) counts down a timer (d) lays out the page
14. 14.⚖️ What colour is the text of this element?
    <h2 class="menu" id="logo">Hi</h2>
    CSS:
    .menu { color: white; }
    .menu { color: blue; } (a) blue (b) black (c) orange (d) white
15. 15.✍️ CSS declarations go inside which brackets? (a) { } (b) [ ] (c) ( ) (d) < >
16. 16.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      width: 300px;
      text-align: center;
      font-size: 20px;
      font-style: italic;
    }
17. 17.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 4 (c) 3 (d) 2
18. 18.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) the first one (c) the shorter one (d) neither
19. 19.🌈 Which hex code is black? (a) #ffffff (b) #000000 (c) #00ffff (d) #ff00ff
20. 20.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) center (c) flex-end (d) space-between
21. 21.🖌️ What colour are the letters?
    p {
      text-align: right;
      background-color: black;
      color: red;
      font-size: 20px;
    } (a) red (b) yellow (c) black
22. 22.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) 800px or narrower (c) turned off (d) exactly 100px
23. 23.✍️ What is the selector in this CSS rule?
    .note {
      font-size: 20px;
      font-weight: bold;
    } (a) bold (b) font-size (c) .note (d) #top
24. 24.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 24px;
      }
    }
25. 25.💪 Which flexbox property turns on flexbox? (a) justify-content (b) flex-direction (c) gap (d) display: flex
26. 26.True or false: CSS gives the page structure. (a) True (b) False
27. 27.Which of these is margin? (a) the gap to other boxes (b) the line round the box (c) the text or picture (d) space inside the border
28. 28.💪 Which justify-content value packs boxes at the start? (a) center (b) space-between (c) flex-start (d) flex-end
29. 29.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      font-style: italic;
      font-weight: bold;
      margin: 10px;
    }
30. 30.⚖️ What colour is the text of this element?
    <p class="big" id="top">Hi</p>
    CSS:
    p { color: black; }
    .big { color: orange; } (a) black (b) orange (c) green (d) white
31. 31.✍️ What value is given to font-size in this rule?
    .box {
      text-align: center;
      font-size: 20px;
    } (a) 20px (b) center (c) yellow (d) font-size
32. 32.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
33. 33.🎯 Which sign starts a class selector? (a) @ (b) & (c) . (d) #
34. 34.🎨 Which attribute adds CSS inside one tag? (a) style (b) alt (c) href (d) src
35. 35.📦 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: 25px;
      border: 2px solid black;
      margin: 0px;
    }
36. 36.Which of these does CSS do? (a) adds space around boxes (b) gives the page structure (c) checks a quiz answer (d) counts down a timer
37. 37.What does text-align do? (a) makes letters bigger (b) colours behind the text (c) sets the letter colour (d) centres a heading
38. 38.🖌️ Which CSS property picks the font style? (a) font-family (b) background-color (c) color (d) font-size
39. 39.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: center;
    }
    Inside are 3 boxes, each 40px wide (no margins).
40. 40.🎯 What kind of selector is .big? (a) a class selector (b) an element selector (c) an id selector

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