CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 608 · 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 colour is #ffffff? (a) yellow (b) cyan (c) white (d) magenta
2. 2.🎯 What kind of selector is .star? (a) a class selector (b) an element selector (c) an id selector
3. 3.📱 The screen is 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 24px;
     }
   } (a) No (b) Yes
4. 4.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 50px;
     padding: 20px;
     border: 4px solid black;
     margin: 15px;
   }
5. 5.🖌️ Where does the text sit on its line?
   p {
     text-align: center;
     color: white;
     font-size: 24px;
     background-color: black;
   } (a) in the middle (b) on the right (c) on the left
6. 6.🎯 Which element does the selector p style? (a) <h1> (b) <h2 class="big"> (c) <li id="intro"> (d) <p class="big">
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: 70px;
     padding: 5px;
     border: 3px solid black;
     margin: 20px;
   }
8. 8.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
9. 9.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 280px;
     justify-content: center;
   }
   Inside are 4 boxes, each 50px wide (no margins).
10. 10.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 40px wide (no margins).
11. 11.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 100px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 40px wide (no margins).
12. 12.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 110px;
      padding: 25px;
      border: 2px solid black;
      margin: 20px;
    }
13. 13.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 250px;
      padding: 25px;
      border: 1px solid black;
      margin: 0px;
    }
14. 14.What does font-family do? (a) picks the font style (b) centres a heading (c) makes the text bold (d) makes letters bigger
15. 15.✍️ What value is given to font-weight in this rule?
    h2 {
      background-color: yellow;
      width: 300px;
      margin: 10px;
      font-weight: bold;
    } (a) font-weight (b) 2px solid (c) bold (d) 300px
16. 16.✍️ What is the selector in this CSS rule?
    .box {
      color: red;
      font-size: 20px;
      margin: 10px;
    } (a) 20px (b) color (c) .box (d) h2
17. 17.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 210px;
      padding: 5px;
      border: 2px solid black;
      margin: 20px;
    }
18. 18.Which of these is the content? (a) the line round the box (b) the text or picture (c) space inside the border (d) the gap round content
19. 19.Which of these does JavaScript do? (a) makes a link (b) shows a pop-up message (c) lays out the page (d) gives the page structure
20. 20.Which of these does JavaScript do? (a) lays out the page (b) makes a form box (c) reacts to a button click (d) gives the page structure
21. 21.🎯 Which CSS selector matches this element?
    <h1 class="star" id="top">Hello</h1> (a) h2 (b) #top (c) .menu (d) #star
22. 22.🖌️ How big is the text, in px?
    h1 {
      text-align: left;
      font-size: 36px;
      background-color: orange;
      color: blue;
    }
23. 23.🎨 Which tag connects an outside CSS file? (a) <css> (b) <a> (c) <img> (d) <link>
24. 24.📱 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
25. 25.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 80px;
      padding: 5px;
      border: 1px solid black;
      margin: 15px;
    }
26. 26.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
27. 27.🌈 In #0000fb the blue part is the hex number fb. What is it as a normal number?
28. 28.✍️ How does a CSS comment start? (a) // (b) # (c) <!-- (d) /*
29. 29.Which of these does CSS do? (a) sets colours and fonts (b) gives the page structure (c) makes headings and lists (d) changes the page live
30. 30.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) red (c) black (d) blue
31. 31.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) space-between (c) center (d) flex-end
32. 32.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 270px;
      padding: 10px;
      border: 4px solid black;
      margin: 5px;
    }
33. 33.✍️ Which property is set to center in this rule?
    li {
      margin: 10px;
      border: 2px solid;
      text-align: center;
      color: red;
    } (a) margin (b) text-align (c) background-color (d) center
34. 34.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 20px;
      }
    } (a) No (b) Yes
35. 35.What does background-color do? (a) picks the font style (b) colours behind the text (c) makes letters bigger (d) centres a heading
36. 36.🎯 Which sign starts a class selector? (a) & (b) . (c) # (d) @
37. 37.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 160px;
      padding: 30px;
      border: 4px solid black;
      margin: 10px;
    }
38. 38.🎯 Which CSS selector matches this element?
    <li class="menu" id="logo">Hello</li> (a) .logo (b) #end (c) .note (d) li
39. 39.Which of these does HTML do? (a) rounds box corners (b) sets colours and fonts (c) makes a form box (d) changes the page live
40. 40.⚖️ What colour is the text of this element?
    <h2 class="big" id="top">Hi</h2>
    CSS:
    h2 { color: red; }
    .big { color: green; } (a) green (b) red (c) yellow (d) orange

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