CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 104 · 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 element does the selector li style? (a) <p id="intro"> (b) <span class="star"> (c) <li class="star"> (d) <div>
2. 2.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 200px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 40px wide (no margins).
3. 3.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 250px;
     padding: 10px;
     border: 3px solid black;
     margin: 20px;
   }
4. 4.⚖️ What colour is the text of this element?
   <h1 class="big" id="logo">Hi</h1>
   CSS:
   #logo { color: green; }
   .big { color: purple; }
   h1 { color: yellow; } (a) yellow (b) green (c) purple (d) black
5. 5.⚖️ What colour is the text of this element?
   <h1 class="big" id="hero">Hi</h1>
   CSS:
   #hero { color: yellow; }
   .big { color: white; } (a) orange (b) blue (c) white (d) yellow
6. 6.📦 In the box model, which part is the gap round content? (a) padding (b) content (c) border (d) margin
7. 7.⚖️ What colour is the text of this element?
   <h2 class="big" id="intro">Hi</h2>
   CSS:
   h2 { color: orange; }
   h2 { color: red; } (a) orange (b) yellow (c) black (d) red
8. 8.🌈 Which hex code is magenta? (a) #ff00ff (b) #000000 (c) #ffff00 (d) #00ffff
9. 9.✍️ Which property is set to bold in this rule?
   h2 {
     font-weight: bold;
     padding: 8px;
   } (a) border (b) width (c) bold (d) font-weight
10. 10.🎯 Which CSS selector matches this element?
    <span class="note" id="end">Hello</span> (a) #hero (b) p (c) .note (d) .big
11. 11.True or false: .star is an element selector. (a) True (b) False
12. 12.🌈 Which colour is rgb(0, 0, 0)? (a) red (b) blue (c) black (d) cyan
13. 13.True or false: JavaScript gives the page structure. (a) False (b) True
14. 14.💪 Which flexbox property spaces boxes along a row? (a) gap (b) flex-direction (c) justify-content (d) align-items
15. 15.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 20px;
      }
    }
16. 16.🖌️ What colour are the letters?
    li {
      font-size: 16px;
      text-align: right;
      background-color: green;
      color: purple;
    } (a) red (b) green (c) purple
17. 17.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      text-align: center;
    }
18. 18.🌈 Which colour is #00ff00? (a) cyan (b) bright green (c) blue (d) yellow
19. 19.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 240px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 80px wide (no margins).
20. 20.🌈 Which colour is rgb(0, 255, 0)? (a) red (b) yellow (c) bright green (d) white
21. 21.Which of these is margin? (a) space inside the border (b) the line round the box (c) a solid or dotted edge (d) space outside the border
22. 22.✍️ In color: blue; which part is the property? (a) : (b) color (c) ; (d) blue
23. 23.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 160px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 40px wide (no margins).
24. 24.✍️ Which sign goes between a property and its value? (a) - (b) = (c) ; (d) :
25. 25.✍️ How does a CSS comment start? (a) <!-- (b) // (c) # (d) /*
26. 26.🌈 In #009200 the green part is the hex number 92. What is it as a normal number?
27. 27.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the first one (c) the shorter one (d) the later one
28. 28.📦 In the box model, which part is space inside the border? (a) padding (b) content (c) border (d) margin
29. 29.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 280px;
      padding: 10px;
      border: 5px solid black;
      margin: 0px;
    }
30. 30.🖌️ What colour is behind the letters?
    li {
      text-align: center;
      background-color: purple;
      font-size: 32px;
      color: blue;
    } (a) blue (b) black (c) purple
31. 31.🎯 Which element does the selector .star style? (a) <h2 class="menu"> (b) <li class="note"> (c) <h2 class="star"> (d) <h2 id="star">
32. 32.🖌️ Which CSS property centres a heading? (a) text-align (b) font-size (c) color (d) font-weight
33. 33.✍️ Which property is set to 8px in this rule?
    p {
      font-size: 20px;
      padding: 8px;
    } (a) border (b) 8px (c) padding (d) font-weight
34. 34.🌈 Which hex code is yellow? (a) #ff00ff (b) #00ff00 (c) #000000 (d) #ffff00
35. 35.🧩 Which language makes headings and lists? (a) HTML (b) CSS (c) JavaScript
36. 36.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      text-align: center;
      color: red;
      font-style: italic;
    }
37. 37.✍️ What is the selector in this CSS rule?
    li {
      font-size: 20px;
      text-align: center;
    } (a) center (b) body (c) li (d) font-size
38. 38.True or false: margin is space outside the border. (a) False (b) True
39. 39.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 280px;
      padding: 15px;
      border: 2px solid black;
      margin: 15px;
    }
40. 40.🌈 Which colour is rgb(255, 0, 0)? (a) black (b) white (c) red (d) magenta

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