CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 903 · 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.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 310px;
     justify-content: flex-end;
   }
   Inside are 4 boxes, each 60px wide (no margins).
2. 2.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 90px;
     padding: 25px;
     border: 1px solid black;
     margin: 0px;
   }
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: 290px;
     padding: 30px;
     border: 3px solid black;
     margin: 0px;
   }
4. 4.✍️ Which property is set to bold in this rule?
   h1 {
     margin: 10px;
     color: red;
     font-weight: bold;
   } (a) bold (b) width (c) font-weight (d) border
5. 5.📦 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: 25px;
     border: 1px solid black;
     margin: 15px;
   }
6. 6.📱 The screen is 1366px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 18px;
     }
   } (a) Yes (b) No
7. 7.⚖️ What colour is the text of this element?
   <h2 class="big" id="end">Hi</h2>
   CSS:
   h2 { color: green; }
   h2 { color: purple; } (a) purple (b) green (c) orange (d) blue
8. 8.✍️ How many declarations (property: value pairs) are in this rule?
   #top {
     margin: 10px;
   }
9. 9.🎯 Which CSS selector matches this element?
   <p class="box" id="main">Hello</p> (a) h1 (b) p (c) .main (d) .star
10. 10.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 190px;
      padding: 20px;
      border: 3px solid black;
      margin: 5px;
    }
11. 11.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
12. 12.🌈 Which colour is #0000ff? (a) white (b) bright green (c) red (d) blue
13. 13.💪 Which justify-content value packs boxes at the start? (a) center (b) flex-end (c) space-between (d) flex-start
14. 14.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 300px;
      justify-content: center;
    }
    Inside are 3 boxes, each 60px wide (no margins).
15. 15.🎯 Which element does the selector .red style? (a) <p class="star"> (b) <span class="red"> (c) <span id="red"> (d) <span class="box">
16. 16.✍️ What is the selector in this CSS rule?
    h2 {
      text-align: center;
      padding: 8px;
    } (a) h1 (b) 8px (c) text-align (d) h2
17. 17.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 280px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 60px wide (no margins).
18. 18.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      background-color: yellow;
      margin: 10px;
      font-weight: bold;
      font-size: 20px;
    }
19. 19.✍️ Which property is set to 2px solid in this rule?
    h1 {
      font-size: 20px;
      border: 2px solid;
    } (a) font-style (b) width (c) 2px solid (d) border
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: 230px;
      padding: 15px;
      border: 3px solid black;
      margin: 20px;
    }
21. 21.⚖️ 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
22. 22.🎯 Which element does the selector h2 style? (a) <div class="box"> (b) <span id="end"> (c) <li> (d) <h2 class="box">
23. 23.✍️ Which sign goes between a property and its value? (a) ; (b) = (c) : (d) -
24. 24.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 420px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 100px wide (no margins).
25. 25.🌈 Which hex code is blue? (a) #000000 (b) #0000ff (c) #00ffff (d) #ff00ff
26. 26.🖌️ What colour are the letters?
    p {
      text-align: center;
      font-size: 28px;
      color: blue;
      background-color: yellow;
    } (a) orange (b) blue (c) yellow
27. 27.Which of these is the content? (a) space inside the border (b) the line round the box (c) space outside the border (d) the text or picture
28. 28.Which of these is padding? (a) space outside the border (b) the line round the box (c) space inside the border (d) the text or picture
29. 29.🌈 Which colour of light is strongest in rgb(206, 46, 18)? (a) green (b) blue (c) red
30. 30.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the hr tag (c) the br tag (d) the title tag
31. 31.Which of these is padding? (a) a solid or dotted edge (b) the gap round content (c) space outside the border (d) the text or picture
32. 32.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 350px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 50px wide (no margins).
33. 33.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 280px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 40px wide (no margins).
34. 34.What does font-size do? (a) picks the font style (b) colours behind the text (c) sets the letter colour (d) makes letters bigger
35. 35.⚖️ What colour is the text of this element?
    <h2 class="box" id="intro">Hi</h2>
    CSS:
    h2 { color: blue; }
    .box { color: purple; } (a) blue (b) purple (c) black (d) green
36. 36.📱 What does a media query check? (a) the battery level (b) the page title (c) the screen width (d) the time of day
37. 37.True or false: .card is an id selector. (a) True (b) False
38. 38.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 140px;
      padding: 25px;
      border: 3px solid black;
      margin: 20px;
    }
39. 39.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 200px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 80px wide (no margins).
40. 40.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      width: 300px;
      font-weight: bold;
    }

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