CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 818 · 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.True or false: .card is an element selector. (a) True (b) False
2. 2.⚖️ What colour is the text of this element?
   <h2 class="note" id="intro">Hi</h2>
   CSS:
   .note { color: blue; }
   .note { color: purple; } (a) blue (b) white (c) red (d) purple
3. 3.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 200px;
     padding: 10px;
     border: 2px solid black;
     margin: 5px;
   }
4. 4.💪 Which justify-content value equal gaps, none at ends? (a) space-between (b) center (c) flex-start (d) flex-end
5. 5.🖌️ Which CSS property sets the letter colour? (a) font-family (b) font-weight (c) background-color (d) color
6. 6.🎯 Which CSS selector matches this element?
   <li class="big" id="top">Hello</li> (a) #big (b) div (c) .big (d) .red
7. 7.🌈 Which colour of light is strongest in rgb(208, 87, 116)? (a) blue (b) green (c) red
8. 8.🖌️ How big is the text, in px?
   h2 {
     background-color: blue;
     font-size: 36px;
     color: orange;
     text-align: center;
   }
9. 9.🌈 Which colour of light is strongest in rgb(207, 98, 66)? (a) red (b) blue (c) green
10. 10.📱 Responsive design means a page ___. (a) is only for laptops (b) has no pictures (c) fits every screen (d) never changes
11. 11.🌈 Which colour is #ff0000? (a) yellow (b) red (c) black (d) magenta
12. 12.💪 Which justify-content value packs boxes at the end? (a) flex-start (b) space-between (c) center (d) flex-end
13. 13.✍️ In color: blue; which part is the value? (a) blue (b) color (c) : (d) ;
14. 14.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 140px;
      padding: 10px;
      border: 5px solid black;
      margin: 20px;
    }
15. 15.Which of these does CSS do? (a) shows a pop-up message (b) gives the page structure (c) adds space around boxes (d) makes a form box
16. 16.🖌️ Where does the text sit on its line?
    h2 {
      font-size: 28px;
      text-align: center;
      background-color: green;
      color: blue;
    } (a) in the middle (b) on the right (c) on the left
17. 17.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 16px;
      }
    }
18. 18.💪 Which flexbox property sets space between boxes? (a) display: flex (b) justify-content (c) gap (d) align-items
19. 19.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) flex-start (c) space-between (d) center
20. 20.📦 In the box model, which part is space outside the border? (a) margin (b) padding (c) border (d) content
21. 21.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 120px;
      padding: 25px;
      border: 2px solid black;
      margin: 0px;
    }
22. 22.🖌️ How big is the text, in px?
    li {
      text-align: left;
      background-color: red;
      color: blue;
      font-size: 24px;
    }
23. 23.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 240px;
      padding: 10px;
      border: 5px solid black;
      margin: 15px;
    }
24. 24.✍️ Which sign ends each CSS declaration? (a) : (b) . (c) , (d) ;
25. 25.🧩 Which language makes headings and lists? (a) HTML (b) JavaScript (c) CSS
26. 26.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 28px;
      }
    }
27. 27.True or false: padding is space inside the border. (a) False (b) True
28. 28.🎯 Which element does the selector .star style? (a) <span class="star"> (b) <span class="menu"> (c) <p class="note"> (d) <span id="star">
29. 29.✍️ Which sign goes between a property and its value? (a) : (b) = (c) - (d) ;
30. 30.⚖️ What colour is the text of this element?
    <p class="menu" id="top">Hi</p>
    CSS:
    #top { color: orange; }
    p { color: purple; }
    .menu { color: yellow; } (a) purple (b) black (c) orange (d) yellow
31. 31.✍️ Which property is set to 20px in this rule?
    h1 {
      padding: 8px;
      font-size: 20px;
    } (a) 20px (b) background-color (c) text-align (d) font-size
32. 32.🌈 Which hex code is bright green? (a) #000000 (b) #ff00ff (c) #ff0000 (d) #00ff00
33. 33.🌈 Which colour is rgb(0, 0, 0)? (a) red (b) magenta (c) cyan (d) black
34. 34.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 90px;
      padding: 5px;
      border: 3px solid black;
      margin: 5px;
    }
35. 35.🖌️ Which CSS property makes letters bigger? (a) background-color (b) font-weight (c) font-size (d) text-align
36. 36.True or false: the content is the text or picture. (a) True (b) False
37. 37.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
38. 38.True or false: margin is the gap to other boxes. (a) False (b) True
39. 39.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 120px;
      padding: 25px;
      border: 3px solid black;
      margin: 0px;
    }
40. 40.🌈 Which hex code is white? (a) #ff00ff (b) #ff0000 (c) #ffffff (d) #00ffff

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