CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 465 · 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?
   <div class="red" id="top">Hello</div> (a) .top (b) #intro (c) span (d) .red
2. 2.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
3. 3.True or false: JavaScript checks a quiz answer. (a) False (b) True
4. 4.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 20px;
     }
   }
5. 5.🖌️ What colour are the letters?
   h1 {
     background-color: green;
     font-size: 16px;
     text-align: center;
     color: orange;
   } (a) red (b) orange (c) green
6. 6.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 8px;
     }
   }
7. 7.🎨 Which tag connects an outside CSS file? (a) <link> (b) <a> (c) <img> (d) <css>
8. 8.🎯 Which element does the selector h1 style? (a) <li class="big"> (b) <div id="hero"> (c) <h1 class="big"> (d) <h2>
9. 9.💪 Which justify-content value packs boxes at the end? (a) space-between (b) flex-start (c) flex-end (d) center
10. 10.✍️ What value is given to text-align in this rule?
    .box {
      border: 2px solid;
      background-color: yellow;
      text-align: center;
      font-style: italic;
    } (a) yellow (b) text-align (c) center (d) 10px
11. 11.⚖️ What colour is the text of this element?
    <h1 class="note" id="end">Hi</h1>
    CSS:
    h1 { color: blue; }
    h1 { color: purple; } (a) orange (b) white (c) blue (d) purple
12. 12.🖌️ What colour are the letters?
    h2 {
      background-color: red;
      font-size: 20px;
      color: black;
      text-align: left;
    } (a) red (b) purple (c) black
13. 13.⚖️ What colour is the text of this element?
    <h1 class="red" id="logo">Hi</h1>
    CSS:
    #logo { color: green; }
    .red { color: orange; } (a) orange (b) red (c) blue (d) green
14. 14.🎯 What kind of selector is .big? (a) an id selector (b) a class selector (c) an element selector
15. 15.⚖️ What colour is the text of this element?
    <h1 class="menu" id="hero">Hi</h1>
    CSS:
    h1 { color: green; }
    #hero { color: orange; }
    .menu { color: purple; } (a) green (b) purple (c) black (d) orange
16. 16.🖌️ What colour are the letters?
    h1 {
      background-color: purple;
      color: white;
      text-align: right;
      font-size: 24px;
    } (a) green (b) purple (c) white
17. 17.True or false: h1 is an element selector. (a) False (b) True
18. 18.⚖️ What colour is the text of this element?
    <p class="big" id="end">Hi</p>
    CSS:
    p { color: green; }
    p { color: yellow; } (a) red (b) white (c) yellow (d) green
19. 19.✍️ CSS declarations go inside which brackets? (a) < > (b) { } (c) ( ) (d) [ ]
20. 20.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 8px;
      }
    }
21. 21.✍️ What is the selector in this CSS rule?
    .note {
      text-align: center;
      font-size: 20px;
    } (a) text-align (b) 20px (c) .note (d) #top
22. 22.📱 Responsive design means a page ___. (a) is only for laptops (b) fits every screen (c) has no pictures (d) never changes
23. 23.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 22px;
      }
    }
24. 24.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 28px;
      }
    } (a) No (b) Yes
25. 25.✍️ Which sign ends each CSS declaration? (a) : (b) , (c) . (d) ;
26. 26.🌈 Which hex code is cyan? (a) #ff00ff (b) #00ffff (c) #00ff00 (d) #ffff00
27. 27.True or false: #end is an element selector. (a) False (b) True
28. 28.🖌️ What colour is behind the letters?
    p {
      color: red;
      background-color: purple;
      text-align: center;
      font-size: 32px;
    } (a) black (b) red (c) purple
29. 29.✍️ Which property is set to 10px in this rule?
    .note {
      text-align: center;
      font-size: 20px;
      font-style: italic;
      margin: 10px;
    } (a) 10px (b) font-weight (c) padding (d) margin
30. 30.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) 800px or narrower (c) 800px or wider (d) exactly 100px
31. 31.Which of these does CSS do? (a) lays out the page (b) makes headings and lists (c) checks a quiz answer (d) puts a picture on a page
32. 32.🎯 Which CSS selector matches this element?
    <p class="star" id="hero">Hello</p> (a) #top (b) #star (c) h1 (d) .star
33. 33.✍️ What value is given to font-size in this rule?
    .box {
      font-style: italic;
      font-size: 20px;
      background-color: yellow;
      margin: 10px;
    } (a) font-size (b) center (c) 20px (d) yellow
34. 34.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 22px;
      }
    }
35. 35.Which of these is padding? (a) the gap to other boxes (b) the line round the box (c) the text or picture (d) the gap round content
36. 36.🖌️ How big is the text, in px?
    h1 {
      background-color: green;
      text-align: center;
      font-size: 36px;
      color: white;
    }
37. 37.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    }
38. 38.⚖️ What colour is the text of this element?
    <h1 class="red" id="logo">Hi</h1>
    CSS:
    .red { color: orange; }
    #logo { color: white; } (a) white (b) purple (c) orange (d) yellow
39. 39.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 170px;
      padding: 25px;
      border: 1px solid black;
      margin: 5px;
    }
40. 40.True or false: the content is space inside the border. (a) True (b) False

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