CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 56 · 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 of these does HTML do? (a) reacts to a button click (b) checks a quiz answer (c) changes the text size (d) gives the page structure
2. 2.🖌️ Which CSS property sets the letter colour? (a) color (b) font-size (c) font-family (d) background-color
3. 3.💪 Which justify-content value packs boxes at the end? (a) flex-start (b) center (c) space-between (d) flex-end
4. 4.True or false: CSS makes headings and lists. (a) True (b) False
5. 5.💪 Which justify-content value equal gaps, none at ends? (a) center (b) space-between (c) flex-end (d) flex-start
6. 6.Which of these is the content? (a) the gap round content (b) space inside the border (c) a solid or dotted edge (d) the text or picture
7. 7.💪 Which flexbox property turns on flexbox? (a) justify-content (b) align-items (c) display: flex (d) flex-direction
8. 8.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 150px;
     padding: 15px;
     border: 2px solid black;
     margin: 15px;
   }
9. 9.True or false: li is an element selector. (a) True (b) False
10. 10.🖌️ What colour are the letters?
    li {
      text-align: left;
      background-color: purple;
      color: blue;
      font-size: 12px;
    } (a) black (b) purple (c) blue
11. 11.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
12. 12.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
13. 13.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) red (c) green (d) black
14. 14.🎯 What kind of selector is #main? (a) an element selector (b) an id selector (c) a class selector
15. 15.📦 In the box model, which part is space outside the border? (a) content (b) padding (c) margin (d) border
16. 16.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) packs boxes at the start (c) puts boxes in the middle (d) packs boxes at the end
17. 17.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 16px;
      }
    } (a) Yes (b) No
18. 18.🎯 Which sign starts a class selector? (a) @ (b) & (c) . (d) #
19. 19.True or false: the border is the gap round content. (a) True (b) False
20. 20.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 8px;
      }
    }
21. 21.📦 In the box model, which part is a solid or dotted edge? (a) content (b) padding (c) border (d) margin
22. 22.📱 Responsive design means a page ___. (a) never changes (b) is only for laptops (c) has no pictures (d) fits every screen
23. 23.✍️ How does a CSS comment start? (a) <!-- (b) /* (c) // (d) #
24. 24.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 8px;
      }
    } (a) Yes (b) No
25. 25.What does justify-content: flex-end do? (a) equal gaps, none at ends (b) packs boxes at the start (c) puts boxes in the middle (d) packs boxes at the end
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: 100px;
      padding: 20px;
      border: 2px solid black;
      margin: 20px;
    }
27. 27.📦 In the box model, which part is the text or picture? (a) border (b) margin (c) content (d) padding
28. 28.🎨 What does CSS stand for? (a) Creative Sheet System (b) Colourful Site Styles (c) Computer Style Sheets (d) Cascading Style Sheets
29. 29.Which of these is the border? (a) space inside the border (b) the gap round content (c) the line round the box (d) the text or picture
30. 30.🖌️ How big is the text, in px?
    h2 {
      color: white;
      background-color: red;
      font-size: 36px;
      text-align: center;
    }
31. 31.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 16px;
      }
    }
32. 32.True or false: JavaScript adds space around boxes. (a) True (b) False
33. 33.⚖️ What colour is the text of this element?
    <h1 class="note" id="intro">Hi</h1>
    CSS:
    #intro { color: black; }
    h1 { color: purple; } (a) purple (b) black (c) red (d) blue
34. 34.🎯 Which CSS selector matches this element?
    <p class="big" id="top">Hello</p> (a) .red (b) h1 (c) #top (d) #big
35. 35.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      background-color: yellow;
    }
36. 36.🧩 Which language makes a link? (a) HTML (b) JavaScript (c) CSS
37. 37.🌈 Which colour is #ff0000? (a) cyan (b) blue (c) red (d) black
38. 38.🎯 What kind of selector is #hero? (a) an element selector (b) a class selector (c) an id selector
39. 39.🌈 Which colour is #00ffff? (a) yellow (b) cyan (c) magenta (d) blue
40. 40.✍️ What is the selector in this CSS rule?
    h2 {
      text-align: center;
      background-color: yellow;
      width: 300px;
      padding: 8px;
    } (a) h2 (b) h1 (c) text-align (d) yellow

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