CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 805 · 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 is the content? (a) the text or picture (b) a solid or dotted edge (c) the gap to other boxes (d) the gap round content
2. 2.True or false: margin is a solid or dotted edge. (a) False (b) True
3. 3.🖌️ How big is the text, in px?
   h1 {
     color: blue;
     text-align: right;
     font-size: 16px;
     background-color: orange;
   }
4. 4.💪 Which flexbox property spaces boxes along a row? (a) justify-content (b) flex-direction (c) align-items (d) gap
5. 5.💪 Which flexbox property sets space between boxes? (a) flex-direction (b) justify-content (c) align-items (d) gap
6. 6.⚖️ 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
7. 7.📦 In the box model, which part is a solid or dotted edge? (a) border (b) content (c) padding (d) margin
8. 8.✍️ What value is given to background-color in this rule?
   .box {
     font-size: 20px;
     background-color: yellow;
   } (a) background-color (b) yellow (c) 10px (d) 8px
9. 9.🧩 Which language gives the page structure? (a) HTML (b) JavaScript (c) CSS
10. 10.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 20px;
      }
    }
11. 11.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 150px;
      padding: 30px;
      border: 1px solid black;
      margin: 20px;
    }
12. 12.🖌️ Which CSS property sets the letter colour? (a) background-color (b) font-family (c) font-weight (d) color
13. 13.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 200px;
      padding: 30px;
      border: 4px solid black;
      margin: 0px;
    }
14. 14.⚖️ What colour is the text of this element?
    <h2 class="note" id="hero">Hi</h2>
    CSS:
    .note { color: orange; }
    #hero { color: white; }
    h2 { color: yellow; } (a) orange (b) green (c) white (d) yellow
15. 15.⚖️ What colour is the text of this element?
    <h2 class="box" id="end">Hi</h2>
    CSS:
    #end { color: yellow; }
    #end { color: purple; } (a) blue (b) purple (c) yellow (d) black
16. 16.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
17. 17.🌈 Which colour is rgb(255, 255, 0)? (a) white (b) yellow (c) bright green (d) red
18. 18.🌈 Which hex code is magenta? (a) #ff0000 (b) #0000ff (c) #000000 (d) #ff00ff
19. 19.✍️ Which sign goes between a property and its value? (a) - (b) = (c) ; (d) :
20. 20.✍️ What value is given to margin in this rule?
    p {
      margin: 10px;
      background-color: yellow;
      font-weight: bold;
      width: 300px;
    } (a) 10px (b) bold (c) margin (d) 8px
21. 21.💪 Which justify-content value equal gaps, none at ends? (a) space-between (b) flex-start (c) flex-end (d) center
22. 22.What does justify-content: flex-end do? (a) packs boxes at the start (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the end
23. 23.🌈 Which hex code is white? (a) #0000ff (b) #ff00ff (c) #ff0000 (d) #ffffff
24. 24.🌈 In #0000bf the blue part is the hex number bf. What is it as a normal number?
25. 25.🌈 Which colour is #ffff00? (a) yellow (b) cyan (c) red (d) magenta
26. 26.📱 Responsive design means a page ___. (a) fits every screen (b) is only for laptops (c) has no pictures (d) never changes
27. 27.✍️ What value is given to color in this rule?
    p {
      width: 300px;
      background-color: yellow;
      color: red;
      padding: 8px;
    } (a) color (b) red (c) 20px (d) center
28. 28.⚖️ What colour is the text of this element?
    <h1 class="star" id="hero">Hi</h1>
    CSS:
    #hero { color: black; }
    .star { color: red; }
    h1 { color: purple; } (a) black (b) blue (c) purple (d) red
29. 29.🖌️ What colour is behind the letters?
    h2 {
      text-align: center;
      color: purple;
      font-size: 24px;
      background-color: white;
    } (a) white (b) black (c) purple
30. 30.💪 Which justify-content value puts boxes in the middle? (a) center (b) space-between (c) flex-end (d) flex-start
31. 31.🎯 Can many elements share the same class? (a) Yes (b) No
32. 32.🎨 Which attribute adds CSS inside one tag? (a) href (b) alt (c) style (d) src
33. 33.Which of these is the border? (a) space inside the border (b) space outside the border (c) the gap to other boxes (d) a solid or dotted edge
34. 34.Which of these is margin? (a) a solid or dotted edge (b) space outside the border (c) the text or picture (d) the line round the box
35. 35.🎯 Which sign starts a class selector? (a) & (b) # (c) @ (d) .
36. 36.🎯 Which CSS selector matches this element?
    <h2 class="red" id="hero">Hello</h2> (a) #red (b) li (c) #top (d) #hero
37. 37.🧩 Which language shows a pop-up message? (a) CSS (b) HTML (c) JavaScript
38. 38.💪 Which flexbox property turns on flexbox? (a) align-items (b) gap (c) justify-content (d) display: flex
39. 39.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Creative Sheet System (c) Colourful Site Styles (d) Cascading Style Sheets
40. 40.🔍 Which is the odd one out? (a) checks a quiz answer (b) makes headings and lists (c) reacts to a button click (d) changes the page live

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