CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 573 · 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.📦 In the box model, which part is the gap round content? (a) margin (b) padding (c) content (d) border
2. 2.✍️ In color: blue; which part is the property? (a) blue (b) : (c) ; (d) color
3. 3.🖌️ Where does the text sit on its line?
   h1 {
     text-align: right;
     font-size: 36px;
     background-color: orange;
     color: yellow;
   } (a) on the left (b) on the right (c) in the middle
4. 4.⚖️ 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
5. 5.📦 In the box model, which part is a solid or dotted edge? (a) padding (b) content (c) border (d) margin
6. 6.🖌️ Which CSS property makes the text bold? (a) font-weight (b) font-family (c) text-align (d) background-color
7. 7.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
8. 8.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 24px;
     }
   }
9. 9.True or false: CSS gives the page structure. (a) True (b) False
10. 10.🎯 Can many elements share the same class? (a) Yes (b) No
11. 11.True or false: CSS shows a pop-up message. (a) True (b) False
12. 12.✍️ Which sign ends each CSS declaration? (a) ; (b) , (c) . (d) :
13. 13.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
14. 14.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 230px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 80px wide (no margins).
15. 15.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
16. 16.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) green (c) blue (d) red
17. 17.🎯 Which CSS selector matches this element?
    <h2 class="menu" id="end">Hello</h2> (a) #hero (b) h2 (c) .note (d) #menu
18. 18.⚖️ What colour is the text of this element?
    <p class="box" id="hero">Hi</p>
    CSS:
    .box { color: green; }
    .box { color: purple; } (a) orange (b) purple (c) green (d) red
19. 19.📦 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: 15px;
      border: 1px solid black;
      margin: 15px;
    }
20. 20.⚖️ What colour is the text of this element?
    <h1 class="note" id="top">Hi</h1>
    CSS:
    .note { color: blue; }
    #top { color: orange; } (a) orange (b) white (c) green (d) blue
21. 21.True or false: CSS changes the text size. (a) True (b) False
22. 22.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the hr tag (c) the viewport meta tag (d) the br tag
23. 23.🌈 In #0000f2 the blue part is the hex number f2. What is it as a normal number?
24. 24.True or false: the border is the line round the box. (a) False (b) True
25. 25.Which of these does HTML do? (a) gives the page structure (b) checks a quiz answer (c) shows a pop-up message (d) lays out the page
26. 26.🎯 What kind of selector is #hero? (a) an id selector (b) an element selector (c) a class selector
27. 27.🖌️ Where does the text sit on its line?
    h1 {
      font-size: 24px;
      text-align: center;
      background-color: purple;
      color: orange;
    } (a) in the middle (b) on the left (c) on the right
28. 28.🎯 Which element does the selector #end style? (a) <h1 class="red"> (b) <p class="end"> (c) <p id="end"> (d) <p id="hero">
29. 29.Which of these is the content? (a) a solid or dotted edge (b) space outside the border (c) space inside the border (d) the text or picture
30. 30.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      font-size: 20px;
    }
31. 31.⚖️ What colour is the text of this element?
    <h2 class="note" id="logo">Hi</h2>
    CSS:
    h2 { color: green; }
    h2 { color: black; } (a) purple (b) black (c) blue (d) green
32. 32.🎯 Which element does the selector .box style? (a) <p class="menu"> (b) <span class="box"> (c) <span class="star"> (d) <span id="box">
33. 33.🎯 What kind of selector is #logo? (a) an element selector (b) an id selector (c) a class selector
34. 34.🖌️ Which CSS property makes letters bigger? (a) text-align (b) font-family (c) background-color (d) font-size
35. 35.🔍 Which is the odd one out? (a) gives the page structure (b) puts a picture on a page (c) makes a link (d) reacts to a button click
36. 36.✍️ Which property is set to 10px in this rule?
    h2 {
      font-style: italic;
      margin: 10px;
    } (a) padding (b) margin (c) 10px (d) font-weight
37. 37.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
38. 38.Which of these is the border? (a) the text or picture (b) the line round the box (c) space inside the border (d) the gap to other boxes
39. 39.Which of these does HTML do? (a) makes a form box (b) reacts to a button click (c) changes the page live (d) shows a pop-up message
40. 40.🌈 Which colour is rgb(255, 255, 0)? (a) bright green (b) cyan (c) blue (d) yellow

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