CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 463 · 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 colour is #ffff00? (a) white (b) yellow (c) bright green (d) red
2. 2.🎯 Which element does the selector #hero style? (a) <h2 id="hero"> (b) <li class="menu"> (c) <h2 id="top"> (d) <h2 class="hero">
3. 3.🌈 Which colour is #ff0000? (a) yellow (b) red (c) blue (d) bright green
4. 4.🌈 Which colour of light is strongest in rgb(39, 168, 23)? (a) red (b) blue (c) green
5. 5.🖌️ Where does the text sit on its line?
   h1 {
     color: purple;
     text-align: center;
     font-size: 24px;
     background-color: orange;
   } (a) in the middle (b) on the right (c) on the left
6. 6.✍️ Which property is set to bold in this rule?
   h2 {
     font-style: italic;
     font-weight: bold;
   } (a) font-weight (b) bold (c) width (d) border
7. 7.✍️ Which sign goes between a property and its value? (a) - (b) ; (c) : (d) =
8. 8.💪 Which flexbox property picks row or column? (a) display: flex (b) align-items (c) justify-content (d) flex-direction
9. 9.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) flex-start (c) center (d) flex-end
10. 10.Which of these is the border? (a) the line round the box (b) space outside the border (c) the gap round content (d) the text or picture
11. 11.🌈 Which colour is rgb(0, 255, 255)? (a) white (b) yellow (c) cyan (d) blue
12. 12.💪 Which flexbox property lines boxes up across? (a) align-items (b) display: flex (c) flex-direction (d) justify-content
13. 13.True or false: the content is space outside the border. (a) False (b) True
14. 14.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 200px;
      padding: 25px;
      border: 5px solid black;
      margin: 15px;
    }
15. 15.🎯 Which CSS selector matches this element?
    <h1 class="red" id="top">Hello</h1> (a) h1 (b) h2 (c) #red (d) .box
16. 16.🎯 How many elements on a page should have the same id? (a) 2 (b) 5 (c) 1 (d) any number
17. 17.📱 What does a media query check? (a) the battery level (b) the screen width (c) the time of day (d) the page title
18. 18.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the viewport meta tag (c) the br tag (d) the hr tag
19. 19.True or false: .big is an id selector. (a) False (b) True
20. 20.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 26px;
      }
    }
21. 21.🖌️ What colour is behind the letters?
    p {
      color: blue;
      background-color: purple;
      font-size: 24px;
      text-align: right;
    } (a) blue (b) purple (c) white
22. 22.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 190px;
      padding: 20px;
      border: 4px solid black;
      margin: 5px;
    }
23. 23.🧩 Which language makes a form box? (a) JavaScript (b) HTML (c) CSS
24. 24.💪 Which flexbox property turns on flexbox? (a) align-items (b) gap (c) display: flex (d) flex-direction
25. 25.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 80px;
      padding: 10px;
      border: 4px solid black;
      margin: 5px;
    }
26. 26.✍️ What value is given to font-size in this rule?
    p {
      font-size: 20px;
      text-align: center;
      background-color: yellow;
      width: 300px;
    } (a) center (b) 20px (c) yellow (d) font-size
27. 27.Which of these is the border? (a) space outside the border (b) space inside the border (c) the text or picture (d) a solid or dotted edge
28. 28.⚖️ What colour is the text of this element?
    <p class="big" id="intro">Hi</p>
    CSS:
    .big { color: green; }
    #intro { color: purple; } (a) black (b) green (c) white (d) purple
29. 29.✍️ Which sign ends each CSS declaration? (a) ; (b) . (c) , (d) :
30. 30.True or false: #logo is a class selector. (a) False (b) True
31. 31.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 140px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 40px wide (no margins).
32. 32.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 16px;
      }
    }
33. 33.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 110px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 50px wide (no margins).
34. 34.✍️ What value is given to width in this rule?
    .note {
      width: 300px;
      font-style: italic;
    } (a) 300px (b) red (c) width (d) italic
35. 35.What does justify-content: flex-end do? (a) packs boxes at the start (b) packs boxes at the end (c) equal gaps, none at ends (d) puts boxes in the middle
36. 36.✍️ What value is given to padding in this rule?
    .note {
      border: 2px solid;
      padding: 8px;
      font-style: italic;
    } (a) 2px solid (b) padding (c) bold (d) 8px
37. 37.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 24px;
      }
    } (a) No (b) Yes
38. 38.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 18px;
      }
    }
39. 39.📦 In the box model, which part is space inside the border? (a) content (b) border (c) margin (d) padding
40. 40.🖌️ Which CSS property picks the font style? (a) font-size (b) font-weight (c) font-family (d) text-align

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