CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 559 · 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 colour are the letters?
   p {
     font-size: 36px;
     color: green;
     background-color: orange;
     text-align: center;
   } (a) green (b) orange (c) white
2. 2.✍️ Which property is set to 300px in this rule?
   h2 {
     padding: 8px;
     width: 300px;
     margin: 10px;
   } (a) width (b) font-style (c) 300px (d) color
3. 3.🖌️ Which CSS property makes the text bold? (a) font-weight (b) background-color (c) font-size (d) text-align
4. 4.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) red (c) white (d) blue
5. 5.What does color do? (a) colours behind the text (b) picks the font style (c) makes letters bigger (d) sets the letter colour
6. 6.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 220px;
     padding: 30px;
     border: 1px solid black;
     margin: 20px;
   }
7. 7.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
8. 8.⚖️ What colour is the text of this element?
   <p class="menu" id="hero">Hi</p>
   CSS:
   #hero { color: white; }
   #hero { color: purple; } (a) purple (b) white (c) blue (d) black
9. 9.✍️ What is the selector in this CSS rule?
   li {
     font-size: 20px;
     text-align: center;
   } (a) li (b) font-size (c) center (d) body
10. 10.⚖️ What colour is the text of this element?
    <h1 class="red" id="main">Hi</h1>
    CSS:
    h1 { color: red; }
    #main { color: black; } (a) yellow (b) red (c) white (d) black
11. 11.🌈 Hex digits go 0 to 9, then A to which letter? (a) G (b) F (c) Z (d) J
12. 12.🖌️ What colour are the letters?
    h2 {
      color: red;
      background-color: orange;
      font-size: 24px;
      text-align: right;
    } (a) orange (b) red (c) green
13. 13.Which of these is margin? (a) a solid or dotted edge (b) the line round the box (c) the gap to other boxes (d) the text or picture
14. 14.✍️ Which property is set to 20px in this rule?
    body {
      font-size: 20px;
      background-color: yellow;
      padding: 8px;
    } (a) background-color (b) text-align (c) 20px (d) font-size
15. 15.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 110px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 40px wide (no margins).
16. 16.📦 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: 10px;
      border: 3px solid black;
      margin: 20px;
    }
17. 17.🌈 Which colour is rgb(255, 255, 255)? (a) magenta (b) white (c) black (d) red
18. 18.💪 Which flexbox property lines boxes up across? (a) flex-direction (b) display: flex (c) align-items (d) gap
19. 19.True or false: CSS puts a picture on a page. (a) False (b) True
20. 20.🔍 Which is the odd one out? (a) changes the text size (b) reacts to a button click (c) shows a pop-up message (d) changes the page live
21. 21.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 220px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 40px wide (no margins).
22. 22.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: center;
    }
    Inside are 3 boxes, each 40px wide (no margins).
23. 23.True or false: #top is a class selector. (a) False (b) True
24. 24.✍️ What is the selector in this CSS rule?
    li {
      padding: 8px;
      border: 2px solid;
    } (a) body (b) padding (c) 2px solid (d) li
25. 25.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      text-align: center;
      font-weight: bold;
    }
26. 26.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 220px;
      padding: 20px;
      border: 2px solid black;
      margin: 10px;
    }
27. 27.What does font-size do? (a) makes the text bold (b) makes letters bigger (c) centres a heading (d) colours behind the text
28. 28.⚖️ What colour is the text of this element?
    <p class="box" id="top">Hi</p>
    CSS:
    p { color: purple; }
    .box { color: red; } (a) purple (b) blue (c) red (d) orange
29. 29.💪 Which justify-content value puts boxes in the middle? (a) center (b) space-between (c) flex-end (d) flex-start
30. 30.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 12px;
      }
    } (a) No (b) Yes
31. 31.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) 600px or wider (c) turned off (d) 600px or narrower
32. 32.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 80px wide (no margins).
33. 33.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: center;
    }
    Inside are 2 boxes, each 40px wide (no margins).
34. 34.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 28px;
      }
    } (a) No (b) Yes
35. 35.✍️ What value is given to background-color in this rule?
    #top {
      background-color: yellow;
      color: red;
    } (a) 8px (b) 10px (c) yellow (d) background-color
36. 36.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
37. 37.✍️ What is the selector in this CSS rule?
    #top {
      margin: 10px;
      border: 2px solid;
    } (a) li (b) margin (c) 2px solid (d) #top
38. 38.🖌️ Where does the text sit on its line?
    h2 {
      text-align: left;
      color: blue;
      background-color: red;
      font-size: 16px;
    } (a) in the middle (b) on the left (c) on the right
39. 39.✍️ In color: blue; which part is the property? (a) color (b) ; (c) : (d) blue
40. 40.✍️ Which sign ends each CSS declaration? (a) , (b) . (c) ; (d) :

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