CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 413 · 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 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 18px;
     }
   }
2. 2.🖌️ What colour is behind the letters?
   h1 {
     text-align: right;
     font-size: 24px;
     color: black;
     background-color: blue;
   } (a) blue (b) black (c) white
3. 3.🌈 Which colour is rgb(0, 255, 0)? (a) bright green (b) black (c) red (d) blue
4. 4.Which of these is the border? (a) the line round the box (b) the gap round content (c) space inside the border (d) space outside the border
5. 5.✍️ In color: blue; which part is the property? (a) color (b) blue (c) : (d) ;
6. 6.True or false: CSS adds space around boxes. (a) False (b) True
7. 7.🧩 Which language makes a link? (a) CSS (b) JavaScript (c) HTML
8. 8.📱 Responsive design means a page ___. (a) fits every screen (b) never changes (c) has no pictures (d) is only for laptops
9. 9.💪 Which flexbox property spaces boxes along a row? (a) display: flex (b) gap (c) align-items (d) justify-content
10. 10.🔍 Which is the odd one out? (a) counts down a timer (b) reacts to a button click (c) makes a link (d) shows a pop-up message
11. 11.✍️ What is the selector in this CSS rule?
    h1 {
      width: 300px;
      color: red;
    } (a) h1 (b) red (c) width (d) p
12. 12.📦 In the box model, which part is space inside the border? (a) border (b) content (c) padding (d) margin
13. 13.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
14. 14.💪 Which flexbox property turns on flexbox? (a) gap (b) justify-content (c) display: flex (d) align-items
15. 15.🎯 Which CSS selector matches this element?
    <h1 class="note" id="top">Hello</h1> (a) #intro (b) .note (c) #note (d) .top
16. 16.What does font-weight do? (a) makes the text bold (b) centres a heading (c) colours behind the text (d) picks the font style
17. 17.Which of these does HTML do? (a) changes the page live (b) makes headings and lists (c) sets colours and fonts (d) shows a pop-up message
18. 18.What does justify-content: flex-start do? (a) packs boxes at the end (b) packs boxes at the start (c) equal gaps, none at ends (d) puts boxes in the middle
19. 19.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 24px;
      }
    } (a) Yes (b) No
20. 20.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 8px;
      }
    } (a) No (b) Yes
21. 21.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 240px;
      padding: 30px;
      border: 1px solid black;
      margin: 15px;
    }
22. 22.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 190px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 40px wide (no margins).
23. 23.🖌️ Where does the text sit on its line?
    h1 {
      color: orange;
      text-align: right;
      background-color: white;
      font-size: 24px;
    } (a) in the middle (b) on the right (c) on the left
24. 24.🌈 Which colour is #00ffff? (a) black (b) white (c) bright green (d) cyan
25. 25.True or false: JavaScript shows a pop-up message. (a) True (b) False
26. 26.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 16px;
      }
    } (a) No (b) Yes
27. 27.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) exactly 100px (c) 800px or wider (d) turned off
28. 28.✍️ Which property is set to yellow in this rule?
    #top {
      padding: 8px;
      background-color: yellow;
      width: 300px;
    } (a) yellow (b) margin (c) padding (d) background-color
29. 29.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    }
30. 30.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) neither (c) the first one (d) the later one
31. 31.🔍 Which is the odd one out? (a) reacts to a button click (b) puts a picture on a page (c) gives the page structure (d) makes a link
32. 32.🌈 Which colour is #ff00ff? (a) magenta (b) bright green (c) red (d) yellow
33. 33.🌈 Which colour of light is strongest in rgb(78, 165, 54)? (a) red (b) blue (c) green
34. 34.✍️ What value is given to font-style in this rule?
    h1 {
      font-style: italic;
      font-size: 20px;
    } (a) 20px (b) font-style (c) red (d) italic
35. 35.🧩 Which language gives the page structure? (a) CSS (b) JavaScript (c) HTML
36. 36.🖌️ What colour is behind the letters?
    h1 {
      text-align: right;
      background-color: yellow;
      font-size: 40px;
      color: blue;
    } (a) yellow (b) blue (c) red
37. 37.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
38. 38.🔍 Which is the odd one out? (a) gives the page structure (b) makes headings and lists (c) makes a form box (d) rounds box corners
39. 39.🖌️ How big is the text, in px?
    li {
      color: green;
      font-size: 20px;
      background-color: white;
      text-align: left;
    }
40. 40.🎯 Which element does the selector #logo style? (a) <li class="logo"> (b) <li id="end"> (c) <li id="logo"> (d) <div class="menu">

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