CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 838 · 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.📱 The screen is 1366px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 22px;
     }
   } (a) Yes (b) No
2. 2.💪 Which justify-content value packs boxes at the start? (a) center (b) flex-start (c) flex-end (d) space-between
3. 3.🖌️ What colour are the letters?
   p {
     color: black;
     background-color: purple;
     text-align: left;
     font-size: 12px;
   } (a) white (b) black (c) purple
4. 4.What does color do? (a) makes the text bold (b) centres a heading (c) sets the letter colour (d) picks the font style
5. 5.✍️ Which sign ends each CSS declaration? (a) ; (b) . (c) , (d) :
6. 6.True or false: li is an id selector. (a) True (b) False
7. 7.💪 Which flexbox property spaces boxes along a row? (a) gap (b) justify-content (c) display: flex (d) align-items
8. 8.Which of these is the border? (a) the gap round content (b) a solid or dotted edge (c) the text or picture (d) space inside the border
9. 9.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
10. 10.⚖️ What colour is the text of this element?
    <h2 class="big" id="hero">Hi</h2>
    CSS:
    h2 { color: blue; }
    h2 { color: black; } (a) blue (b) yellow (c) black (d) red
11. 11.🎯 What kind of selector is #top? (a) a class selector (b) an element selector (c) an id selector
12. 12.Which of these is padding? (a) the text or picture (b) a solid or dotted edge (c) space inside the border (d) space outside the border
13. 13.✍️ Which sign goes between a property and its value? (a) ; (b) = (c) : (d) -
14. 14.✍️ What is the selector in this CSS rule?
    .note {
      width: 300px;
      font-weight: bold;
      text-align: center;
      background-color: yellow;
    } (a) .note (b) bold (c) #top (d) width
15. 15.True or false: body is an element selector. (a) True (b) False
16. 16.⚖️ What colour is the text of this element?
    <p class="big" id="end">Hi</p>
    CSS:
    .big { color: yellow; }
    p { color: blue; } (a) blue (b) red (c) yellow (d) purple
17. 17.⚖️ What colour is the text of this element?
    <h2 class="big" id="hero">Hi</h2>
    CSS:
    h2 { color: white; }
    h2 { color: yellow; } (a) white (b) black (c) red (d) yellow
18. 18.What does justify-content: flex-start do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the end (d) packs boxes at the start
19. 19.🎨 A CSS file usually ends with which extension? (a) .html (b) .js (c) .png (d) .css
20. 20.🌈 Which colour of light is strongest in rgb(99, 203, 41)? (a) red (b) blue (c) green
21. 21.⚖️ What colour is the text of this element?
    <h2 class="star" id="hero">Hi</h2>
    CSS:
    #hero { color: blue; }
    #hero { color: black; } (a) blue (b) orange (c) black (d) red
22. 22.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) green (c) white (d) blue
23. 23.Which of these is the content? (a) the gap to other boxes (b) a solid or dotted edge (c) the gap round content (d) the text or picture
24. 24.Which of these does HTML do? (a) lays out the page (b) gives the page structure (c) rounds box corners (d) changes the text size
25. 25.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the hr tag (c) the br tag (d) the viewport meta tag
26. 26.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 120px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 50px wide (no margins).
27. 27.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 210px;
      padding: 20px;
      border: 3px solid black;
      margin: 0px;
    }
28. 28.💪 Which justify-content value packs boxes at the end? (a) flex-end (b) flex-start (c) center (d) space-between
29. 29.🌈 Which colour is #00ff00? (a) black (b) yellow (c) bright green (d) magenta
30. 30.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 40px;
      padding: 30px;
      border: 5px solid black;
      margin: 15px;
    }
31. 31.💪 Which flexbox property picks row or column? (a) display: flex (b) align-items (c) gap (d) flex-direction
32. 32.⚖️ What colour is the text of this element?
    <p class="note" id="main">Hi</p>
    CSS:
    .note { color: red; }
    .note { color: yellow; } (a) green (b) white (c) red (d) yellow
33. 33.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 6px;
      }
    }
34. 34.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
35. 35.🖌️ Which CSS property colours behind the text? (a) color (b) text-align (c) background-color (d) font-size
36. 36.🖌️ What colour is behind the letters?
    p {
      background-color: black;
      font-size: 32px;
      text-align: center;
      color: blue;
    } (a) black (b) green (c) blue
37. 37.Which of these does JavaScript do? (a) makes a link (b) changes the text size (c) adds space around boxes (d) changes the page live
38. 38.🖌️ What colour is behind the letters?
    p {
      color: yellow;
      text-align: center;
      font-size: 16px;
      background-color: orange;
    } (a) purple (b) yellow (c) orange
39. 39.🎯 Which element does the selector #top style? (a) <h1 class="menu"> (b) <p class="top"> (c) <p id="intro"> (d) <p id="top">
40. 40.✍️ In color: blue; which part is the property? (a) blue (b) : (c) color (d) ;

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