CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 735 · 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.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the shorter one (c) the later one (d) the first one
2. 2.🌈 Which colour of light is strongest in rgb(197, 6, 11)? (a) green (b) red (c) blue
3. 3.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 6px;
     }
   }
4. 4.🖌️ What colour are the letters?
   h1 {
     color: white;
     background-color: blue;
     font-size: 24px;
     text-align: left;
   } (a) blue (b) white (c) red
5. 5.🎯 Which element does the selector .menu style? (a) <li class="big"> (b) <h2 class="note"> (c) <h2 class="menu"> (d) <h2 id="menu">
6. 6.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 230px;
     padding: 10px;
     border: 3px solid black;
     margin: 10px;
   }
7. 7.⚖️ What colour is the text of this element?
   <p class="star" id="logo">Hi</p>
   CSS:
   .star { color: red; }
   #logo { color: white; } (a) red (b) black (c) white (d) purple
8. 8.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 330px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 100px wide (no margins).
9. 9.⚖️ What colour is the text of this element?
   <p class="star" id="end">Hi</p>
   CSS:
   .star { color: blue; }
   p { color: green; } (a) blue (b) red (c) green (d) yellow
10. 10.⚖️ What colour is the text of this element?
    <h1 class="menu" id="top">Hi</h1>
    CSS:
    #top { color: yellow; }
    #top { color: black; } (a) black (b) white (c) yellow (d) red
11. 11.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 3 (c) 2 (d) 4
12. 12.💪 Which flexbox property turns on flexbox? (a) gap (b) flex-direction (c) display: flex (d) align-items
13. 13.📦 In the box model, which part is space outside the border? (a) content (b) border (c) padding (d) margin
14. 14.🖌️ Which CSS property makes the text bold? (a) font-weight (b) font-family (c) color (d) font-size
15. 15.🌈 Hex digits go 0 to 9, then A to which letter? (a) J (b) G (c) F (d) Z
16. 16.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 260px;
      padding: 15px;
      border: 4px solid black;
      margin: 5px;
    }
17. 17.🎯 Which element does the selector h1 style? (a) <h1 class="red"> (b) <li class="red"> (c) <div id="intro"> (d) <h2>
18. 18.Which of these does HTML do? (a) rounds box corners (b) sets colours and fonts (c) puts a picture on a page (d) changes the page live
19. 19.🖌️ What colour is behind the letters?
    h2 {
      color: white;
      background-color: orange;
      text-align: center;
      font-size: 16px;
    } (a) orange (b) blue (c) white
20. 20.What does background-color do? (a) colours behind the text (b) makes letters bigger (c) centres a heading (d) sets the letter colour
21. 21.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      color: red;
    }
22. 22.True or false: HTML sets colours and fonts. (a) True (b) False
23. 23.📱 What does a media query check? (a) the screen width (b) the time of day (c) the battery level (d) the page title
24. 24.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      text-align: center;
    }
25. 25.🎯 Which element does the selector h2 style? (a) <h2 class="box"> (b) <span id="intro"> (c) <div class="box"> (d) <li>
26. 26.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    }
27. 27.What does justify-content: flex-start do? (a) packs boxes at the end (b) packs boxes at the start (c) equal gaps, none at ends (d) puts boxes in the middle
28. 28.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 80px;
      padding: 5px;
      border: 5px solid black;
      margin: 5px;
    }
29. 29.⚖️ What colour is the text of this element?
    <h1 class="menu" id="end">Hi</h1>
    CSS:
    #end { color: black; }
    #end { color: blue; } (a) purple (b) blue (c) white (d) black
30. 30.Which of these is margin? (a) the gap to other boxes (b) the gap round content (c) the text or picture (d) the line round the box
31. 31.🎯 What kind of selector is #end? (a) a class selector (b) an id selector (c) an element selector
32. 32.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
33. 33.True or false: padding is a solid or dotted edge. (a) False (b) True
34. 34.🌈 Which colour is #00ffff? (a) white (b) bright green (c) cyan (d) black
35. 35.🎯 What kind of selector is img? (a) an id selector (b) an element selector (c) a class selector
36. 36.💪 Which justify-content value packs boxes at the end? (a) space-between (b) flex-end (c) center (d) flex-start
37. 37.✍️ Which property is set to 20px in this rule?
    #top {
      margin: 10px;
      font-size: 20px;
      color: red;
    } (a) background-color (b) font-size (c) 20px (d) text-align
38. 38.🖌️ What colour are the letters?
    li {
      text-align: left;
      font-size: 24px;
      color: yellow;
      background-color: black;
    } (a) yellow (b) black (c) green
39. 39.🎯 Which CSS selector matches this element?
    <div class="box" id="top">Hello</div> (a) .top (b) .star (c) #intro (d) div
40. 40.⚖️ What colour is the text of this element?
    <h2 class="star" id="main">Hi</h2>
    CSS:
    #main { color: green; }
    #main { color: black; } (a) yellow (b) blue (c) black (d) green

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