CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 971 · 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 turns on flexbox? (a) justify-content (b) gap (c) align-items (d) display: flex
2. 2.📦 In the box model, which part is space inside the border? (a) padding (b) margin (c) content (d) border
3. 3.🖌️ What colour is behind the letters?
   li {
     font-size: 36px;
     color: blue;
     background-color: purple;
     text-align: center;
   } (a) purple (b) blue (c) white
4. 4.✍️ What is the selector in this CSS rule?
   li {
     padding: 8px;
     background-color: yellow;
   } (a) body (b) li (c) padding (d) yellow
5. 5.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) turned off (c) 800px or narrower (d) exactly 100px
6. 6.✍️ How many declarations (property: value pairs) are in this rule?
   body {
     width: 300px;
     color: red;
   }
7. 7.✍️ Which property is set to bold in this rule?
   p {
     font-weight: bold;
     width: 300px;
   } (a) bold (b) font-weight (c) border (d) width
8. 8.✍️ Which property is set to 10px in this rule?
   p {
     border: 2px solid;
     text-align: center;
     margin: 10px;
   } (a) font-weight (b) margin (c) padding (d) 10px
9. 9.🎯 What kind of selector is h1? (a) an id selector (b) a class selector (c) an element selector
10. 10.What does justify-content: flex-start do? (a) packs boxes at the start (b) equal gaps, none at ends (c) packs boxes at the end (d) puts boxes in the middle
11. 11.🖌️ Where does the text sit on its line?
    li {
      font-size: 40px;
      color: blue;
      background-color: orange;
      text-align: center;
    } (a) on the left (b) on the right (c) in the middle
12. 12.Which of these does JavaScript do? (a) makes headings and lists (b) changes the text size (c) rounds box corners (d) shows a pop-up message
13. 13.🎯 Can many elements share the same class? (a) No (b) Yes
14. 14.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 40px wide (no margins).
15. 15.🌈 Which colour is #0000ff? (a) blue (b) cyan (c) red (d) bright green
16. 16.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) space-between (c) flex-start (d) center
17. 17.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 14px;
      }
    }
18. 18.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    }
19. 19.Which of these does HTML do? (a) changes the text size (b) sets colours and fonts (c) makes headings and lists (d) lays out the page
20. 20.🎯 What kind of selector is .big? (a) an id selector (b) an element selector (c) a class selector
21. 21.🌈 In #002a00 the green part is the hex number 2a. What is it as a normal number?
22. 22.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
23. 23.💪 Which flexbox property spaces boxes along a row? (a) gap (b) justify-content (c) flex-direction (d) align-items
24. 24.🖌️ What colour are the letters?
    p {
      color: blue;
      background-color: black;
      text-align: center;
      font-size: 28px;
    } (a) black (b) purple (c) blue
25. 25.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
26. 26.🖌️ Which CSS property makes letters bigger? (a) background-color (b) color (c) text-align (d) font-size
27. 27.🧩 Which language shows a pop-up message? (a) JavaScript (b) HTML (c) CSS
28. 28.🌈 Which colour is #ff0000? (a) red (b) bright green (c) magenta (d) blue
29. 29.⚖️ What colour is the text of this element?
    <h2 class="box" id="intro">Hi</h2>
    CSS:
    #intro { color: blue; }
    #intro { color: black; } (a) blue (b) black (c) red (d) yellow
30. 30.🌈 Which colour of light is strongest in rgb(27, 232, 13)? (a) red (b) blue (c) green
31. 31.What does justify-content: space-between 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
32. 32.True or false: padding is space outside the border. (a) False (b) True
33. 33.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 110px;
      padding: 25px;
      border: 4px solid black;
      margin: 10px;
    }
34. 34.🎯 Which sign starts an id selector? (a) . (b) & (c) # (d) @
35. 35.✍️ What is the selector in this CSS rule?
    h1 {
      width: 300px;
      margin: 10px;
    } (a) 10px (b) width (c) p (d) h1
36. 36.📱 Responsive design means a page ___. (a) is only for laptops (b) never changes (c) fits every screen (d) has no pictures
37. 37.True or false: #logo is an element selector. (a) True (b) False
38. 38.🌈 In #00001f the blue part is the hex number 1f. What is it as a normal number?
39. 39.🌈 Which colour is #ffffff? (a) red (b) bright green (c) white (d) cyan
40. 40.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      color: red;
      text-align: center;
      font-style: italic;
      padding: 8px;
    }

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