CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 44 · 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 colour is the text of this element?
   <p class="red" id="main">Hi</p>
   CSS:
   .red { color: yellow; }
   .red { color: green; } (a) red (b) green (c) orange (d) yellow
2. 2.🌈 Which colour of light is strongest in rgb(20, 99, 153)? (a) red (b) blue (c) green
3. 3.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the br tag (c) the title tag (d) the viewport meta tag
4. 4.✍️ Which property is set to 20px in this rule?
   p {
     color: red;
     font-size: 20px;
     border: 2px solid;
   } (a) background-color (b) 20px (c) text-align (d) font-size
5. 5.🌈 Which colour of light is strongest in rgb(183, 46, 132)? (a) red (b) green (c) blue
6. 6.True or false: HTML makes a link. (a) True (b) False
7. 7.🖌️ How big is the text, in px?
   p {
     text-align: left;
     color: green;
     font-size: 28px;
     background-color: white;
   }
8. 8.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 150px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 40px wide (no margins).
9. 9.📦 In the box model, which part is the gap round content? (a) padding (b) border (c) margin (d) content
10. 10.🖌️ What colour is behind the letters?
    p {
      text-align: left;
      background-color: white;
      color: black;
      font-size: 24px;
    } (a) blue (b) black (c) white
11. 11.🔍 Which is the odd one out? (a) checks a quiz answer (b) counts down a timer (c) reacts to a button click (d) puts a picture on a page
12. 12.🎯 What kind of selector is .big? (a) an element selector (b) a class selector (c) an id selector
13. 13.⚖️ What colour is the text of this element?
    <h2 class="big" id="top">Hi</h2>
    CSS:
    #top { color: white; }
    .big { color: purple; } (a) red (b) white (c) purple (d) blue
14. 14.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 100px wide (no margins).
15. 15.🖌️ Where does the text sit on its line?
    h2 {
      background-color: purple;
      font-size: 12px;
      text-align: center;
      color: white;
    } (a) on the right (b) in the middle (c) on the left
16. 16.True or false: #logo is an id selector. (a) True (b) False
17. 17.🎯 Which element does the selector #top style? (a) <h1 class="big"> (b) <p id="top"> (c) <p id="intro"> (d) <p class="top">
18. 18.🔍 Which is the odd one out? (a) changes the text size (b) checks a quiz answer (c) sets colours and fonts (d) adds space around boxes
19. 19.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      font-style: italic;
      border: 2px solid;
      padding: 8px;
    }
20. 20.⚖️ What colour is the text of this element?
    <p class="box" id="intro">Hi</p>
    CSS:
    #intro { color: green; }
    #intro { color: orange; } (a) yellow (b) purple (c) green (d) orange
21. 21.Which of these is the content? (a) the text or picture (b) space inside the border (c) space outside the border (d) the gap to other boxes
22. 22.✍️ What is the selector in this CSS rule?
    .box {
      text-align: center;
      width: 300px;
      color: red;
      padding: 8px;
    } (a) .box (b) h2 (c) text-align (d) 300px
23. 23.✍️ What is the selector in this CSS rule?
    li {
      width: 300px;
      background-color: yellow;
    } (a) body (b) yellow (c) li (d) width
24. 24.🖌️ What colour are the letters?
    h1 {
      font-size: 28px;
      color: red;
      text-align: left;
      background-color: orange;
    } (a) white (b) orange (c) red
25. 25.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the shorter one (c) neither (d) the later one
26. 26.🌈 Which colour is rgb(0, 0, 255)? (a) blue (b) cyan (c) white (d) black
27. 27.🎯 Which element does the selector #end style? (a) <p class="big"> (b) <span id="end"> (c) <span id="hero"> (d) <span class="end">
28. 28.True or false: margin is space outside the border. (a) False (b) True
29. 29.True or false: the border is the line round the box. (a) True (b) False
30. 30.✍️ What value is given to color in this rule?
    p {
      background-color: yellow;
      border: 2px solid;
      color: red;
      font-style: italic;
    } (a) red (b) center (c) 20px (d) color
31. 31.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 20px;
      }
    }
32. 32.🌈 In #590000 the red part is the hex number 59. What is it as a normal number?
33. 33.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) exactly 100px (c) turned off (d) 800px or narrower
34. 34.🎯 What kind of selector is #logo? (a) an element selector (b) a class selector (c) an id selector
35. 35.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 20px;
      }
    }
36. 36.🔍 Which is the odd one out? (a) lays out the page (b) makes a form box (c) rounds box corners (d) sets colours and fonts
37. 37.✍️ What is the selector in this CSS rule?
    .note {
      font-weight: bold;
      font-size: 20px;
      border: 2px solid;
      width: 300px;
    } (a) #top (b) 20px (c) .note (d) font-weight
38. 38.✍️ Which sign goes between a property and its value? (a) - (b) ; (c) = (d) :
39. 39.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector
40. 40.🖌️ Which CSS property sets the letter colour? (a) background-color (b) color (c) font-weight (d) font-size

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