CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 863 · 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 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 20px;
     }
   } (a) Yes (b) No
2. 2.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 26px;
     }
   }
3. 3.🌈 Which colour is rgb(255, 0, 255)? (a) yellow (b) cyan (c) bright green (d) magenta
4. 4.True or false: #top is an element selector. (a) False (b) True
5. 5.🎯 Which CSS selector matches this element?
   <div class="star" id="top">Hello</div> (a) #intro (b) .menu (c) #star (d) .star
6. 6.🎯 Which CSS selector matches this element?
   <span class="menu" id="end">Hello</span> (a) #hero (b) p (c) span (d) .note
7. 7.True or false: the content is the text or picture. (a) False (b) True
8. 8.🎯 What kind of selector is h1? (a) an id selector (b) a class selector (c) an element selector
9. 9.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 14px;
     }
   }
10. 10.Which of these does HTML do? (a) sets colours and fonts (b) shows a pop-up message (c) makes a form box (d) counts down a timer
11. 11.🎯 Which CSS selector matches this element?
    <h1 class="red" id="hero">Hello</h1> (a) .red (b) #top (c) h2 (d) .box
12. 12.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
13. 13.🌈 Which hex code is black? (a) #ffff00 (b) #000000 (c) #ffffff (d) #ff0000
14. 14.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 70px;
      padding: 5px;
      border: 4px solid black;
      margin: 10px;
    }
15. 15.📱 What does a media query check? (a) the time of day (b) the page title (c) the battery level (d) the screen width
16. 16.🧩 Which language checks a quiz answer? (a) CSS (b) HTML (c) JavaScript
17. 17.💪 Which flexbox property sets space between boxes? (a) flex-direction (b) gap (c) align-items (d) display: flex
18. 18.⚖️ What colour is the text of this element?
    <p class="star" id="end">Hi</p>
    CSS:
    p { color: green; }
    p { color: orange; } (a) green (b) purple (c) white (d) orange
19. 19.True or false: padding is the gap to other boxes. (a) False (b) True
20. 20.✍️ In color: blue; which part is the property? (a) : (b) ; (c) color (d) blue
21. 21.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
22. 22.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 110px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 50px wide (no margins).
23. 23.🖌️ Which CSS property picks the font style? (a) color (b) font-family (c) text-align (d) background-color
24. 24.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      font-size: 20px;
      font-style: italic;
      padding: 8px;
      border: 2px solid;
    }
25. 25.🌈 Which colour is rgb(255, 0, 0)? (a) blue (b) bright green (c) cyan (d) red
26. 26.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }
27. 27.✍️ In color: blue; which part is the value? (a) blue (b) ; (c) color (d) :
28. 28.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 6px;
      }
    } (a) Yes (b) No
29. 29.🌈 Which colour of light is strongest in rgb(46, 21, 167)? (a) blue (b) green (c) red
30. 30.🎨 Which attribute adds CSS inside one tag? (a) alt (b) href (c) style (d) src
31. 31.True or false: padding is the line round the box. (a) False (b) True
32. 32.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 170px;
      padding: 10px;
      border: 2px solid black;
      margin: 0px;
    }
33. 33.🖌️ What colour is behind the letters?
    p {
      background-color: white;
      text-align: left;
      font-size: 12px;
      color: orange;
    } (a) white (b) orange (c) yellow
34. 34.True or false: p is an element selector. (a) False (b) True
35. 35.📦 In the box model, which part is the text or picture? (a) margin (b) padding (c) border (d) content
36. 36.True or false: the border is the line round the box. (a) False (b) True
37. 37.🖌️ What colour is behind the letters?
    h1 {
      font-size: 24px;
      background-color: blue;
      color: red;
      text-align: center;
    } (a) red (b) yellow (c) blue
38. 38.🎯 How many elements on a page should have the same id? (a) 5 (b) 1 (c) 2 (d) any number
39. 39.🖌️ What colour is behind the letters?
    h2 {
      color: blue;
      background-color: green;
      font-size: 24px;
      text-align: center;
    } (a) blue (b) green (c) white
40. 40.🎨 One CSS file can style how many pages? (a) only one image (b) many pages (c) no pages (d) only one word

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