CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 988 · 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: 250px;
     justify-content: flex-end;
   }
   Inside are 4 boxes, each 50px wide (no margins).
2. 2.🔍 Which is the odd one out? (a) makes a form box (b) makes a link (c) gives the page structure (d) sets colours and fonts
3. 3.✍️ What value is given to font-style in this rule?
   #top {
     font-size: 20px;
     font-style: italic;
   } (a) font-style (b) 20px (c) italic (d) red
4. 4.🎯 Which element does the selector .star style? (a) <div class="note"> (b) <li class="star"> (c) <li id="star"> (d) <li class="menu">
5. 5.✍️ How many declarations (property: value pairs) are in this rule?
   h1 {
     font-size: 20px;
     background-color: yellow;
     padding: 8px;
   }
6. 6.🖌️ What colour are the letters?
   p {
     background-color: orange;
     text-align: center;
     color: red;
     font-size: 12px;
   } (a) white (b) red (c) orange
7. 7.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 90px;
     padding: 5px;
     border: 4px solid black;
     margin: 10px;
   }
8. 8.🎯 Which CSS selector matches this element?
   <span class="big" id="top">Hello</span> (a) .red (b) p (c) #big (d) #top
9. 9.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 50px;
     padding: 5px;
     border: 2px solid black;
     margin: 15px;
   }
10. 10.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      color: red;
      margin: 10px;
    }
11. 11.🖌️ What colour is behind the letters?
    h2 {
      text-align: right;
      color: yellow;
      background-color: blue;
      font-size: 20px;
    } (a) blue (b) yellow (c) black
12. 12.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 1000 (c) 255 (d) 99
13. 13.🎨 Which attribute adds CSS inside one tag? (a) src (b) style (c) href (d) alt
14. 14.True or false: HTML changes the text size. (a) True (b) False
15. 15.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 100px;
      padding: 25px;
      border: 4px solid black;
      margin: 0px;
    }
16. 16.🌈 Which colour is rgb(255, 0, 0)? (a) bright green (b) white (c) yellow (d) red
17. 17.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
18. 18.⚖️ What colour is the text of this element?
    <h1 class="star" id="main">Hi</h1>
    CSS:
    .star { color: green; }
    #main { color: yellow; } (a) purple (b) yellow (c) black (d) green
19. 19.True or false: JavaScript reacts to a button click. (a) False (b) True
20. 20.🌈 Which hex code is yellow? (a) #ff0000 (b) #00ff00 (c) #ffffff (d) #ffff00
21. 21.🖌️ What colour are the letters?
    h1 {
      background-color: blue;
      color: yellow;
      text-align: left;
      font-size: 12px;
    } (a) black (b) yellow (c) blue
22. 22.📦 In the box model, which part is the gap to other boxes? (a) content (b) padding (c) border (d) margin
23. 23.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Creative Sheet System (c) Colourful Site Styles (d) Cascading Style Sheets
24. 24.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 6px;
      }
    } (a) Yes (b) No
25. 25.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      width: 300px;
      font-style: italic;
      background-color: yellow;
    }
26. 26.⚖️ Which selector is the strongest? (a) an element selector (b) an id selector (c) a class selector
27. 27.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 260px;
      padding: 10px;
      border: 3px solid black;
      margin: 10px;
    }
28. 28.What does text-align do? (a) colours behind the text (b) picks the font style (c) makes letters bigger (d) centres a heading
29. 29.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
30. 30.🎯 Which element does the selector #logo style? (a) <li class="note"> (b) <h2 id="end"> (c) <h2 class="logo"> (d) <h2 id="logo">
31. 31.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 90px;
      padding: 20px;
      border: 2px solid black;
      margin: 0px;
    }
32. 32.💪 Which justify-content value packs boxes at the end? (a) flex-start (b) flex-end (c) center (d) space-between
33. 33.True or false: padding is a solid or dotted edge. (a) True (b) False
34. 34.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
35. 35.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 290px;
      justify-content: center;
    }
    Inside are 3 boxes, each 50px wide (no margins).
36. 36.What does font-family do? (a) centres a heading (b) makes the text bold (c) picks the font style (d) colours behind the text
37. 37.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 28px;
      }
    }
38. 38.✍️ Which property is set to 10px in this rule?
    .note {
      text-align: center;
      font-style: italic;
      margin: 10px;
      padding: 8px;
    } (a) padding (b) 10px (c) font-weight (d) margin
39. 39.⚖️ What colour is the text of this element?
    <h1 class="note" id="top">Hi</h1>
    CSS:
    .note { color: black; }
    #top { color: yellow; } (a) purple (b) black (c) yellow (d) white
40. 40.What does justify-content: space-between do? (a) equal gaps, none at ends (b) packs boxes at the end (c) puts boxes in the middle (d) packs boxes at the start

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