CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 661 · 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 tag connects an outside CSS file? (a) <css> (b) <a> (c) <img> (d) <link>
2. 2.🧩 Which language changes the text size? (a) CSS (b) JavaScript (c) HTML
3. 3.🖌️ Which CSS property centres a heading? (a) text-align (b) font-size (c) background-color (d) font-family
4. 4.⚖️ What colour is the text of this element?
   <p class="note" id="end">Hi</p>
   CSS:
   p { color: orange; }
   #end { color: green; } (a) orange (b) green (c) purple (d) black
5. 5.🎯 Which CSS selector matches this element?
   <div class="box" id="logo">Hello</div> (a) .logo (b) #end (c) .star (d) .box
6. 6.💪 Which justify-content value packs boxes at the end? (a) flex-end (b) center (c) space-between (d) flex-start
7. 7.✍️ What is the selector in this CSS rule?
   h2 {
     width: 300px;
     font-weight: bold;
   } (a) bold (b) h1 (c) width (d) h2
8. 8.📦 In the box model, which part is space outside the border? (a) content (b) border (c) padding (d) margin
9. 9.🖌️ What colour is behind the letters?
   h1 {
     text-align: right;
     color: white;
     background-color: blue;
     font-size: 12px;
   } (a) blue (b) white (c) green
10. 10.🔍 Which is the odd one out? (a) makes a form box (b) changes the page live (c) counts down a timer (d) shows a pop-up message
11. 11.🌈 Which hex code is red? (a) #ffff00 (b) #00ffff (c) #ff0000 (d) #00ff00
12. 12.🖌️ What colour are the letters?
    p {
      font-size: 40px;
      background-color: red;
      color: green;
      text-align: right;
    } (a) green (b) red (c) white
13. 13.📦 In the box model, which part is space inside the border? (a) margin (b) border (c) padding (d) content
14. 14.🌈 Which colour is rgb(0, 0, 0)? (a) white (b) red (c) magenta (d) black
15. 15.✍️ What is the selector in this CSS rule?
    .note {
      border: 2px solid;
      font-style: italic;
      text-align: center;
    } (a) #top (b) italic (c) border (d) .note
16. 16.🌈 In #700000 the red part is the hex number 70. What is it as a normal number?
17. 17.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) red (c) black (d) blue
18. 18.🎯 Which element does the selector h1 style? (a) <h2> (b) <li class="menu"> (c) <h1 class="menu"> (d) <div id="end">
19. 19.🎯 What kind of selector is p? (a) a class selector (b) an id selector (c) an element selector
20. 20.What does background-color do? (a) colours behind the text (b) sets the letter colour (c) makes letters bigger (d) makes the text bold
21. 21.✍️ Which property is set to italic in this rule?
    body {
      border: 2px solid;
      font-style: italic;
    } (a) color (b) font-style (c) italic (d) font-size
22. 22.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      padding: 8px;
      text-align: center;
      font-weight: bold;
      color: red;
    }
23. 23.🌈 In #9c0000 the red part is the hex number 9c. What is it as a normal number?
24. 24.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }
25. 25.⚖️ What colour is the text of this element?
    <h2 class="star" id="hero">Hi</h2>
    CSS:
    .star { color: blue; }
    .star { color: black; } (a) orange (b) purple (c) black (d) blue
26. 26.💪 Which flexbox property turns on flexbox? (a) gap (b) flex-direction (c) justify-content (d) display: flex
27. 27.🖌️ What colour is behind the letters?
    p {
      font-size: 16px;
      color: blue;
      text-align: center;
      background-color: red;
    } (a) white (b) red (c) blue
28. 28.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 24px;
      }
    }
29. 29.⚖️ What colour is the text of this element?
    <p class="box" id="main">Hi</p>
    CSS:
    .box { color: purple; }
    p { color: blue; } (a) blue (b) red (c) yellow (d) purple
30. 30.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 8px;
      }
    }
31. 31.What does justify-content: space-between do? (a) packs boxes at the start (b) packs boxes at the end (c) puts boxes in the middle (d) equal gaps, none at ends
32. 32.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) exactly 1000px (c) turned off (d) 600px or narrower
33. 33.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
34. 34.🧩 Which language adds space around boxes? (a) CSS (b) HTML (c) JavaScript
35. 35.🖌️ Which CSS property makes letters bigger? (a) font-weight (b) color (c) font-size (d) background-color
36. 36.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      font-style: italic;
    }
37. 37.⚖️ What colour is the text of this element?
    <h1 class="red" id="top">Hi</h1>
    CSS:
    h1 { color: orange; }
    #top { color: white; } (a) orange (b) green (c) red (d) white
38. 38.📦 In the box model, which part is the line round the box? (a) padding (b) border (c) content (d) margin
39. 39.Which of these is the border? (a) the gap round content (b) the text or picture (c) space inside the border (d) the line round the box
40. 40.True or false: CSS sets colours and fonts. (a) False (b) True

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