CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 532 · 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 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 26px;
     }
   }
2. 2.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 18px;
     }
   }
3. 3.✍️ What is the selector in this CSS rule?
   body {
     margin: 10px;
     border: 2px solid;
     color: red;
     font-size: 20px;
   } (a) margin (b) body (c) .box (d) 2px solid
4. 4.💪 Which flexbox property picks row or column? (a) gap (b) display: flex (c) align-items (d) flex-direction
5. 5.💪 Which flexbox property lines boxes up across? (a) display: flex (b) flex-direction (c) justify-content (d) align-items
6. 6.🎯 Which element does the selector #top style? (a) <p class="star"> (b) <span id="intro"> (c) <span id="top"> (d) <span class="top">
7. 7.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the shorter one (c) the later one (d) neither
8. 8.🌈 What is the biggest number one colour can have in rgb()? (a) 255 (b) 1000 (c) 99 (d) 100
9. 9.🔍 Which is the odd one out? (a) makes a form box (b) rounds box corners (c) adds space around boxes (d) lays out the page
10. 10.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
11. 11.🌈 Which colour is #00ff00? (a) black (b) yellow (c) red (d) bright green
12. 12.🎯 Which CSS selector matches this element?
    <p class="star" id="top">Hello</p> (a) h1 (b) .menu (c) .top (d) p
13. 13.📦 In the box model, which part is space outside the border? (a) content (b) padding (c) margin (d) border
14. 14.🖌️ Which CSS property makes the text bold? (a) font-weight (b) background-color (c) font-size (d) font-family
15. 15.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 140px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 50px wide (no margins).
16. 16.💪 Which flexbox property spaces boxes along a row? (a) justify-content (b) display: flex (c) gap (d) flex-direction
17. 17.🔍 Which is the odd one out? (a) adds space around boxes (b) rounds box corners (c) lays out the page (d) shows a pop-up message
18. 18.⚖️ What colour is the text of this element?
    <h2 class="big" id="logo">Hi</h2>
    CSS:
    h2 { color: yellow; }
    #logo { color: orange; }
    .big { color: black; } (a) yellow (b) black (c) blue (d) orange
19. 19.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 20px;
      }
    }
20. 20.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 190px;
      padding: 25px;
      border: 3px solid black;
      margin: 15px;
    }
21. 21.🖌️ What colour is behind the letters?
    h2 {
      color: green;
      font-size: 28px;
      text-align: center;
      background-color: purple;
    } (a) red (b) purple (c) green
22. 22.🖌️ Where does the text sit on its line?
    h2 {
      color: black;
      background-color: white;
      text-align: center;
      font-size: 32px;
    } (a) on the right (b) on the left (c) in the middle
23. 23.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Computer Style Sheets (c) Creative Sheet System (d) Cascading Style Sheets
24. 24.🖌️ What colour are the letters?
    li {
      color: blue;
      font-size: 16px;
      background-color: white;
      text-align: left;
    } (a) black (b) blue (c) white
25. 25.✍️ Which sign ends each CSS declaration? (a) ; (b) , (c) . (d) :
26. 26.What does justify-content: flex-start do? (a) packs boxes at the start (b) puts boxes in the middle (c) packs boxes at the end (d) equal gaps, none at ends
27. 27.✍️ Which property is set to red in this rule?
    h1 {
      color: red;
      background-color: yellow;
    } (a) font-size (b) red (c) color (d) text-align
28. 28.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    }
29. 29.⚖️ What colour is the text of this element?
    <h2 class="big" id="logo">Hi</h2>
    CSS:
    h2 { color: black; }
    h2 { color: blue; } (a) green (b) white (c) black (d) blue
30. 30.🎨 A CSS file usually ends with which extension? (a) .png (b) .html (c) .css (d) .js
31. 31.🌈 Which hex code is blue? (a) #ff0000 (b) #0000ff (c) #ff00ff (d) #00ff00
32. 32.True or false: .big is a class selector. (a) True (b) False
33. 33.📱 Responsive design means a page ___. (a) fits every screen (b) has no pictures (c) is only for laptops (d) never changes
34. 34.⚖️ What colour is the text of this element?
    <p class="menu" id="hero">Hi</p>
    CSS:
    p { color: blue; }
    .menu { color: black; } (a) green (b) white (c) black (d) blue
35. 35.True or false: h1 is a class selector. (a) True (b) False
36. 36.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
37. 37.Which of these is padding? (a) the gap round content (b) space outside the border (c) the text or picture (d) the line round the box
38. 38.True or false: JavaScript makes a form box. (a) False (b) True
39. 39.🖌️ Which CSS property centres a heading? (a) background-color (b) font-family (c) text-align (d) color
40. 40.🖌️ What colour is behind the letters?
    p {
      font-size: 16px;
      background-color: purple;
      color: black;
      text-align: center;
    } (a) purple (b) green (c) black

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