CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 266 · 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 does color do? (a) makes the text bold (b) centres a heading (c) colours behind the text (d) sets the letter colour
2. 2.Which of these is the border? (a) the gap to other boxes (b) space inside the border (c) the line round the box (d) the text or picture
3. 3.⚖️ What colour is the text of this element?
   <h1 class="star" id="hero">Hi</h1>
   CSS:
   .star { color: green; }
   h1 { color: red; } (a) purple (b) orange (c) green (d) red
4. 4.✍️ Which property is set to center in this rule?
   body {
     margin: 10px;
     text-align: center;
     border: 2px solid;
   } (a) margin (b) background-color (c) text-align (d) center
5. 5.📱 What does a media query check? (a) the page title (b) the battery level (c) the time of day (d) the screen width
6. 6.⚖️ What colour is the text of this element?
   <h1 class="note" id="intro">Hi</h1>
   CSS:
   #intro { color: yellow; }
   h1 { color: black; } (a) yellow (b) black (c) white (d) purple
7. 7.✍️ What value is given to color in this rule?
   li {
     color: red;
     font-size: 20px;
   } (a) red (b) 20px (c) color (d) center
8. 8.🖌️ What colour are the letters?
   p {
     color: red;
     text-align: left;
     font-size: 24px;
     background-color: black;
   } (a) yellow (b) red (c) black
9. 9.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 22px;
     }
   }
10. 10.Which of these does CSS do? (a) changes the text size (b) makes headings and lists (c) gives the page structure (d) checks a quiz answer
11. 11.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 32px;
      }
    } (a) No (b) Yes
12. 12.🌈 Which colour of light is strongest in rgb(160, 136, 12)? (a) blue (b) red (c) green
13. 13.✍️ What is the selector in this CSS rule?
    li {
      font-style: italic;
      width: 300px;
      padding: 8px;
      color: red;
    } (a) font-style (b) body (c) li (d) 300px
14. 14.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) center (c) space-between (d) flex-end
15. 15.⚖️ What colour is the text of this element?
    <h1 class="red" id="logo">Hi</h1>
    CSS:
    #logo { color: red; }
    #logo { color: yellow; } (a) black (b) yellow (c) red (d) purple
16. 16.True or false: CSS shows a pop-up message. (a) True (b) False
17. 17.🧩 Which language changes the text size? (a) HTML (b) JavaScript (c) CSS
18. 18.🖌️ What colour is behind the letters?
    p {
      font-size: 20px;
      color: green;
      text-align: center;
      background-color: purple;
    } (a) red (b) purple (c) green
19. 19.🌈 Which colour is #ffffff? (a) black (b) bright green (c) white (d) red
20. 20.🖌️ How big is the text, in px?
    h1 {
      color: white;
      font-size: 32px;
      text-align: center;
      background-color: purple;
    }
21. 21.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) 600px or narrower (c) turned off (d) exactly 1000px
22. 22.True or false: the content is the text or picture. (a) False (b) True
23. 23.⚖️ What colour is the text of this element?
    <p class="note" id="intro">Hi</p>
    CSS:
    p { color: black; }
    p { color: purple; } (a) blue (b) purple (c) green (d) black
24. 24.🎯 Which element does the selector h1 style? (a) <h1 class="box"> (b) <h2> (c) <li class="box"> (d) <div id="intro">
25. 25.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
26. 26.💪 Which flexbox property picks row or column? (a) gap (b) flex-direction (c) display: flex (d) align-items
27. 27.Which of these is the content? (a) the gap round content (b) a solid or dotted edge (c) the text or picture (d) the line round the box
28. 28.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    }
29. 29.True or false: #main is a class selector. (a) True (b) False
30. 30.🌈 What is the biggest number one colour can have in rgb()? (a) 99 (b) 255 (c) 1000 (d) 100
31. 31.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 160px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 40px wide (no margins).
32. 32.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the hr tag (c) the viewport meta tag (d) the br tag
33. 33.🌈 In #00d400 the green part is the hex number d4. What is it as a normal number?
34. 34.💪 Which flexbox property spaces boxes along a row? (a) justify-content (b) gap (c) display: flex (d) flex-direction
35. 35.🧩 Which language adds space around boxes? (a) HTML (b) CSS (c) JavaScript
36. 36.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 18px;
      }
    }
37. 37.🎯 What kind of selector is li? (a) an id selector (b) a class selector (c) an element selector
38. 38.Which of these does HTML do? (a) sets colours and fonts (b) shows a pop-up message (c) makes a link (d) lays out the page
39. 39.💪 Which flexbox property turns on flexbox? (a) justify-content (b) flex-direction (c) display: flex (d) align-items
40. 40.🎯 Which CSS selector matches this element?
    <p class="note" id="intro">Hello</p> (a) h1 (b) p (c) .intro (d) #note

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