CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 660 · 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 {
     font-size: 20px;
     text-align: center;
     color: red;
     margin: 10px;
   }
2. 2.✍️ In color: blue; which part is the property? (a) blue (b) : (c) ; (d) color
3. 3.🌈 Which colour is #00ff00? (a) magenta (b) yellow (c) cyan (d) bright green
4. 4.⚖️ What colour is the text of this element?
   <p class="menu" id="hero">Hi</p>
   CSS:
   #hero { color: green; }
   p { color: yellow; } (a) black (b) red (c) green (d) yellow
5. 5.What does justify-content: center do? (a) puts boxes in the middle (b) packs boxes at the end (c) packs boxes at the start (d) equal gaps, none at ends
6. 6.⚖️ Which selector is the strongest? (a) an element selector (b) an id selector (c) a class selector
7. 7.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 26px;
     }
   }
8. 8.🎯 Which sign starts a class selector? (a) # (b) & (c) @ (d) .
9. 9.🌈 Which colour is #ffff00? (a) bright green (b) cyan (c) white (d) yellow
10. 10.🖌️ What colour are the letters?
    h2 {
      text-align: center;
      color: yellow;
      font-size: 16px;
      background-color: green;
    } (a) green (b) purple (c) yellow
11. 11.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
12. 12.⚖️ What colour is the text of this element?
    <p class="note" id="end">Hi</p>
    CSS:
    #end { color: yellow; }
    p { color: red; } (a) purple (b) red (c) blue (d) yellow
13. 13.🎨 Which tag connects an outside CSS file? (a) <a> (b) <img> (c) <css> (d) <link>
14. 14.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 180px;
      padding: 5px;
      border: 4px solid black;
      margin: 20px;
    }
15. 15.What does font-family do? (a) picks the font style (b) centres a heading (c) sets the letter colour (d) makes the text bold
16. 16.⚖️ What colour is the text of this element?
    <p class="star" id="intro">Hi</p>
    CSS:
    p { color: purple; }
    #intro { color: black; } (a) purple (b) white (c) green (d) black
17. 17.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 32px;
      }
    }
18. 18.✍️ In color: blue; which part is the value? (a) ; (b) : (c) color (d) blue
19. 19.True or false: #hero is an id selector. (a) False (b) True
20. 20.🧩 Which language gives the page structure? (a) HTML (b) JavaScript (c) CSS
21. 21.🌈 Which colour is #0000ff? (a) blue (b) magenta (c) black (d) bright green
22. 22.Which of these is padding? (a) a solid or dotted edge (b) the text or picture (c) space outside the border (d) space inside the border
23. 23.📱 What does a media query check? (a) the time of day (b) the battery level (c) the page title (d) the screen width
24. 24.What does justify-content: space-between do? (a) packs boxes at the start (b) equal gaps, none at ends (c) packs boxes at the end (d) puts boxes in the middle
25. 25.True or false: CSS changes the text size. (a) True (b) False
26. 26.🌈 Which colour is rgb(255, 0, 255)? (a) magenta (b) black (c) yellow (d) blue
27. 27.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 2 boxes, each 60px wide (no margins).
28. 28.📦 In the box model, which part is space inside the border? (a) padding (b) margin (c) content (d) border
29. 29.What does color do? (a) colours behind the text (b) picks the font style (c) sets the letter colour (d) centres a heading
30. 30.📦 In the box model, which part is the gap round content? (a) padding (b) border (c) content (d) margin
31. 31.True or false: the border is the line round the box. (a) False (b) True
32. 32.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 110px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 40px wide (no margins).
33. 33.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 360px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 100px wide (no margins).
34. 34.✍️ Which property is set to italic in this rule?
    .note {
      font-style: italic;
      background-color: yellow;
    } (a) font-size (b) font-style (c) italic (d) color
35. 35.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 110px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 50px wide (no margins).
36. 36.What does justify-content: flex-start do? (a) packs boxes at the start (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the end
37. 37.🎯 What kind of selector is #top? (a) an element selector (b) an id selector (c) a class selector
38. 38.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 190px;
      padding: 25px;
      border: 1px solid black;
      margin: 5px;
    }
39. 39.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
40. 40.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 22px;
      }
    }

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