CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 557 · 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.✍️ What is the selector in this CSS rule?
   #top {
     font-size: 20px;
     border: 2px solid;
     color: red;
     padding: 8px;
   } (a) li (b) font-size (c) 2px solid (d) #top
2. 2.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 99 (c) 1000 (d) 255
3. 3.✍️ What is the selector in this CSS rule?
   h1 {
     color: red;
     background-color: yellow;
   } (a) color (b) p (c) yellow (d) h1
4. 4.💪 Which justify-content value packs boxes at the end? (a) center (b) flex-end (c) flex-start (d) space-between
5. 5.✍️ What value is given to font-weight in this rule?
   p {
     font-weight: bold;
     width: 300px;
   } (a) 2px solid (b) bold (c) font-weight (d) 300px
6. 6.✍️ Which sign goes between a property and its value? (a) - (b) = (c) : (d) ;
7. 7.🌈 Hex digits go 0 to 9, then A to which letter? (a) F (b) G (c) J (d) Z
8. 8.✍️ In color: blue; which part is the value? (a) blue (b) ; (c) color (d) :
9. 9.True or false: CSS changes the text size. (a) True (b) False
10. 10.🖌️ What colour are the letters?
    li {
      background-color: yellow;
      font-size: 12px;
      color: orange;
      text-align: center;
    } (a) yellow (b) black (c) orange
11. 11.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 50px;
      padding: 25px;
      border: 4px solid black;
      margin: 10px;
    }
12. 12.💪 Which justify-content value packs boxes at the start? (a) center (b) flex-start (c) flex-end (d) space-between
13. 13.🎯 Which element does the selector p style? (a) <h2 class="menu"> (b) <p class="menu"> (c) <li id="end"> (d) <h1>
14. 14.What does justify-content: center do? (a) packs boxes at the start (b) packs boxes at the end (c) equal gaps, none at ends (d) puts boxes in the middle
15. 15.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 270px;
      justify-content: center;
    }
    Inside are 3 boxes, each 50px wide (no margins).
16. 16.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
17. 17.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 8px;
      }
    }
18. 18.🌈 Which colour is rgb(0, 0, 0)? (a) magenta (b) blue (c) red (d) black
19. 19.True or false: JavaScript reacts to a button click. (a) False (b) True
20. 20.🌈 Which colour is #ff0000? (a) yellow (b) magenta (c) blue (d) red
21. 21.🖌️ What colour are the letters?
    h1 {
      color: yellow;
      font-size: 32px;
      text-align: center;
      background-color: orange;
    } (a) white (b) yellow (c) orange
22. 22.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
23. 23.True or false: padding is space inside the border. (a) False (b) True
24. 24.Which of these is padding? (a) a solid or dotted edge (b) the gap to other boxes (c) space inside the border (d) the line round the box
25. 25.🖌️ Which CSS property makes the text bold? (a) background-color (b) font-weight (c) font-family (d) font-size
26. 26.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) red (c) blue (d) white
27. 27.Which of these is margin? (a) the line round the box (b) space inside the border (c) the gap round content (d) space outside the border
28. 28.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 110px;
      padding: 10px;
      border: 2px solid black;
      margin: 5px;
    }
29. 29.⚖️ What colour is the text of this element?
    <h2 class="note" id="top">Hi</h2>
    CSS:
    h2 { color: blue; }
    #top { color: green; } (a) green (b) black (c) orange (d) blue
30. 30.🖌️ What colour is behind the letters?
    p {
      font-size: 32px;
      text-align: center;
      background-color: blue;
      color: purple;
    } (a) purple (b) orange (c) blue
31. 31.Which of these is the content? (a) the text or picture (b) a solid or dotted edge (c) the line round the box (d) space outside the border
32. 32.⚖️ What colour is the text of this element?
    <p class="star" id="logo">Hi</p>
    CSS:
    p { color: red; }
    #logo { color: white; }
    .star { color: purple; } (a) red (b) white (c) purple (d) blue
33. 33.🌈 Which colour of light is strongest in rgb(1, 67, 176)? (a) red (b) green (c) blue
34. 34.🖌️ Which CSS property makes letters bigger? (a) font-family (b) color (c) font-size (d) font-weight
35. 35.🎯 Which element does the selector #top style? (a) <h1 id="intro"> (b) <h1 id="top"> (c) <h2 class="menu"> (d) <h1 class="top">
36. 36.🖌️ How big is the text, in px?
    h1 {
      color: orange;
      text-align: left;
      font-size: 36px;
      background-color: red;
    }
37. 37.🌈 Which colour of light is strongest in rgb(110, 245, 53)? (a) red (b) green (c) blue
38. 38.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 16px;
      }
    } (a) Yes (b) No
39. 39.🎯 Which sign starts a class selector? (a) @ (b) # (c) & (d) .
40. 40.✍️ What is the selector in this CSS rule?
    li {
      background-color: yellow;
      margin: 10px;
      padding: 8px;
      width: 300px;
    } (a) li (b) 10px (c) body (d) background-color

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