CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 330 · 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: #top is an element selector. (a) True (b) False
2. 2.Which of these is padding? (a) a solid or dotted edge (b) the gap to other boxes (c) space outside the border (d) the gap round content
3. 3.📱 Responsive design means a page ___. (a) is only for laptops (b) fits every screen (c) has no pictures (d) never changes
4. 4.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 240px;
     padding: 20px;
     border: 1px solid black;
     margin: 20px;
   }
5. 5.⚖️ Which selector is the weakest? (a) an id selector (b) an element selector (c) a class selector
6. 6.⚖️ What colour is the text of this element?
   <h1 class="box" id="top">Hi</h1>
   CSS:
   .box { color: yellow; }
   .box { color: black; } (a) blue (b) red (c) black (d) yellow
7. 7.🌈 Which colour is rgb(255, 255, 255)? (a) red (b) blue (c) bright green (d) white
8. 8.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 450px;
     justify-content: space-between;
   }
   Inside are 4 boxes, each 60px wide (no margins).
9. 9.🎯 What kind of selector is .card? (a) an element selector (b) an id selector (c) a class selector
10. 10.⚖️ What colour is the text of this element?
    <p class="big" id="end">Hi</p>
    CSS:
    .big { color: purple; }
    p { color: red; } (a) yellow (b) blue (c) purple (d) red
11. 11.⚖️ What colour is the text of this element?
    <p class="menu" id="main">Hi</p>
    CSS:
    #main { color: purple; }
    p { color: green; }
    .menu { color: black; } (a) black (b) purple (c) yellow (d) green
12. 12.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
13. 13.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) turned off (c) 600px or narrower (d) 600px or wider
14. 14.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) turned off (c) 800px or narrower (d) exactly 100px
15. 15.🌈 Which hex code is black? (a) #ff0000 (b) #ff00ff (c) #000000 (d) #00ff00
16. 16.Which of these does CSS do? (a) shows a pop-up message (b) changes the text size (c) reacts to a button click (d) counts down a timer
17. 17.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 150px;
      padding: 30px;
      border: 2px solid black;
      margin: 5px;
    }
18. 18.📦 In the box model, which part is the gap round content? (a) content (b) margin (c) border (d) padding
19. 19.💪 Which flexbox property lines boxes up across? (a) align-items (b) gap (c) flex-direction (d) display: flex
20. 20.⚖️ What colour is the text of this element?
    <p class="note" id="logo">Hi</p>
    CSS:
    #logo { color: red; }
    p { color: blue; } (a) blue (b) yellow (c) orange (d) red
21. 21.🌈 In #950000 the red part is the hex number 95. What is it as a normal number?
22. 22.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    }
23. 23.⚖️ What colour is the text of this element?
    <p class="star" id="logo">Hi</p>
    CSS:
    .star { color: yellow; }
    p { color: orange; } (a) orange (b) blue (c) yellow (d) red
24. 24.🌈 Which colour is rgb(255, 0, 0)? (a) magenta (b) red (c) blue (d) bright green
25. 25.🔍 Which is the odd one out? (a) changes the page live (b) makes headings and lists (c) shows a pop-up message (d) counts down a timer
26. 26.What does font-size do? (a) centres a heading (b) makes letters bigger (c) sets the letter colour (d) makes the text bold
27. 27.🎯 Which element does the selector .star style? (a) <span class="menu"> (b) <span id="star"> (c) <span class="star"> (d) <p class="note">
28. 28.🎯 Which element does the selector .menu style? (a) <h2 class="note"> (b) <li class="big"> (c) <h2 id="menu"> (d) <h2 class="menu">
29. 29.💪 Which justify-content value packs boxes at the start? (a) center (b) space-between (c) flex-start (d) flex-end
30. 30.🌈 Which colour is #ff0000? (a) black (b) magenta (c) red (d) blue
31. 31.🌈 Which colour is #00ff00? (a) bright green (b) white (c) cyan (d) yellow
32. 32.🎯 What kind of selector is p? (a) an id selector (b) an element selector (c) a class selector
33. 33.🧩 Which language gives the page structure? (a) CSS (b) HTML (c) JavaScript
34. 34.🌈 Which hex code is white? (a) #ff00ff (b) #ffffff (c) #000000 (d) #ff0000
35. 35.✍️ What value is given to font-size in this rule?
    body {
      font-size: 20px;
      background-color: yellow;
      font-style: italic;
      border: 2px solid;
    } (a) center (b) yellow (c) 20px (d) font-size
36. 36.✍️ Which property is set to 8px in this rule?
    p {
      background-color: yellow;
      padding: 8px;
    } (a) padding (b) border (c) font-weight (d) 8px
37. 37.⚖️ What colour is the text of this element?
    <h1 class="menu" id="intro">Hi</h1>
    CSS:
    h1 { color: blue; }
    .menu { color: orange; }
    #intro { color: white; } (a) blue (b) orange (c) white (d) red
38. 38.🔍 Which is the odd one out? (a) makes a form box (b) reacts to a button click (c) checks a quiz answer (d) counts down a timer
39. 39.🌈 In #rrggbb, which colour do the last two digits give? (a) blue (b) red (c) green (d) white
40. 40.Which of these does HTML do? (a) counts down a timer (b) changes the page live (c) makes a link (d) changes the text size

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