CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 76 · 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 flexbox property picks row or column? (a) gap (b) justify-content (c) display: flex (d) flex-direction
2. 2.🎯 Which CSS selector matches this element?
   <span class="big" id="end">Hello</span> (a) #hero (b) #big (c) span (d) p
3. 3.📱 The screen is 540px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 24px;
     }
   } (a) Yes (b) No
4. 4.🖌️ What colour is behind the letters?
   li {
     text-align: left;
     color: white;
     background-color: green;
     font-size: 20px;
   } (a) white (b) green (c) orange
5. 5.✍️ How many declarations (property: value pairs) are in this rule?
   .box {
     color: red;
     border: 2px solid;
   }
6. 6.✍️ In color: blue; which part is the value? (a) ; (b) color (c) : (d) blue
7. 7.🌈 Which colour is rgb(255, 0, 0)? (a) cyan (b) blue (c) bright green (d) red
8. 8.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 310px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 100px wide (no margins).
9. 9.✍️ What value is given to color in this rule?
   body {
     font-size: 20px;
     color: red;
     border: 2px solid;
     width: 300px;
   } (a) color (b) 20px (c) center (d) red
10. 10.🎯 How many elements on a page should have the same id? (a) any number (b) 5 (c) 2 (d) 1
11. 11.✍️ What value is given to border in this rule?
    #top {
      font-weight: bold;
      font-size: 20px;
      border: 2px solid;
    } (a) 300px (b) 2px solid (c) border (d) italic
12. 12.🎯 Which element does the selector .red style? (a) <p class="red"> (b) <p id="red"> (c) <h1 class="star"> (d) <p class="box">
13. 13.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 300px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 80px wide (no margins).
14. 14.🖌️ What colour is behind the letters?
    h2 {
      font-size: 24px;
      color: red;
      text-align: center;
      background-color: white;
    } (a) white (b) red (c) green
15. 15.⚖️ What colour is the text of this element?
    <h1 class="red" id="top">Hi</h1>
    CSS:
    #top { color: orange; }
    .red { color: yellow; } (a) yellow (b) red (c) green (d) orange
16. 16.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 280px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 100px wide (no margins).
17. 17.⚖️ What colour is the text of this element?
    <h1 class="note" id="logo">Hi</h1>
    CSS:
    #logo { color: purple; }
    h1 { color: orange; } (a) white (b) red (c) purple (d) orange
18. 18.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) green (c) blue (d) red
19. 19.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 90px;
      padding: 20px;
      border: 5px solid black;
      margin: 5px;
    }
20. 20.Which of these is margin? (a) space inside the border (b) the line round the box (c) the text or picture (d) the gap to other boxes
21. 21.True or false: the content is the gap round content. (a) False (b) True
22. 22.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the br tag (c) the viewport meta tag (d) the hr tag
23. 23.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 340px;
      justify-content: center;
    }
    Inside are 4 boxes, each 80px wide (no margins).
24. 24.🎯 What kind of selector is p? (a) an id selector (b) an element selector (c) a class selector
25. 25.Which of these does CSS do? (a) reacts to a button click (b) makes headings and lists (c) lays out the page (d) checks a quiz answer
26. 26.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 14px;
      }
    }
27. 27.What does text-align do? (a) makes letters bigger (b) colours behind the text (c) centres a heading (d) sets the letter colour
28. 28.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 6px;
      }
    } (a) No (b) Yes
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: 250px;
      padding: 20px;
      border: 2px solid black;
      margin: 15px;
    }
30. 30.💪 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 40px wide (no margins).
31. 31.✍️ How does a CSS comment start? (a) /* (b) // (c) <!-- (d) #
32. 32.🖌️ What colour are the letters?
    h2 {
      text-align: center;
      background-color: green;
      font-size: 32px;
      color: red;
    } (a) red (b) blue (c) green
33. 33.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 480px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 100px wide (no margins).
34. 34.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) space-between (c) center (d) flex-start
35. 35.Which of these is the content? (a) the gap to other boxes (b) space inside the border (c) a solid or dotted edge (d) the text or picture
36. 36.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 26px;
      }
    } (a) No (b) Yes
37. 37.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 200px;
      padding: 20px;
      border: 2px solid black;
      margin: 0px;
    }
38. 38.✍️ What value is given to border in this rule?
    body {
      border: 2px solid;
      color: red;
    } (a) italic (b) 2px solid (c) border (d) 300px
39. 39.📦 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: 5px;
      border: 4px solid black;
      margin: 15px;
    }
40. 40.✍️ Which property is set to 8px in this rule?
    body {
      width: 300px;
      padding: 8px;
    } (a) font-weight (b) padding (c) 8px (d) border

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