CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 675 · 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.✍️ How many declarations (property: value pairs) are in this rule?
   li {
     color: red;
     padding: 8px;
     background-color: yellow;
     border: 2px solid;
   }
2. 2.🧩 Which language makes headings and lists? (a) CSS (b) JavaScript (c) HTML
3. 3.🌈 In #007f00 the green part is the hex number 7f. What is it as a normal number?
4. 4.🧩 Which language rounds box corners? (a) HTML (b) CSS (c) JavaScript
5. 5.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 16px;
     }
   }
6. 6.✍️ Which property is set to 8px in this rule?
   .note {
     width: 300px;
     margin: 10px;
     padding: 8px;
   } (a) padding (b) border (c) font-weight (d) 8px
7. 7.✍️ What is the selector in this CSS rule?
   body {
     width: 300px;
     font-size: 20px;
   } (a) 20px (b) .box (c) body (d) width
8. 8.Which of these does HTML do? (a) lays out the page (b) adds space around boxes (c) gives the page structure (d) reacts to a button click
9. 9.🧩 Which language lays out the page? (a) HTML (b) JavaScript (c) CSS
10. 10.🖌️ Which CSS property colours behind the text? (a) font-family (b) background-color (c) font-weight (d) font-size
11. 11.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 560px;
      justify-content: center;
    }
    Inside are 4 boxes, each 100px wide (no margins).
12. 12.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      text-align: center;
    }
13. 13.✍️ Which property is set to 10px in this rule?
    p {
      margin: 10px;
      font-size: 20px;
    } (a) padding (b) font-weight (c) margin (d) 10px
14. 14.True or false: margin is the text or picture. (a) True (b) False
15. 15.🖌️ What colour are the letters?
    h2 {
      text-align: right;
      color: blue;
      background-color: orange;
      font-size: 32px;
    } (a) orange (b) blue (c) purple
16. 16.🎯 Which CSS selector matches this element?
    <li class="star" id="logo">Hello</li> (a) div (b) #star (c) #logo (d) .logo
17. 17.⚖️ What colour is the text of this element?
    <h2 class="box" id="end">Hi</h2>
    CSS:
    .box { color: red; }
    #end { color: black; } (a) red (b) black (c) white (d) blue
18. 18.🎯 What kind of selector is body? (a) an element selector (b) an id selector (c) a class selector
19. 19.🖌️ What colour are the letters?
    p {
      background-color: white;
      font-size: 28px;
      text-align: left;
      color: blue;
    } (a) green (b) white (c) blue
20. 20.⚖️ What colour is the text of this element?
    <p class="star" id="main">Hi</p>
    CSS:
    #main { color: red; }
    .star { color: white; }
    p { color: blue; } (a) red (b) blue (c) orange (d) white
21. 21.🎯 What kind of selector is .big? (a) a class selector (b) an element selector (c) an id selector
22. 22.📱 What does a media query check? (a) the time of day (b) the page title (c) the screen width (d) the battery level
23. 23.✍️ Which property is set to 2px solid in this rule?
    h2 {
      padding: 8px;
      border: 2px solid;
      background-color: yellow;
    } (a) border (b) width (c) 2px solid (d) font-style
24. 24.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) red (c) blue (d) green
25. 25.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 250px;
      padding: 15px;
      border: 3px solid black;
      margin: 0px;
    }
26. 26.💪 Which flexbox property spaces boxes along a row? (a) justify-content (b) align-items (c) flex-direction (d) gap
27. 27.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    }
28. 28.🎯 Which sign starts an id selector? (a) . (b) & (c) # (d) @
29. 29.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) blue (c) red (d) white
30. 30.Which of these is margin? (a) the gap round content (b) the gap to other boxes (c) the line round the box (d) the text or picture
31. 31.⚖️ What colour is the text of this element?
    <h2 class="red" id="top">Hi</h2>
    CSS:
    .red { color: black; }
    #top { color: yellow; } (a) orange (b) blue (c) yellow (d) black
32. 32.True or false: margin is space inside the border. (a) False (b) True
33. 33.🎯 Which CSS selector matches this element?
    <h2 class="note" id="logo">Hello</h2> (a) .logo (b) #end (c) #note (d) .note
34. 34.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 60px wide (no margins).
35. 35.⚖️ What colour is the text of this element?
    <p class="star" id="logo">Hi</p>
    CSS:
    .star { color: green; }
    .star { color: white; } (a) green (b) blue (c) white (d) red
36. 36.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 120px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 40px wide (no margins).
37. 37.✍️ What is the selector in this CSS rule?
    h2 {
      font-size: 20px;
      border: 2px solid;
    } (a) 2px solid (b) font-size (c) h1 (d) h2
38. 38.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) 800px or narrower (c) 800px or wider (d) turned off
39. 39.What does font-weight do? (a) centres a heading (b) makes the text bold (c) picks the font style (d) sets the letter colour
40. 40.True or false: margin is the gap to other boxes. (a) True (b) False

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