CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 452 · 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 is the border? (a) space outside the border (b) a solid or dotted edge (c) the gap to other boxes (d) the gap round content
2. 2.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 200px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 60px wide (no margins).
3. 3.🖌️ What colour are the letters?
   li {
     text-align: left;
     background-color: yellow;
     color: blue;
     font-size: 16px;
   } (a) yellow (b) blue (c) orange
4. 4.📦 In the box model, which part is the gap round content? (a) content (b) margin (c) border (d) padding
5. 5.What does justify-content: flex-end do? (a) packs boxes at the end (b) equal gaps, none at ends (c) packs boxes at the start (d) puts boxes in the middle
6. 6.🎯 Which CSS selector matches this element?
   <span class="box" id="top">Hello</span> (a) .star (b) .top (c) p (d) #top
7. 7.🧩 Which language gives the page structure? (a) CSS (b) HTML (c) JavaScript
8. 8.🎯 What kind of selector is img? (a) a class selector (b) an element selector (c) an id selector
9. 9.🎯 What kind of selector is body? (a) a class selector (b) an id selector (c) an element selector
10. 10.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 14px;
      }
    }
11. 11.✍️ Which sign goes between a property and its value? (a) - (b) : (c) ; (d) =
12. 12.Which of these is the content? (a) a solid or dotted edge (b) space inside the border (c) the gap to other boxes (d) the text or picture
13. 13.Which of these does HTML do? (a) rounds box corners (b) makes a form box (c) counts down a timer (d) adds space around boxes
14. 14.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
15. 15.🎯 How many elements on a page should have the same id? (a) any number (b) 1 (c) 5 (d) 2
16. 16.Which of these is the border? (a) the gap to other boxes (b) space inside the border (c) the line round the box (d) the text or picture
17. 17.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      padding: 8px;
    }
18. 18.🌈 In #00c000 the green part is the hex number c0. What is it as a normal number?
19. 19.Which of these does HTML do? (a) lays out the page (b) shows a pop-up message (c) adds space around boxes (d) puts a picture on a page
20. 20.What does font-size do? (a) picks the font style (b) centres a heading (c) makes letters bigger (d) colours behind the text
21. 21.🎯 What kind of selector is .big? (a) an element selector (b) an id selector (c) a class selector
22. 22.🖌️ What colour is behind the letters?
    h1 {
      color: white;
      text-align: center;
      font-size: 24px;
      background-color: black;
    } (a) white (b) red (c) black
23. 23.🖌️ Which CSS property centres a heading? (a) background-color (b) font-family (c) text-align (d) color
24. 24.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 130px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 40px wide (no margins).
25. 25.🖌️ What colour is behind the letters?
    p {
      text-align: center;
      color: orange;
      font-size: 24px;
      background-color: red;
    } (a) red (b) orange (c) yellow
26. 26.✍️ What is the selector in this CSS rule?
    #top {
      font-style: italic;
      border: 2px solid;
      color: red;
    } (a) #top (b) 2px solid (c) li (d) font-style
27. 27.🌈 Which hex code is white? (a) #ff0000 (b) #ffffff (c) #00ff00 (d) #ff00ff
28. 28.🖌️ What colour are the letters?
    p {
      text-align: left;
      color: blue;
      background-color: orange;
      font-size: 20px;
    } (a) yellow (b) blue (c) orange
29. 29.What does font-weight do? (a) sets the letter colour (b) makes the text bold (c) makes letters bigger (d) colours behind the text
30. 30.✍️ What is the selector in this CSS rule?
    h1 {
      background-color: yellow;
      width: 300px;
    } (a) p (b) background-color (c) 300px (d) h1
31. 31.⚖️ What colour is the text of this element?
    <h2 class="menu" id="hero">Hi</h2>
    CSS:
    h2 { color: white; }
    #hero { color: black; }
    .menu { color: yellow; } (a) white (b) purple (c) yellow (d) black
32. 32.What does text-align do? (a) makes the text bold (b) picks the font style (c) centres a heading (d) colours behind the text
33. 33.💪 Which flexbox property lines boxes up across? (a) gap (b) flex-direction (c) align-items (d) justify-content
34. 34.✍️ What is the selector in this CSS rule?
    .box {
      margin: 10px;
      font-size: 20px;
      text-align: center;
      font-weight: bold;
    } (a) margin (b) .box (c) h2 (d) 20px
35. 35.🎯 What kind of selector is #end? (a) an id selector (b) a class selector (c) an element selector
36. 36.🎯 Which element does the selector div style? (a) <h1 id="logo"> (b) <p class="red"> (c) <span> (d) <div class="red">
37. 37.🔍 Which is the odd one out? (a) rounds box corners (b) checks a quiz answer (c) reacts to a button click (d) changes the page live
38. 38.🌈 Which colour is #00ffff? (a) blue (b) cyan (c) bright green (d) black
39. 39.🎯 Which element does the selector .menu style? (a) <div id="menu"> (b) <div class="menu"> (c) <div class="note"> (d) <span class="big">
40. 40.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the first one (c) the later one (d) the shorter one

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