CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 531 · 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 of these does CSS do? (a) gives the page structure (b) sets colours and fonts (c) makes headings and lists (d) checks a quiz answer
2. 2.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 520px;
     justify-content: space-between;
   }
   Inside are 4 boxes, each 100px wide (no margins).
3. 3.✍️ How does a CSS comment start? (a) // (b) /* (c) <!-- (d) #
4. 4.🔍 Which is the odd one out? (a) sets colours and fonts (b) gives the page structure (c) makes headings and lists (d) makes a form box
5. 5.Which of these is the content? (a) the gap round content (b) a solid or dotted edge (c) space inside the border (d) the text or picture
6. 6.✍️ Which property is set to 8px in this rule?
   .note {
     padding: 8px;
     color: red;
     margin: 10px;
     background-color: yellow;
   } (a) border (b) font-weight (c) 8px (d) padding
7. 7.🎯 How many elements on a page should have the same id? (a) any number (b) 5 (c) 2 (d) 1
8. 8.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 50px;
     padding: 15px;
     border: 1px solid black;
     margin: 10px;
   }
9. 9.🎯 Which CSS selector matches this element?
   <div class="box" id="logo">Hello</div> (a) #logo (b) #box (c) .logo (d) span
10. 10.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 160px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 50px wide (no margins).
11. 11.✍️ What is the selector in this CSS rule?
    body {
      margin: 10px;
      font-style: italic;
      padding: 8px;
      border: 2px solid;
    } (a) margin (b) italic (c) body (d) .box
12. 12.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector
13. 13.✍️ What value is given to font-weight in this rule?
    h1 {
      font-weight: bold;
      border: 2px solid;
    } (a) bold (b) 2px solid (c) font-weight (d) 300px
14. 14.⚖️ What colour is the text of this element?
    <h1 class="note" id="hero">Hi</h1>
    CSS:
    #hero { color: white; }
    #hero { color: yellow; } (a) white (b) purple (c) red (d) yellow
15. 15.🎯 Which element does the selector #intro style? (a) <h1 class="big"> (b) <p id="intro"> (c) <p id="main"> (d) <p class="intro">
16. 16.🖌️ How big is the text, in px?
    li {
      font-size: 16px;
      background-color: yellow;
      color: blue;
      text-align: left;
    }
17. 17.What does font-size do? (a) makes the text bold (b) centres a heading (c) makes letters bigger (d) sets the letter colour
18. 18.🎯 What kind of selector is .big? (a) an element selector (b) an id selector (c) a class selector
19. 19.True or false: margin is the gap round content. (a) False (b) True
20. 20.✍️ What is the selector in this CSS rule?
    h1 {
      margin: 10px;
      padding: 8px;
    } (a) h1 (b) p (c) 8px (d) margin
21. 21.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 180px;
      padding: 25px;
      border: 3px solid black;
      margin: 5px;
    }
22. 22.🎯 Which sign starts a class selector? (a) . (b) # (c) & (d) @
23. 23.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
24. 24.Which of these does JavaScript do? (a) makes headings and lists (b) sets colours and fonts (c) rounds box corners (d) reacts to a button click
25. 25.🧩 Which language counts down a timer? (a) JavaScript (b) CSS (c) HTML
26. 26.✍️ Which sign goes between a property and its value? (a) - (b) = (c) : (d) ;
27. 27.🧩 Which language lays out the page? (a) CSS (b) HTML (c) JavaScript
28. 28.Which of these does HTML do? (a) makes headings and lists (b) counts down a timer (c) adds space around boxes (d) checks a quiz answer
29. 29.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 60px;
      padding: 25px;
      border: 4px solid black;
      margin: 5px;
    }
30. 30.True or false: JavaScript shows a pop-up message. (a) True (b) False
31. 31.⚖️ What colour is the text of this element?
    <p class="red" id="logo">Hi</p>
    CSS:
    #logo { color: red; }
    .red { color: white; }
    p { color: blue; } (a) blue (b) white (c) red (d) black
32. 32.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 16px;
      }
    }
33. 33.🌈 In #f30000 the red part is the hex number f3. What is it as a normal number?
34. 34.What does justify-content: center do? (a) equal gaps, none at ends (b) packs boxes at the start (c) puts boxes in the middle (d) packs boxes at the end
35. 35.📦 In the box model, which part is the text or picture? (a) border (b) margin (c) padding (d) content
36. 36.✍️ What is the selector in this CSS rule?
    li {
      width: 300px;
      font-weight: bold;
    } (a) body (b) li (c) width (d) bold
37. 37.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) space-between (c) center (d) flex-end
38. 38.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 26px;
      }
    } (a) No (b) Yes
39. 39.True or false: #end is an element selector. (a) False (b) True
40. 40.🌈 Which colour of light is strongest in rgb(97, 236, 128)? (a) blue (b) red (c) green

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