CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 987 · 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 property is set to 20px in this rule?
   body {
     font-size: 20px;
     text-align: center;
     color: red;
   } (a) 20px (b) font-size (c) text-align (d) background-color
2. 2.🌈 Which colour of light is strongest in rgb(135, 158, 124)? (a) blue (b) red (c) green
3. 3.Which of these does HTML do? (a) changes the text size (b) lays out the page (c) sets colours and fonts (d) gives the page structure
4. 4.🎯 What kind of selector is #end? (a) an element selector (b) an id selector (c) a class selector
5. 5.💪 Which justify-content value equal gaps, none at ends? (a) flex-end (b) space-between (c) center (d) flex-start
6. 6.Which of these is padding? (a) the gap to other boxes (b) the line round the box (c) space inside the border (d) space outside the border
7. 7.⚖️ 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
8. 8.📱 What does a media query check? (a) the battery level (b) the time of day (c) the page title (d) the screen width
9. 9.What does background-color do? (a) centres a heading (b) makes the text bold (c) makes letters bigger (d) colours behind the text
10. 10.🖌️ What colour is behind the letters?
    h1 {
      background-color: white;
      text-align: right;
      font-size: 16px;
      color: black;
    } (a) white (b) black (c) purple
11. 11.🎯 Which CSS selector matches this element?
    <div class="star" id="intro">Hello</div> (a) #main (b) .star (c) .intro (d) #star
12. 12.🔍 Which is the odd one out? (a) reacts to a button click (b) counts down a timer (c) changes the text size (d) changes the page live
13. 13.✍️ What value is given to font-style in this rule?
    body {
      text-align: center;
      padding: 8px;
      margin: 10px;
      font-style: italic;
    } (a) font-style (b) 20px (c) red (d) italic
14. 14.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 260px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 60px wide (no margins).
15. 15.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 480px;
      justify-content: center;
    }
    Inside are 4 boxes, each 80px wide (no margins).
16. 16.✍️ In color: blue; which part is the value? (a) : (b) ; (c) color (d) blue
17. 17.📱 Responsive design means a page ___. (a) fits every screen (b) is only for laptops (c) has no pictures (d) never changes
18. 18.Which of these does CSS do? (a) adds space around boxes (b) gives the page structure (c) makes headings and lists (d) makes a link
19. 19.✍️ What value is given to font-size in this rule?
    p {
      padding: 8px;
      font-size: 20px;
    } (a) yellow (b) 20px (c) center (d) font-size
20. 20.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    } (a) No (b) Yes
21. 21.What does justify-content: flex-end do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the end (d) packs boxes at the start
22. 22.True or false: body is an id selector. (a) False (b) True
23. 23.💪 Which flexbox property spaces boxes along a row? (a) justify-content (b) gap (c) flex-direction (d) align-items
24. 24.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 320px;
      justify-content: center;
    }
    Inside are 4 boxes, each 50px wide (no margins).
25. 25.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 280px;
      justify-content: center;
    }
    Inside are 2 boxes, each 100px wide (no margins).
26. 26.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
27. 27.🖌️ Where does the text sit on its line?
    p {
      text-align: right;
      font-size: 12px;
      background-color: yellow;
      color: purple;
    } (a) on the right (b) in the middle (c) on the left
28. 28.✍️ What value is given to font-style in this rule?
    p {
      font-weight: bold;
      font-style: italic;
      text-align: center;
      font-size: 20px;
    } (a) 20px (b) red (c) font-style (d) italic
29. 29.🖌️ What colour is behind the letters?
    h2 {
      text-align: right;
      font-size: 20px;
      background-color: green;
      color: purple;
    } (a) purple (b) green (c) red
30. 30.💪 Which flexbox property sets space between boxes? (a) justify-content (b) display: flex (c) align-items (d) gap
31. 31.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 110px;
      padding: 20px;
      border: 1px solid black;
      margin: 15px;
    }
32. 32.Which of these is margin? (a) a solid or dotted edge (b) the line round the box (c) the gap round content (d) space outside the border
33. 33.🧩 Which language reacts to a button click? (a) CSS (b) JavaScript (c) HTML
34. 34.🎨 Which tag holds CSS inside the head? (a) <css> (b) <body> (c) <script> (d) <style>
35. 35.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 290px;
      padding: 25px;
      border: 1px solid black;
      margin: 5px;
    }
36. 36.✍️ What value is given to font-size in this rule?
    .box {
      font-size: 20px;
      width: 300px;
    } (a) font-size (b) center (c) 20px (d) yellow
37. 37.✍️ What value is given to padding in this rule?
    body {
      font-weight: bold;
      padding: 8px;
    } (a) padding (b) bold (c) 8px (d) 2px solid
38. 38.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) turned off (c) 600px or narrower (d) exactly 1000px
39. 39.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 26px;
      }
    }
40. 40.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 160px;
      padding: 10px;
      border: 1px solid black;
      margin: 5px;
    }

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