CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 603 · 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.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) neither (c) the later one (d) the first one
2. 2.🖌️ Which CSS property picks the font style? (a) background-color (b) font-weight (c) color (d) font-family
3. 3.🎨 What does CSS stand for? (a) Cascading Style Sheets (b) Computer Style Sheets (c) Colourful Site Styles (d) Creative Sheet System
4. 4.🧩 Which language makes a link? (a) JavaScript (b) CSS (c) HTML
5. 5.🖌️ Which CSS property sets the letter colour? (a) color (b) text-align (c) font-weight (d) font-family
6. 6.🖌️ What colour is behind the letters?
   h1 {
     font-size: 28px;
     text-align: right;
     color: white;
     background-color: green;
   } (a) purple (b) green (c) white
7. 7.🖌️ What colour are the letters?
   h2 {
     text-align: center;
     background-color: green;
     font-size: 36px;
     color: black;
   } (a) green (b) blue (c) black
8. 8.What does text-align do? (a) sets the letter colour (b) centres a heading (c) colours behind the text (d) makes letters bigger
9. 9.True or false: padding is the line round the box. (a) True (b) False
10. 10.🌈 Which hex code is magenta? (a) #00ff00 (b) #ffffff (c) #ff00ff (d) #0000ff
11. 11.🌈 Which colour is #ff00ff? (a) bright green (b) magenta (c) blue (d) red
12. 12.💪 Which flexbox property spaces boxes along a row? (a) gap (b) justify-content (c) align-items (d) flex-direction
13. 13.What does justify-content: space-between do? (a) puts boxes in the middle (b) packs boxes at the start (c) equal gaps, none at ends (d) packs boxes at the end
14. 14.True or false: JavaScript reacts to a button click. (a) False (b) True
15. 15.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 270px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 60px wide (no margins).
16. 16.🧩 Which language changes the text size? (a) CSS (b) JavaScript (c) HTML
17. 17.🔍 Which is the odd one out? (a) checks a quiz answer (b) makes headings and lists (c) reacts to a button click (d) counts down a timer
18. 18.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    }
19. 19.True or false: body is an element selector. (a) True (b) False
20. 20.What does justify-content: center 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
21. 21.🎨 Which attribute adds CSS inside one tag? (a) alt (b) src (c) href (d) style
22. 22.✍️ In color: blue; which part is the property? (a) : (b) ; (c) color (d) blue
23. 23.🌈 Which colour is rgb(0, 0, 0)? (a) yellow (b) bright green (c) black (d) red
24. 24.✍️ Which sign goes between a property and its value? (a) ; (b) - (c) = (d) :
25. 25.🌈 Which hex code is white? (a) #00ff00 (b) #ff00ff (c) #ffffff (d) #00ffff
26. 26.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) green (c) blue (d) white
27. 27.🌈 Which colour is rgb(255, 0, 0)? (a) red (b) cyan (c) black (d) yellow
28. 28.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) center (c) flex-start (d) space-between
29. 29.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the br tag (c) the viewport meta tag (d) the title tag
30. 30.🌈 Which hex code is black? (a) #ff0000 (b) #000000 (c) #ffff00 (d) #00ff00
31. 31.🖌️ How big is the text, in px?
    p {
      text-align: left;
      background-color: white;
      font-size: 16px;
      color: yellow;
    }
32. 32.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 90px;
      padding: 5px;
      border: 5px solid black;
      margin: 20px;
    }
33. 33.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 130px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 60px wide (no margins).
34. 34.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 350px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 80px wide (no margins).
35. 35.📱 Responsive design means a page ___. (a) is only for laptops (b) fits every screen (c) has no pictures (d) never changes
36. 36.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
37. 37.💪 Which justify-content value equal gaps, none at ends? (a) center (b) flex-end (c) space-between (d) flex-start
38. 38.⚖️ What colour is the text of this element?
    <h1 class="star" id="logo">Hi</h1>
    CSS:
    .star { color: yellow; }
    .star { color: red; } (a) orange (b) purple (c) red (d) yellow
39. 39.Which of these is the content? (a) space inside the border (b) the line round the box (c) the text or picture (d) space outside the border
40. 40.🎯 Which CSS selector matches this element?
    <span class="big" id="end">Hello</span> (a) .end (b) #big (c) .big (d) #hero

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