CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 294 · 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.True or false: padding is the line round the box. (a) True (b) False
2. 2.⚖️ What colour is the text of this element?
   <p class="star" id="logo">Hi</p>
   CSS:
   p { color: orange; }
   p { color: black; } (a) black (b) purple (c) blue (d) orange
3. 3.True or false: CSS adds space around boxes. (a) False (b) True
4. 4.True or false: #logo is an id selector. (a) False (b) True
5. 5.🎯 Can many elements share the same class? (a) No (b) Yes
6. 6.🎯 Which CSS selector matches this element?
   <h1 class="note" id="hero">Hello</h1> (a) h2 (b) .big (c) #top (d) .note
7. 7.🎨 Which attribute adds CSS inside one tag? (a) alt (b) style (c) src (d) href
8. 8.📦 In the box model, which part is the gap round content? (a) padding (b) border (c) content (d) margin
9. 9.✍️ How many declarations (property: value pairs) are in this rule?
   h1 {
     color: red;
     width: 300px;
     font-weight: bold;
     padding: 8px;
   }
10. 10.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      color: red;
      width: 300px;
      font-size: 20px;
    }
11. 11.🎯 Which element does the selector li style? (a) <p id="main"> (b) <div> (c) <span class="note"> (d) <li class="note">
12. 12.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 120px;
      padding: 20px;
      border: 1px solid black;
      margin: 0px;
    }
13. 13.What does text-align do? (a) colours behind the text (b) centres a heading (c) sets the letter colour (d) picks the font style
14. 14.🌈 Which colour is rgb(0, 255, 0)? (a) blue (b) bright green (c) black (d) white
15. 15.💪 Which justify-content value packs boxes at the end? (a) flex-end (b) space-between (c) center (d) flex-start
16. 16.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 130px;
      padding: 10px;
      border: 1px solid black;
      margin: 0px;
    }
17. 17.🌈 Which colour is #ffff00? (a) black (b) red (c) bright green (d) yellow
18. 18.⚖️ What colour is the text of this element?
    <p class="big" id="hero">Hi</p>
    CSS:
    #hero { color: purple; }
    #hero { color: yellow; } (a) black (b) yellow (c) purple (d) white
19. 19.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 140px;
      padding: 30px;
      border: 4px solid black;
      margin: 5px;
    }
20. 20.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 220px;
      padding: 10px;
      border: 3px solid black;
      margin: 20px;
    }
21. 21.🖌️ What colour is behind the letters?
    h1 {
      background-color: black;
      text-align: center;
      font-size: 24px;
      color: white;
    } (a) black (b) orange (c) white
22. 22.🌈 Which colour is rgb(0, 0, 255)? (a) black (b) blue (c) red (d) magenta
23. 23.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 330px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 100px wide (no margins).
24. 24.Which of these is the border? (a) the gap round content (b) the text or picture (c) the line round the box (d) space outside the border
25. 25.🔍 Which is the odd one out? (a) rounds box corners (b) counts down a timer (c) changes the page live (d) checks a quiz answer
26. 26.✍️ What is the selector in this CSS rule?
    .box {
      text-align: center;
      width: 300px;
      margin: 10px;
    } (a) text-align (b) h2 (c) .box (d) 300px
27. 27.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 180px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 80px wide (no margins).
28. 28.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
29. 29.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 170px;
      padding: 20px;
      border: 3px solid black;
      margin: 20px;
    }
30. 30.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
31. 31.📱 What does a media query check? (a) the screen width (b) the battery level (c) the page title (d) the time of day
32. 32.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
33. 33.💪 Which justify-content value packs boxes at the start? (a) space-between (b) flex-end (c) flex-start (d) center
34. 34.🔍 Which is the odd one out? (a) puts a picture on a page (b) rounds box corners (c) adds space around boxes (d) lays out the page
35. 35.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      margin: 10px;
      font-size: 20px;
      border: 2px solid;
    }
36. 36.Which of these does CSS do? (a) puts a picture on a page (b) changes the page live (c) makes a link (d) changes the text size
37. 37.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the title tag (c) the viewport meta tag (d) the br tag
38. 38.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 270px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 100px wide (no margins).
39. 39.True or false: #main is an element selector. (a) False (b) True
40. 40.🧩 Which language changes the text size? (a) JavaScript (b) CSS (c) HTML

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