CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 542 · 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 10px in this rule?
   .note {
     width: 300px;
     margin: 10px;
   } (a) margin (b) font-weight (c) 10px (d) padding
2. 2.💪 Which flexbox property turns on flexbox? (a) flex-direction (b) justify-content (c) gap (d) display: flex
3. 3.📱 The screen is 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 10px;
     }
   } (a) Yes (b) No
4. 4.🌈 In #560000 the red part is the hex number 56. What is it as a normal number?
5. 5.True or false: JavaScript puts a picture on a page. (a) True (b) False
6. 6.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 10px;
     }
   }
7. 7.💪 Which flexbox property lines boxes up across? (a) display: flex (b) gap (c) flex-direction (d) align-items
8. 8.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 210px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 50px wide (no margins).
9. 9.What does justify-content: flex-start do? (a) packs boxes at the end (b) packs boxes at the start (c) puts boxes in the middle (d) equal gaps, none at ends
10. 10.🖌️ How big is the text, in px?
    h1 {
      background-color: green;
      text-align: center;
      font-size: 28px;
      color: purple;
    }
11. 11.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
12. 12.True or false: CSS rounds box corners. (a) False (b) True
13. 13.✍️ Which property is set to 20px in this rule?
    li {
      text-align: center;
      font-size: 20px;
    } (a) font-size (b) background-color (c) 20px (d) text-align
14. 14.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 18px;
      }
    }
15. 15.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      margin: 10px;
      width: 300px;
      border: 2px solid;
    }
16. 16.🎯 What kind of selector is .big? (a) an id selector (b) a class selector (c) an element selector
17. 17.Which of these is margin? (a) the line round the box (b) space inside the border (c) the gap round content (d) space outside the border
18. 18.🖌️ What colour is behind the letters?
    h1 {
      text-align: right;
      font-size: 32px;
      background-color: blue;
      color: red;
    } (a) red (b) blue (c) white
19. 19.🌈 Which colour of light is strongest in rgb(234, 52, 96)? (a) blue (b) red (c) green
20. 20.✍️ Which property is set to italic in this rule?
    h1 {
      background-color: yellow;
      color: red;
      font-style: italic;
      border: 2px solid;
    } (a) color (b) italic (c) font-size (d) font-style
21. 21.✍️ What value is given to font-size in this rule?
    li {
      font-size: 20px;
      text-align: center;
    } (a) yellow (b) font-size (c) center (d) 20px
22. 22.🧩 Which language checks a quiz answer? (a) JavaScript (b) CSS (c) HTML
23. 23.What does justify-content: space-between do? (a) packs boxes at the end (b) puts boxes in the middle (c) packs boxes at the start (d) equal gaps, none at ends
24. 24.✍️ How does a CSS comment start? (a) // (b) /* (c) <!-- (d) #
25. 25.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      font-style: italic;
    }
26. 26.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 32px;
      }
    } (a) Yes (b) No
27. 27.🖌️ How big is the text, in px?
    p {
      text-align: right;
      font-size: 20px;
      background-color: red;
      color: green;
    }
28. 28.✍️ What is the selector in this CSS rule?
    h2 {
      text-align: center;
      width: 300px;
    } (a) h1 (b) 300px (c) text-align (d) h2
29. 29.🖌️ What colour is behind the letters?
    h1 {
      background-color: black;
      color: white;
      text-align: center;
      font-size: 28px;
    } (a) black (b) purple (c) white
30. 30.🖌️ Where does the text sit on its line?
    h1 {
      color: black;
      text-align: center;
      background-color: red;
      font-size: 16px;
    } (a) on the right (b) on the left (c) in the middle
31. 31.🎨 Which tag connects an outside CSS file? (a) <a> (b) <link> (c) <css> (d) <img>
32. 32.✍️ Which sign goes between a property and its value? (a) - (b) = (c) ; (d) :
33. 33.True or false: HTML gives the page structure. (a) False (b) True
34. 34.✍️ What value is given to border in this rule?
    h1 {
      border: 2px solid;
      font-size: 20px;
      padding: 8px;
    } (a) 2px solid (b) 300px (c) italic (d) border
35. 35.💪 Which flexbox property picks row or column? (a) align-items (b) gap (c) display: flex (d) flex-direction
36. 36.True or false: JavaScript shows a pop-up message. (a) True (b) False
37. 37.Which of these does JavaScript do? (a) makes headings and lists (b) adds space around boxes (c) sets colours and fonts (d) changes the page live
38. 38.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      padding: 8px;
    }
39. 39.✍️ Which sign ends each CSS declaration? (a) ; (b) . (c) : (d) ,
40. 40.📱 Responsive design means a page ___. (a) has no pictures (b) fits every screen (c) is only for laptops (d) never changes

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