CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 583 · 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 element does the selector #top style? (a) <div id="intro"> (b) <div class="top"> (c) <span class="menu"> (d) <div id="top">
2. 2.True or false: .card is an id selector. (a) False (b) True
3. 3.🎯 How many elements on a page should have the same id? (a) 5 (b) 2 (c) any number (d) 1
4. 4.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) turned off (c) 600px or wider (d) exactly 1000px
5. 5.🖌️ What colour are the letters?
   p {
     color: purple;
     background-color: orange;
     font-size: 40px;
     text-align: left;
   } (a) green (b) orange (c) purple
6. 6.What does font-family do? (a) centres a heading (b) picks the font style (c) sets the letter colour (d) colours behind the text
7. 7.🧩 Which language reacts to a button click? (a) HTML (b) JavaScript (c) CSS
8. 8.🌈 In #00ae00 the green part is the hex number ae. What is it as a normal number?
9. 9.🌈 Which hex code is black? (a) #00ffff (b) #00ff00 (c) #000000 (d) #ff0000
10. 10.🌈 Which colour is rgb(0, 0, 0)? (a) magenta (b) black (c) yellow (d) bright green
11. 11.🖌️ Which CSS property sets the letter colour? (a) font-family (b) font-weight (c) color (d) text-align
12. 12.🖌️ Which CSS property picks the font style? (a) text-align (b) color (c) font-family (d) font-weight
13. 13.🖌️ What colour is behind the letters?
    li {
      background-color: green;
      text-align: right;
      color: black;
      font-size: 36px;
    } (a) green (b) blue (c) black
14. 14.What does background-color do? (a) sets the letter colour (b) colours behind the text (c) picks the font style (d) makes letters bigger
15. 15.True or false: .big is an element selector. (a) True (b) False
16. 16.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Computer Style Sheets (c) Cascading Style Sheets (d) Creative Sheet System
17. 17.🌈 Which colour is #ff0000? (a) bright green (b) blue (c) red (d) black
18. 18.⚖️ What colour is the text of this element?
    <h1 class="red" id="top">Hi</h1>
    CSS:
    #top { color: orange; }
    #top { color: green; } (a) orange (b) red (c) green (d) yellow
19. 19.🖌️ How big is the text, in px?
    h1 {
      font-size: 40px;
      color: orange;
      text-align: left;
      background-color: purple;
    }
20. 20.⚖️ What colour is the text of this element?
    <h2 class="star" id="intro">Hi</h2>
    CSS:
    h2 { color: black; }
    .star { color: blue; } (a) yellow (b) black (c) blue (d) red
21. 21.🌈 Which colour of light is strongest in rgb(194, 116, 36)? (a) green (b) red (c) blue
22. 22.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 16px;
      }
    } (a) Yes (b) No
23. 23.⚖️ What colour is the text of this element?
    <h2 class="menu" id="logo">Hi</h2>
    CSS:
    h2 { color: green; }
    #logo { color: yellow; }
    .menu { color: purple; } (a) green (b) yellow (c) blue (d) purple
24. 24.✍️ Which property is set to center in this rule?
    .note {
      color: red;
      font-size: 20px;
      background-color: yellow;
      text-align: center;
    } (a) background-color (b) text-align (c) margin (d) center
25. 25.Which of these does HTML do? (a) changes the text size (b) rounds box corners (c) makes headings and lists (d) changes the page live
26. 26.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) green (c) blue (d) red
27. 27.⚖️ What colour is the text of this element?
    <h1 class="box" id="end">Hi</h1>
    CSS:
    h1 { color: black; }
    h1 { color: white; } (a) black (b) orange (c) red (d) white
28. 28.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      text-align: center;
    }
29. 29.⚖️ What colour is the text of this element?
    <p class="note" id="logo">Hi</p>
    CSS:
    #logo { color: purple; }
    #logo { color: red; } (a) blue (b) green (c) red (d) purple
30. 30.🔍 Which is the odd one out? (a) makes headings and lists (b) puts a picture on a page (c) lays out the page (d) makes a form box
31. 31.True or false: #top is an id selector. (a) False (b) True
32. 32.True or false: #logo is a class selector. (a) False (b) True
33. 33.🌈 In #570000 the red part is the hex number 57. What is it as a normal number?
34. 34.🖌️ Which CSS property centres a heading? (a) font-family (b) color (c) text-align (d) background-color
35. 35.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the title tag (c) the br tag (d) the viewport meta tag
36. 36.🧩 Which language makes a form box? (a) JavaScript (b) HTML (c) CSS
37. 37.🖌️ How big is the text, in px?
    p {
      background-color: purple;
      text-align: center;
      font-size: 28px;
      color: black;
    }
38. 38.🎯 Which element does the selector #top style? (a) <li class="box"> (b) <h2 id="top"> (c) <h2 class="top"> (d) <h2 id="intro">
39. 39.⚖️ What colour is the text of this element?
    <h2 class="big" id="end">Hi</h2>
    CSS:
    .big { color: orange; }
    .big { color: yellow; } (a) white (b) orange (c) green (d) yellow
40. 40.True or false: CSS changes the text size. (a) True (b) False

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