CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 787 · 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 CSS selector matches this element?
   <p class="big" id="top">Hello</p> (a) .top (b) #intro (c) p (d) h1
2. 2.📱 The screen is 820px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 24px;
     }
   } (a) Yes (b) No
3. 3.🌈 Which colour is rgb(255, 0, 255)? (a) black (b) bright green (c) cyan (d) magenta
4. 4.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 220px;
     padding: 5px;
     border: 2px solid black;
     margin: 10px;
   }
5. 5.🎨 Which attribute adds CSS inside one tag? (a) src (b) href (c) alt (d) style
6. 6.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 100px;
     padding: 10px;
     border: 1px solid black;
     margin: 5px;
   }
7. 7.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 26px;
     }
   }
8. 8.🖌️ Where does the text sit on its line?
   li {
     font-size: 36px;
     background-color: red;
     color: green;
     text-align: left;
   } (a) on the left (b) on the right (c) in the middle
9. 9.True or false: the border is a solid or dotted edge. (a) False (b) True
10. 10.🎯 Which element does the selector span style? (a) <span class="red"> (b) <h2 id="main"> (c) <p> (d) <h1 class="red">
11. 11.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
12. 12.🎯 Which CSS selector matches this element?
    <p class="red" id="hero">Hello</p> (a) #hero (b) #top (c) h1 (d) #red
13. 13.⚖️ Which selector is the strongest? (a) an element selector (b) an id selector (c) a class selector
14. 14.✍️ Which sign ends each CSS declaration? (a) . (b) , (c) ; (d) :
15. 15.⚖️ What colour is the text of this element?
    <h1 class="red" id="main">Hi</h1>
    CSS:
    .red { color: purple; }
    #main { color: green; }
    h1 { color: white; } (a) orange (b) purple (c) green (d) white
16. 16.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 70px;
      padding: 15px;
      border: 5px solid black;
      margin: 5px;
    }
17. 17.✍️ How does a CSS comment start? (a) <!-- (b) // (c) /* (d) #
18. 18.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 32px;
      }
    }
19. 19.🎯 Which element does the selector .menu style? (a) <h1 class="menu"> (b) <h1 class="note"> (c) <h2 class="big"> (d) <h1 id="menu">
20. 20.Which of these does JavaScript do? (a) puts a picture on a page (b) shows a pop-up message (c) rounds box corners (d) changes the text size
21. 21.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 90px;
      padding: 10px;
      border: 3px solid black;
      margin: 20px;
    }
22. 22.Which of these does CSS do? (a) sets colours and fonts (b) checks a quiz answer (c) makes headings and lists (d) shows a pop-up message
23. 23.⚖️ What colour is the text of this element?
    <h1 class="menu" id="end">Hi</h1>
    CSS:
    #end { color: orange; }
    h1 { color: black; }
    .menu { color: white; } (a) black (b) white (c) orange (d) green
24. 24.🌈 Which colour is #00ffff? (a) magenta (b) cyan (c) black (d) blue
25. 25.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 8px;
      }
    } (a) Yes (b) No
26. 26.⚖️ What colour is the text of this element?
    <p class="menu" id="hero">Hi</p>
    CSS:
    p { color: black; }
    p { color: red; } (a) white (b) black (c) blue (d) red
27. 27.🖌️ Where does the text sit on its line?
    h1 {
      font-size: 28px;
      background-color: blue;
      color: green;
      text-align: center;
    } (a) on the left (b) on the right (c) in the middle
28. 28.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) blue (c) green (d) red
29. 29.⚖️ What colour is the text of this element?
    <h1 class="big" id="intro">Hi</h1>
    CSS:
    .big { color: blue; }
    h1 { color: white; } (a) white (b) blue (c) yellow (d) purple
30. 30.🖌️ Which CSS property sets the letter colour? (a) color (b) font-family (c) background-color (d) font-weight
31. 31.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      font-size: 20px;
      font-weight: bold;
      background-color: yellow;
    }
32. 32.📦 In the box model, which part is the gap round content? (a) content (b) margin (c) border (d) padding
33. 33.✍️ Which property is set to 20px in this rule?
    p {
      background-color: yellow;
      border: 2px solid;
      font-weight: bold;
      font-size: 20px;
    } (a) background-color (b) text-align (c) font-size (d) 20px
34. 34.True or false: li is an element selector. (a) False (b) True
35. 35.🌈 Which colour is #00ff00? (a) magenta (b) yellow (c) blue (d) bright green
36. 36.🎯 Which CSS selector matches this element?
    <h2 class="note" id="end">Hello</h2> (a) li (b) #note (c) #hero (d) h2
37. 37.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) flex-end (c) center (d) space-between
38. 38.⚖️ What colour is the text of this element?
    <h2 class="star" id="end">Hi</h2>
    CSS:
    h2 { color: purple; }
    h2 { color: white; } (a) orange (b) white (c) purple (d) yellow
39. 39.🌈 Which colour of light is strongest in rgb(244, 67, 94)? (a) red (b) blue (c) green
40. 40.What does font-weight do? (a) makes letters bigger (b) makes the text bold (c) sets the letter colour (d) colours behind the text

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