CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 2 · 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.🖌️ Where does the text sit on its line?
   li {
     background-color: yellow;
     color: white;
     font-size: 16px;
     text-align: right;
   } (a) in the middle (b) on the left (c) on the right
2. 2.🧩 Which language rounds box corners? (a) JavaScript (b) HTML (c) CSS
3. 3.✍️ What is the selector in this CSS rule?
   .box {
     font-weight: bold;
     color: red;
     margin: 10px;
     font-style: italic;
   } (a) .box (b) font-weight (c) red (d) h2
4. 4.True or false: the border is space inside the border. (a) True (b) False
5. 5.✍️ In color: blue; which part is the value? (a) : (b) blue (c) ; (d) color
6. 6.📱 What does a media query check? (a) the battery level (b) the screen width (c) the page title (d) the time of day
7. 7.🎯 Which CSS selector matches this element?
   <span class="red" id="top">Hello</span> (a) #intro (b) .top (c) .box (d) #top
8. 8.🔍 Which is the odd one out? (a) gives the page structure (b) makes headings and lists (c) puts a picture on a page (d) changes the text size
9. 9.🎨 A CSS file usually ends with which extension? (a) .png (b) .js (c) .html (d) .css
10. 10.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 240px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 100px wide (no margins).
11. 11.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 130px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 40px wide (no margins).
12. 12.📦 In the box model, which part is space outside the border? (a) padding (b) content (c) border (d) margin
13. 13.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 60px;
      padding: 25px;
      border: 1px solid black;
      margin: 10px;
    }
14. 14.🎨 Which tag connects an outside CSS file? (a) <css> (b) <img> (c) <link> (d) <a>
15. 15.True or false: JavaScript reacts to a button click. (a) False (b) True
16. 16.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 22px;
      }
    }
17. 17.True or false: CSS gives the page structure. (a) False (b) True
18. 18.🎯 Which CSS selector matches this element?
    <li class="star" id="main">Hello</li> (a) .menu (b) #star (c) .main (d) #main
19. 19.🧩 Which language gives the page structure? (a) JavaScript (b) CSS (c) HTML
20. 20.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 60px;
      padding: 10px;
      border: 3px solid black;
      margin: 5px;
    }
21. 21.📱 Responsive design means a page ___. (a) is only for laptops (b) fits every screen (c) never changes (d) has no pictures
22. 22.💪 Which justify-content value puts boxes in the middle? (a) center (b) flex-start (c) space-between (d) flex-end
23. 23.🎯 What kind of selector is .menu? (a) an id selector (b) a class selector (c) an element selector
24. 24.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 150px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 60px wide (no margins).
25. 25.🖌️ Which CSS property colours behind the text? (a) background-color (b) color (c) font-family (d) font-size
26. 26.🌈 Which colour of light is strongest in rgb(130, 46, 197)? (a) green (b) blue (c) red
27. 27.🧩 Which language changes the text size? (a) JavaScript (b) HTML (c) CSS
28. 28.🎯 Which element does the selector #hero style? (a) <span class="note"> (b) <div class="hero"> (c) <div id="hero"> (d) <div id="top">
29. 29.True or false: the border is a solid or dotted edge. (a) False (b) True
30. 30.🔍 Which is the odd one out? (a) sets colours and fonts (b) adds space around boxes (c) rounds box corners (d) puts a picture on a page
31. 31.🌈 Which colour of light is strongest in rgb(27, 49, 188)? (a) green (b) blue (c) red
32. 32.Which of these is the border? (a) the gap round content (b) the gap to other boxes (c) space outside the border (d) a solid or dotted edge
33. 33.🖌️ Where does the text sit on its line?
    p {
      color: red;
      font-size: 24px;
      text-align: center;
      background-color: blue;
    } (a) on the right (b) on the left (c) in the middle
34. 34.True or false: #logo is an id selector. (a) False (b) True
35. 35.🌈 Which colour is #00ffff? (a) red (b) blue (c) black (d) cyan
36. 36.🖌️ What colour is behind the letters?
    li {
      font-size: 24px;
      text-align: center;
      color: white;
      background-color: yellow;
    } (a) red (b) yellow (c) white
37. 37.📦 In the box model, which part is the gap to other boxes? (a) content (b) padding (c) margin (d) border
38. 38.🎯 Which CSS selector matches this element?
    <li class="menu" id="end">Hello</li> (a) .note (b) .end (c) div (d) #end
39. 39.✍️ In color: blue; which part is the property? (a) ; (b) : (c) color (d) blue
40. 40.⚖️ What colour is the text of this element?
    <p class="note" id="logo">Hi</p>
    CSS:
    p { color: yellow; }
    p { color: blue; } (a) green (b) yellow (c) blue (d) purple

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