CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 40 · 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.✍️ What is the selector in this CSS rule?
   .box {
     padding: 8px;
     font-weight: bold;
   } (a) h2 (b) padding (c) bold (d) .box
2. 2.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 110px;
     justify-content: flex-end;
   }
   Inside are 2 boxes, each 40px wide (no margins).
3. 3.✍️ Which property is set to 8px in this rule?
   h2 {
     border: 2px solid;
     font-style: italic;
     padding: 8px;
     text-align: center;
   } (a) border (b) padding (c) font-weight (d) 8px
4. 4.🖌️ Which CSS property makes the text bold? (a) background-color (b) font-weight (c) text-align (d) color
5. 5.🎯 Which element does the selector #top style? (a) <h2 class="big"> (b) <h1 class="top"> (c) <h1 id="top"> (d) <h1 id="intro">
6. 6.💪 Which justify-content value packs boxes at the start? (a) center (b) flex-start (c) space-between (d) flex-end
7. 7.Which of these is the border? (a) space outside the border (b) the line round the box (c) space inside the border (d) the gap round content
8. 8.🎯 How many elements on a page should have the same id? (a) 5 (b) 1 (c) 2 (d) any number
9. 9.🌈 Which colour is rgb(255, 0, 0)? (a) blue (b) yellow (c) white (d) red
10. 10.⚖️ What colour is the text of this element?
    <h2 class="star" id="logo">Hi</h2>
    CSS:
    h2 { color: black; }
    #logo { color: white; }
    .star { color: orange; } (a) black (b) green (c) orange (d) white
11. 11.⚖️ What colour is the text of this element?
    <h2 class="menu" id="main">Hi</h2>
    CSS:
    h2 { color: black; }
    h2 { color: orange; } (a) red (b) blue (c) black (d) orange
12. 12.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 1000 (c) 255 (d) 99
13. 13.✍️ Which property is set to 300px in this rule?
    .note {
      border: 2px solid;
      width: 300px;
      font-size: 20px;
      margin: 10px;
    } (a) font-style (b) color (c) width (d) 300px
14. 14.What does color do? (a) centres a heading (b) makes the text bold (c) makes letters bigger (d) sets the letter colour
15. 15.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      font-size: 20px;
      padding: 8px;
      font-weight: bold;
      background-color: yellow;
    }
16. 16.✍️ Which property is set to yellow in this rule?
    #top {
      background-color: yellow;
      text-align: center;
      color: red;
      width: 300px;
    } (a) padding (b) yellow (c) background-color (d) margin
17. 17.💪 Which justify-content value equal gaps, none at ends? (a) space-between (b) center (c) flex-start (d) flex-end
18. 18.🖌️ How big is the text, in px?
    li {
      background-color: red;
      font-size: 12px;
      text-align: center;
      color: black;
    }
19. 19.🌈 Which colour is rgb(0, 255, 0)? (a) yellow (b) red (c) cyan (d) bright green
20. 20.True or false: CSS counts down a timer. (a) False (b) True
21. 21.🌈 Which colour is #000000? (a) blue (b) white (c) magenta (d) black
22. 22.True or false: #hero is an element selector. (a) False (b) True
23. 23.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    }
24. 24.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 100px;
      padding: 15px;
      border: 4px solid black;
      margin: 10px;
    }
25. 25.🔍 Which is the odd one out? (a) sets colours and fonts (b) rounds box corners (c) changes the text size (d) counts down a timer
26. 26.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 280px;
      justify-content: center;
    }
    Inside are 4 boxes, each 60px wide (no margins).
27. 27.✍️ What value is given to font-weight in this rule?
    body {
      border: 2px solid;
      font-weight: bold;
    } (a) 300px (b) 2px solid (c) bold (d) font-weight
28. 28.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 260px;
      justify-content: center;
    }
    Inside are 3 boxes, each 60px wide (no margins).
29. 29.Which of these does CSS do? (a) makes a link (b) makes headings and lists (c) puts a picture on a page (d) adds space around boxes
30. 30.🌈 In #200000 the red part is the hex number 20. What is it as a normal number?
31. 31.📱 What does a media query check? (a) the battery level (b) the screen width (c) the time of day (d) the page title
32. 32.🎯 What kind of selector is p? (a) an element selector (b) a class selector (c) an id selector
33. 33.🎯 Which CSS selector matches this element?
    <h1 class="big" id="logo">Hello</h1> (a) #end (b) h2 (c) #big (d) .big
34. 34.🌈 In #5e0000 the red part is the hex number 5e. What is it as a normal number?
35. 35.🌈 In #7f0000 the red part is the hex number 7f. What is it as a normal number?
36. 36.🖌️ Where does the text sit on its line?
    h2 {
      background-color: black;
      text-align: right;
      color: orange;
      font-size: 32px;
    } (a) on the left (b) on the right (c) in the middle
37. 37.📦 In the box model, which part is space outside the border? (a) content (b) padding (c) margin (d) border
38. 38.✍️ Which sign ends each CSS declaration? (a) , (b) ; (c) : (d) .
39. 39.What does font-family do? (a) centres a heading (b) picks the font style (c) makes the text bold (d) colours behind the text
40. 40.🧩 Which language rounds box corners? (a) CSS (b) JavaScript (c) HTML

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