CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 926 · 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.What does font-family do? (a) makes the text bold (b) sets the letter colour (c) centres a heading (d) picks the font style
2. 2.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 220px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 80px wide (no margins).
3. 3.True or false: padding is space inside the border. (a) False (b) True
4. 4.True or false: margin is the text or picture. (a) False (b) True
5. 5.🎯 What kind of selector is p? (a) a class selector (b) an element selector (c) an id selector
6. 6.📦 In the box model, which part is space outside the border? (a) content (b) padding (c) border (d) margin
7. 7.⚖️ What colour is the text of this element?
   <h1 class="box" id="main">Hi</h1>
   CSS:
   .box { color: blue; }
   #main { color: red; }
   h1 { color: green; } (a) green (b) black (c) red (d) blue
8. 8.Which of these does JavaScript do? (a) makes headings and lists (b) changes the text size (c) shows a pop-up message (d) rounds box corners
9. 9.True or false: the border is the gap round content. (a) True (b) False
10. 10.📦 In the box model, which part is the gap round content? (a) border (b) margin (c) padding (d) content
11. 11.🖌️ How big is the text, in px?
    h1 {
      text-align: center;
      color: black;
      font-size: 16px;
      background-color: green;
    }
12. 12.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) neither (c) the shorter one (d) the first one
13. 13.💪 Which justify-content value equal gaps, none at ends? (a) space-between (b) center (c) flex-end (d) flex-start
14. 14.🎯 Which CSS selector matches this element?
    <li class="note" id="hero">Hello</li> (a) li (b) .hero (c) #note (d) div
15. 15.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 140px;
      padding: 20px;
      border: 3px solid black;
      margin: 0px;
    }
16. 16.✍️ What value is given to font-style in this rule?
    li {
      font-style: italic;
      font-weight: bold;
    } (a) font-style (b) red (c) 20px (d) italic
17. 17.🖌️ What colour is behind the letters?
    h2 {
      text-align: center;
      font-size: 32px;
      background-color: red;
      color: purple;
    } (a) black (b) purple (c) red
18. 18.🔍 Which is the odd one out? (a) changes the text size (b) checks a quiz answer (c) adds space around boxes (d) lays out the page
19. 19.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 12px;
      }
    }
20. 20.⚖️ What colour is the text of this element?
    <h2 class="menu" id="intro">Hi</h2>
    CSS:
    .menu { color: blue; }
    h2 { color: orange; } (a) orange (b) black (c) blue (d) purple
21. 21.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 230px;
      padding: 25px;
      border: 4px solid black;
      margin: 0px;
    }
22. 22.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
23. 23.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
24. 24.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    }
25. 25.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 170px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 40px wide (no margins).
26. 26.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) blue (c) green (d) black
27. 27.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 2 boxes, each 80px wide (no margins).
28. 28.🎯 Which element does the selector .menu style? (a) <div id="menu"> (b) <div class="note"> (c) <span class="big"> (d) <div class="menu">
29. 29.Which of these does HTML do? (a) checks a quiz answer (b) makes a link (c) counts down a timer (d) changes the text size
30. 30.🧩 Which language rounds box corners? (a) CSS (b) JavaScript (c) HTML
31. 31.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      background-color: yellow;
      font-style: italic;
      width: 300px;
      font-weight: bold;
    }
32. 32.Which of these does HTML do? (a) reacts to a button click (b) rounds box corners (c) changes the text size (d) makes a form box
33. 33.🖌️ What colour is behind the letters?
    p {
      font-size: 32px;
      background-color: white;
      color: red;
      text-align: left;
    } (a) green (b) white (c) red
34. 34.🌈 Which colour is rgb(255, 255, 0)? (a) yellow (b) bright green (c) blue (d) red
35. 35.Which of these is the border? (a) the gap round content (b) the line round the box (c) the text or picture (d) space outside the border
36. 36.Which of these is the content? (a) space outside the border (b) the text or picture (c) a solid or dotted edge (d) the line round the box
37. 37.🎯 Which element does the selector #intro style? (a) <li class="intro"> (b) <li id="intro"> (c) <li id="main"> (d) <div class="note">
38. 38.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) flex-end (c) center (d) flex-start
39. 39.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) turned off (c) 600px or narrower (d) exactly 1000px
40. 40.True or false: padding is the gap round content. (a) False (b) True

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