CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 493 · 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.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 240px;
     justify-content: space-between;
   }
   Inside are 2 boxes, each 100px wide (no margins).
2. 2.Which of these does CSS do? (a) changes the page live (b) makes headings and lists (c) makes a form box (d) changes the text size
3. 3.True or false: CSS puts a picture on a page. (a) True (b) False
4. 4.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 210px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 50px wide (no margins).
5. 5.✍️ What is the selector in this CSS rule?
   #top {
     padding: 8px;
     width: 300px;
     color: red;
     border: 2px solid;
   } (a) 300px (b) li (c) padding (d) #top
6. 6.🖌️ Where does the text sit on its line?
   h1 {
     font-size: 40px;
     text-align: center;
     color: white;
     background-color: yellow;
   } (a) in the middle (b) on the right (c) on the left
7. 7.🌈 In #6d0000 the red part is the hex number 6d. What is it as a normal number?
8. 8.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 26px;
     }
   }
9. 9.⚖️ What colour is the text of this element?
   <p class="note" id="end">Hi</p>
   CSS:
   .note { color: black; }
   .note { color: blue; } (a) purple (b) black (c) green (d) blue
10. 10.Which of these does JavaScript do? (a) sets colours and fonts (b) adds space around boxes (c) puts a picture on a page (d) counts down a timer
11. 11.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the title tag (c) the br tag (d) the viewport meta tag
12. 12.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      background-color: yellow;
      width: 300px;
    }
13. 13.📱 Responsive design means a page ___. (a) never changes (b) is only for laptops (c) has no pictures (d) fits every screen
14. 14.🎯 Which CSS selector matches this element?
    <h1 class="box" id="logo">Hello</h1> (a) .logo (b) #end (c) .box (d) #box
15. 15.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    }
16. 16.🖌️ Which CSS property makes letters bigger? (a) font-family (b) font-weight (c) text-align (d) font-size
17. 17.⚖️ What colour is the text of this element?
    <p class="box" id="end">Hi</p>
    CSS:
    .box { color: red; }
    #end { color: purple; } (a) green (b) orange (c) red (d) purple
18. 18.🧩 Which language sets colours and fonts? (a) HTML (b) JavaScript (c) CSS
19. 19.🎯 Which sign starts an id selector? (a) & (b) @ (c) . (d) #
20. 20.🎯 Which sign starts a class selector? (a) # (b) & (c) . (d) @
21. 21.Which of these does CSS do? (a) makes a form box (b) counts down a timer (c) puts a picture on a page (d) rounds box corners
22. 22.What does background-color do? (a) makes letters bigger (b) picks the font style (c) colours behind the text (d) centres a heading
23. 23.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
24. 24.Which of these does CSS do? (a) shows a pop-up message (b) gives the page structure (c) counts down a timer (d) lays out the page
25. 25.Which of these is the content? (a) the gap to other boxes (b) space inside the border (c) the text or picture (d) space outside the border
26. 26.True or false: .note is an id selector. (a) True (b) False
27. 27.🌈 Which colour is #00ff00? (a) magenta (b) red (c) bright green (d) white
28. 28.🌈 Which colour is #0000ff? (a) red (b) cyan (c) blue (d) yellow
29. 29.Which of these is margin? (a) the gap round content (b) the gap to other boxes (c) the text or picture (d) the line round the box
30. 30.True or false: HTML makes headings and lists. (a) True (b) False
31. 31.🔍 Which is the odd one out? (a) gives the page structure (b) puts a picture on a page (c) makes headings and lists (d) changes the page live
32. 32.True or false: margin is the line round the box. (a) True (b) False
33. 33.🧩 Which language rounds box corners? (a) CSS (b) JavaScript (c) HTML
34. 34.⚖️ What colour is the text of this element?
    <p class="big" id="top">Hi</p>
    CSS:
    .big { color: blue; }
    .big { color: green; } (a) blue (b) red (c) green (d) orange
35. 35.📦 In the box model, which part is space inside the border? (a) content (b) margin (c) padding (d) border
36. 36.🎯 Which element does the selector div style? (a) <h1 id="hero"> (b) <p class="menu"> (c) <div class="menu"> (d) <span>
37. 37.💪 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).
38. 38.🔍 Which is the odd one out? (a) reacts to a button click (b) adds space around boxes (c) counts down a timer (d) changes the page live
39. 39.✍️ What value is given to background-color in this rule?
    li {
      background-color: yellow;
      border: 2px solid;
    } (a) 8px (b) yellow (c) background-color (d) 10px
40. 40.🖌️ Where does the text sit on its line?
    h1 {
      text-align: left;
      color: blue;
      font-size: 16px;
      background-color: white;
    } (a) on the right (b) on the left (c) in the middle

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