CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 810 · 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: JavaScript changes the text size. (a) True (b) False
2. 2.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 120px;
     justify-content: space-between;
   }
   Inside are 2 boxes, each 50px wide (no margins).
3. 3.🖌️ Where does the text sit on its line?
   h1 {
     font-size: 16px;
     background-color: blue;
     text-align: center;
     color: red;
   } (a) on the left (b) on the right (c) in the middle
4. 4.⚖️ What colour is the text of this element?
   <h1 class="star" id="top">Hi</h1>
   CSS:
   .star { color: blue; }
   h1 { color: white; } (a) purple (b) blue (c) yellow (d) white
5. 5.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
6. 6.📱 Responsive design means a page ___. (a) is only for laptops (b) fits every screen (c) never changes (d) has no pictures
7. 7.💪 Which justify-content value puts boxes in the middle? (a) center (b) flex-end (c) space-between (d) flex-start
8. 8.What does font-size do? (a) makes letters bigger (b) makes the text bold (c) colours behind the text (d) sets the letter colour
9. 9.✍️ What is the selector in this CSS rule?
   .note {
     width: 300px;
     color: red;
     background-color: yellow;
   } (a) width (b) .note (c) red (d) #top
10. 10.🎯 Which element does the selector h2 style? (a) <span id="logo"> (b) <h2 class="red"> (c) <li> (d) <div class="red">
11. 11.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) 800px or wider (c) turned off (d) 800px or narrower
12. 12.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 310px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 80px wide (no margins).
13. 13.📱 Which tag helps phones show a page at the right size? (a) the br tag (b) the title tag (c) the viewport meta tag (d) the hr tag
14. 14.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) exactly 1000px (c) 600px or narrower (d) turned off
15. 15.📦 In the box model, which part is a solid or dotted edge? (a) content (b) border (c) margin (d) padding
16. 16.🌈 In #010000 the red part is the hex number 01. What is it as a normal number?
17. 17.Which of these is margin? (a) the gap to other boxes (b) the gap round content (c) space inside the border (d) the text or picture
18. 18.True or false: p is a class selector. (a) False (b) True
19. 19.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 130px;
      padding: 15px;
      border: 5px solid black;
      margin: 15px;
    }
20. 20.🎯 Which element does the selector #main style? (a) <p id="main"> (b) <h1 class="box"> (c) <p id="logo"> (d) <p class="main">
21. 21.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 24px;
      }
    }
22. 22.True or false: HTML puts a picture on a page. (a) True (b) False
23. 23.💪 Which justify-content value equal gaps, none at ends? (a) space-between (b) flex-end (c) center (d) flex-start
24. 24.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    }
25. 25.🖌️ Which CSS property makes letters bigger? (a) font-size (b) color (c) font-weight (d) font-family
26. 26.🖌️ How big is the text, in px?
    h1 {
      text-align: left;
      background-color: white;
      color: yellow;
      font-size: 20px;
    }
27. 27.🖌️ What colour are the letters?
    h2 {
      text-align: left;
      background-color: black;
      font-size: 20px;
      color: blue;
    } (a) black (b) red (c) blue
28. 28.🧩 Which language changes the page live? (a) HTML (b) CSS (c) JavaScript
29. 29.True or false: p is an id selector. (a) False (b) True
30. 30.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 6px;
      }
    }
31. 31.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 80px;
      padding: 10px;
      border: 5px solid black;
      margin: 5px;
    }
32. 32.🧩 Which language checks a quiz answer? (a) CSS (b) JavaScript (c) HTML
33. 33.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 6px;
      }
    } (a) Yes (b) No
34. 34.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 160px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 60px wide (no margins).
35. 35.🧩 Which language rounds box corners? (a) HTML (b) CSS (c) JavaScript
36. 36.🌈 Which colour is rgb(0, 255, 0)? (a) black (b) magenta (c) bright green (d) cyan
37. 37.What does justify-content: flex-end do? (a) equal gaps, none at ends (b) packs boxes at the end (c) puts boxes in the middle (d) packs boxes at the start
38. 38.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    } (a) Yes (b) No
39. 39.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the later one (c) neither (d) the first one
40. 40.✍️ What is the selector in this CSS rule?
    .note {
      margin: 10px;
      font-size: 20px;
    } (a) .note (b) 20px (c) #top (d) margin

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