CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 470 · 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 CSS property colours behind the text? (a) font-family (b) font-weight (c) color (d) background-color
2. 2.True or false: h1 is an element selector. (a) False (b) True
3. 3.📱 The screen is 700px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 16px;
     }
   } (a) No (b) Yes
4. 4.✍️ In color: blue; which part is the property? (a) ; (b) blue (c) color (d) :
5. 5.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 160px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 50px wide (no margins).
6. 6.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Cascading Style Sheets (c) Computer Style Sheets (d) Creative Sheet System
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: 50px;
     padding: 10px;
     border: 2px solid black;
     margin: 20px;
   }
8. 8.⚖️ What colour is the text of this element?
   <p class="note" id="intro">Hi</p>
   CSS:
   .note { color: white; }
   .note { color: red; } (a) green (b) red (c) white (d) black
9. 9.✍️ CSS declarations go inside which brackets? (a) [ ] (b) { } (c) ( ) (d) < >
10. 10.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 30px;
      }
    }
11. 11.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      width: 300px;
      font-style: italic;
      font-weight: bold;
    }
12. 12.🖌️ What colour are the letters?
    li {
      background-color: blue;
      font-size: 24px;
      color: purple;
      text-align: left;
    } (a) purple (b) white (c) blue
13. 13.True or false: p is an id selector. (a) True (b) False
14. 14.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 60px;
      padding: 15px;
      border: 3px solid black;
      margin: 15px;
    }
15. 15.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 410px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 100px wide (no margins).
16. 16.🧩 Which language makes headings and lists? (a) HTML (b) JavaScript (c) CSS
17. 17.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) center (c) space-between (d) flex-end
18. 18.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) neither (d) the later one
19. 19.Which of these does CSS do? (a) changes the text size (b) gives the page structure (c) makes headings and lists (d) counts down a timer
20. 20.✍️ Which property is set to 10px in this rule?
    li {
      font-style: italic;
      margin: 10px;
    } (a) 10px (b) font-weight (c) padding (d) margin
21. 21.✍️ Which property is set to 300px in this rule?
    h1 {
      width: 300px;
      text-align: center;
      font-style: italic;
    } (a) width (b) font-style (c) 300px (d) color
22. 22.🖌️ What colour are the letters?
    p {
      background-color: green;
      text-align: right;
      font-size: 36px;
      color: white;
    } (a) blue (b) green (c) white
23. 23.🌈 Hex digits go 0 to 9, then A to which letter? (a) Z (b) J (c) G (d) F
24. 24.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 50px;
      padding: 15px;
      border: 2px solid black;
      margin: 15px;
    }
25. 25.⚖️ What colour is the text of this element?
    <h1 class="menu" id="main">Hi</h1>
    CSS:
    .menu { color: blue; }
    h1 { color: black; }
    #main { color: white; } (a) black (b) blue (c) orange (d) white
26. 26.What does justify-content: space-between do? (a) equal gaps, none at ends (b) packs boxes at the end (c) packs boxes at the start (d) puts boxes in the middle
27. 27.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      font-size: 20px;
      text-align: center;
      margin: 10px;
    }
28. 28.📦 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: 25px;
      border: 2px solid black;
      margin: 20px;
    }
29. 29.What does justify-content: flex-start do? (a) packs boxes at the end (b) equal gaps, none at ends (c) packs boxes at the start (d) puts boxes in the middle
30. 30.✍️ What is the selector in this CSS rule?
    body {
      border: 2px solid;
      margin: 10px;
    } (a) border (b) .box (c) 10px (d) body
31. 31.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      font-style: italic;
      background-color: yellow;
      font-size: 20px;
    }
32. 32.✍️ What value is given to font-size in this rule?
    #top {
      border: 2px solid;
      background-color: yellow;
      font-size: 20px;
      font-style: italic;
    } (a) center (b) yellow (c) 20px (d) font-size
33. 33.🎯 Which element does the selector div style? (a) <h1 id="logo"> (b) <p class="menu"> (c) <span> (d) <div class="menu">
34. 34.🖌️ What colour are the letters?
    h2 {
      background-color: red;
      text-align: right;
      font-size: 24px;
      color: black;
    } (a) purple (b) black (c) red
35. 35.True or false: HTML sets colours and fonts. (a) True (b) False
36. 36.✍️ Which sign ends each CSS declaration? (a) : (b) . (c) , (d) ;
37. 37.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 22px;
      }
    } (a) No (b) Yes
38. 38.🖌️ What colour is behind the letters?
    li {
      background-color: purple;
      font-size: 16px;
      text-align: right;
      color: green;
    } (a) red (b) green (c) purple
39. 39.Which of these is margin? (a) space inside the border (b) the gap round content (c) the gap to other boxes (d) a solid or dotted edge
40. 40.🎯 Which CSS selector matches this element?
    <p class="note" id="hero">Hello</p> (a) #top (b) p (c) .hero (d) #note

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