CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 934 · 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 element does the selector p style? (a) <li id="hero"> (b) <h1> (c) <p class="star"> (d) <h2 class="star">
2. 2.🌈 Which colour is #000000? (a) bright green (b) magenta (c) yellow (d) black
3. 3.💪 Which flexbox property sets space between boxes? (a) display: flex (b) flex-direction (c) align-items (d) gap
4. 4.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 170px;
     justify-content: space-between;
   }
   Inside are 2 boxes, each 80px wide (no margins).
5. 5.True or false: li is a class selector. (a) False (b) True
6. 6.True or false: padding is the gap round content. (a) True (b) False
7. 7.🎯 What kind of selector is img? (a) a class selector (b) an id selector (c) an element selector
8. 8.🖌️ Which CSS property centres a heading? (a) text-align (b) font-family (c) font-size (d) color
9. 9.✍️ How many declarations (property: value pairs) are in this rule?
   body {
     color: red;
   }
10. 10.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 300px;
      justify-content: center;
    }
    Inside are 4 boxes, each 50px wide (no margins).
11. 11.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 140px;
      justify-content: center;
    }
    Inside are 3 boxes, each 40px wide (no margins).
12. 12.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      font-size: 20px;
      margin: 10px;
    }
13. 13.True or false: margin is the gap to other boxes. (a) False (b) True
14. 14.Which of these is the content? (a) space outside the border (b) the gap to other boxes (c) the text or picture (d) space inside the border
15. 15.🌈 Which colour is #0000ff? (a) black (b) red (c) blue (d) white
16. 16.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 16px;
      }
    } (a) No (b) Yes
17. 17.⚖️ What colour is the text of this element?
    <h1 class="star" id="main">Hi</h1>
    CSS:
    h1 { color: black; }
    #main { color: purple; }
    .star { color: orange; } (a) black (b) blue (c) purple (d) orange
18. 18.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 8px;
      }
    }
19. 19.🔍 Which is the odd one out? (a) sets colours and fonts (b) adds space around boxes (c) gives the page structure (d) changes the text size
20. 20.🖌️ What colour is behind the letters?
    p {
      color: black;
      text-align: right;
      background-color: red;
      font-size: 36px;
    } (a) yellow (b) black (c) red
21. 21.🎯 What kind of selector is #top? (a) an id selector (b) an element selector (c) a class selector
22. 22.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 410px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 100px wide (no margins).
23. 23.🖌️ Which CSS property picks the font style? (a) text-align (b) font-weight (c) color (d) font-family
24. 24.📦 In the box model, which part is the line round the box? (a) content (b) border (c) margin (d) padding
25. 25.✍️ What value is given to width in this rule?
    li {
      text-align: center;
      background-color: yellow;
      color: red;
      width: 300px;
    } (a) italic (b) 300px (c) width (d) red
26. 26.True or false: JavaScript lays out the page. (a) False (b) True
27. 27.✍️ What value is given to width in this rule?
    .note {
      padding: 8px;
      width: 300px;
      text-align: center;
      font-size: 20px;
    } (a) width (b) 300px (c) italic (d) red
28. 28.True or false: img is an id selector. (a) True (b) False
29. 29.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      text-align: center;
      padding: 8px;
      font-style: italic;
    }
30. 30.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 440px;
      justify-content: center;
    }
    Inside are 4 boxes, each 100px wide (no margins).
31. 31.Which of these is margin? (a) the line round the box (b) the text or picture (c) the gap to other boxes (d) space inside the border
32. 32.What does text-align do? (a) makes the text bold (b) colours behind the text (c) centres a heading (d) makes letters bigger
33. 33.🎯 What kind of selector is #hero? (a) an id selector (b) an element selector (c) a class selector
34. 34.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) center (c) space-between (d) flex-end
35. 35.✍️ Which sign ends each CSS declaration? (a) : (b) . (c) ; (d) ,
36. 36.⚖️ Which selector is the weakest? (a) an id selector (b) an element selector (c) a class selector
37. 37.🌈 Which colour is rgb(0, 255, 255)? (a) white (b) yellow (c) bright green (d) cyan
38. 38.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 16px;
      }
    }
39. 39.What does justify-content: space-between do? (a) puts boxes in the middle (b) packs boxes at the start (c) packs boxes at the end (d) equal gaps, none at ends
40. 40.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) the shorter one (c) neither (d) the first one

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