CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 820 · 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="menu" id="logo">Hello</p> (a) .note (b) #menu (c) h1 (d) p
2. 2.🎯 Which element does the selector div style? (a) <p class="box"> (b) <h1 id="intro"> (c) <div class="box"> (d) <span>
3. 3.🎯 Which element does the selector span style? (a) <p> (b) <span class="box"> (c) <h2 id="main"> (d) <h1 class="box">
4. 4.🧩 Which language makes a link? (a) JavaScript (b) HTML (c) CSS
5. 5.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 300px;
     justify-content: center;
   }
   Inside are 4 boxes, each 60px wide (no margins).
6. 6.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 18px;
     }
   }
7. 7.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 230px;
     justify-content: flex-end;
   }
   Inside are 2 boxes, each 80px wide (no margins).
8. 8.✍️ How many declarations (property: value pairs) are in this rule?
   li {
     text-align: center;
     font-weight: bold;
     color: red;
     margin: 10px;
   }
9. 9.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 200px;
     justify-content: space-between;
   }
   Inside are 2 boxes, each 80px wide (no margins).
10. 10.What does background-color do? (a) makes letters bigger (b) sets the letter colour (c) makes the text bold (d) colours behind the text
11. 11.🧩 Which language makes headings and lists? (a) JavaScript (b) HTML (c) CSS
12. 12.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) turned off (c) 600px or narrower (d) exactly 1000px
13. 13.🌈 Which colour is #00ff00? (a) blue (b) black (c) bright green (d) magenta
14. 14.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
15. 15.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 280px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 100px wide (no margins).
16. 16.🖌️ What colour are the letters?
    p {
      background-color: green;
      text-align: left;
      font-size: 20px;
      color: orange;
    } (a) green (b) white (c) orange
17. 17.Which of these is the content? (a) space inside the border (b) the gap round content (c) the text or picture (d) a solid or dotted edge
18. 18.🌈 Which colour is rgb(255, 0, 255)? (a) white (b) blue (c) magenta (d) cyan
19. 19.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 6px;
      }
    } (a) No (b) Yes
20. 20.Which of these does CSS do? (a) sets colours and fonts (b) shows a pop-up message (c) makes a form box (d) changes the page live
21. 21.🎯 What kind of selector is .star? (a) a class selector (b) an id selector (c) an element selector
22. 22.🌈 Which colour is #000000? (a) bright green (b) black (c) cyan (d) white
23. 23.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 110px;
      padding: 30px;
      border: 5px solid black;
      margin: 5px;
    }
24. 24.🎯 Which sign starts a class selector? (a) . (b) & (c) @ (d) #
25. 25.🖌️ How big is the text, in px?
    li {
      text-align: left;
      background-color: white;
      color: black;
      font-size: 40px;
    }
26. 26.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 32px;
      }
    }
27. 27.📱 What does a media query check? (a) the time of day (b) the screen width (c) the battery level (d) the page title
28. 28.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 310px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 50px wide (no margins).
29. 29.True or false: img is an element selector. (a) True (b) False
30. 30.True or false: HTML gives the page structure. (a) False (b) True
31. 31.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
32. 32.True or false: CSS makes a link. (a) True (b) False
33. 33.✍️ CSS declarations go inside which brackets? (a) < > (b) ( ) (c) [ ] (d) { }
34. 34.True or false: .note is a class selector. (a) False (b) True
35. 35.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 460px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 100px wide (no margins).
36. 36.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 170px;
      justify-content: center;
    }
    Inside are 3 boxes, each 50px wide (no margins).
37. 37.✍️ What value is given to font-style in this rule?
    h2 {
      font-style: italic;
      color: red;
    } (a) red (b) font-style (c) italic (d) 20px
38. 38.🖌️ What colour are the letters?
    h2 {
      background-color: red;
      font-size: 28px;
      color: orange;
      text-align: center;
    } (a) orange (b) white (c) red
39. 39.True or false: #main is a class selector. (a) False (b) True
40. 40.What does justify-content: flex-end do? (a) puts boxes in the middle (b) packs boxes at the start (c) equal gaps, none at ends (d) packs boxes at the end

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