CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 591 · 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 CSS property centres a heading? (a) background-color (b) font-weight (c) text-align (d) color
2. 2.🔍 Which is the odd one out? (a) adds space around boxes (b) changes the page live (c) reacts to a button click (d) shows a pop-up message
3. 3.🌈 Which colour of light is strongest in rgb(127, 161, 112)? (a) red (b) blue (c) green
4. 4.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) turned off (c) exactly 100px (d) 800px or wider
5. 5.⚖️ What colour is the text of this element?
   <h1 class="star" id="end">Hi</h1>
   CSS:
   #end { color: black; }
   h1 { color: purple; } (a) yellow (b) blue (c) black (d) purple
6. 6.✍️ What value is given to padding in this rule?
   body {
     margin: 10px;
     color: red;
     padding: 8px;
   } (a) bold (b) 8px (c) padding (d) 2px solid
7. 7.✍️ Which property is set to 8px in this rule?
   p {
     font-style: italic;
     padding: 8px;
     color: red;
   } (a) font-weight (b) 8px (c) padding (d) border
8. 8.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 18px;
     }
   }
9. 9.⚖️ What colour is the text of this element?
   <h2 class="note" id="logo">Hi</h2>
   CSS:
   h2 { color: purple; }
   h2 { color: red; } (a) red (b) purple (c) blue (d) yellow
10. 10.⚖️ What colour is the text of this element?
    <p class="note" id="top">Hi</p>
    CSS:
    .note { color: green; }
    .note { color: black; } (a) yellow (b) purple (c) green (d) black
11. 11.✍️ What value is given to background-color in this rule?
    h1 {
      background-color: yellow;
      color: red;
    } (a) 8px (b) yellow (c) background-color (d) 10px
12. 12.What does text-align do? (a) colours behind the text (b) sets the letter colour (c) centres a heading (d) picks the font style
13. 13.🖌️ What colour is behind the letters?
    h1 {
      background-color: green;
      font-size: 28px;
      color: blue;
      text-align: right;
    } (a) red (b) blue (c) green
14. 14.⚖️ What colour is the text of this element?
    <p class="star" id="end">Hi</p>
    CSS:
    p { color: white; }
    p { color: red; } (a) white (b) purple (c) red (d) green
15. 15.🎯 What kind of selector is .star? (a) an element selector (b) an id selector (c) a class selector
16. 16.🌈 Which colour of light is strongest in rgb(9, 235, 40)? (a) green (b) red (c) blue
17. 17.What does font-family do? (a) colours behind the text (b) makes the text bold (c) centres a heading (d) picks the font style
18. 18.Which of these does JavaScript do? (a) makes a link (b) changes the text size (c) lays out the page (d) checks a quiz answer
19. 19.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 280px;
      padding: 5px;
      border: 5px solid black;
      margin: 5px;
    }
20. 20.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 290px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 80px wide (no margins).
21. 21.📱 What does a media query check? (a) the time of day (b) the page title (c) the battery level (d) the screen width
22. 22.Which of these does HTML do? (a) changes the page live (b) checks a quiz answer (c) puts a picture on a page (d) adds space around boxes
23. 23.⚖️ What colour is the text of this element?
    <h1 class="note" id="end">Hi</h1>
    CSS:
    #end { color: yellow; }
    h1 { color: white; } (a) black (b) white (c) yellow (d) purple
24. 24.🔍 Which is the odd one out? (a) lays out the page (b) changes the text size (c) adds space around boxes (d) makes a link
25. 25.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 160px;
      padding: 5px;
      border: 3px solid black;
      margin: 10px;
    }
26. 26.🧩 Which language changes the page live? (a) HTML (b) JavaScript (c) CSS
27. 27.✍️ Which property is set to 10px in this rule?
    h2 {
      padding: 8px;
      margin: 10px;
    } (a) margin (b) padding (c) 10px (d) font-weight
28. 28.🧩 Which language checks a quiz answer? (a) JavaScript (b) CSS (c) HTML
29. 29.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      text-align: center;
      padding: 8px;
    }
30. 30.What does font-weight do? (a) picks the font style (b) colours behind the text (c) makes the text bold (d) makes letters bigger
31. 31.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 28px;
      }
    }
32. 32.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) packs boxes at the start (c) packs boxes at the end (d) puts boxes in the middle
33. 33.🎯 Which CSS selector matches this element?
    <li class="red" id="logo">Hello</li> (a) li (b) #red (c) #end (d) .logo
34. 34.🖌️ Which CSS property colours behind the text? (a) color (b) font-family (c) background-color (d) text-align
35. 35.🎯 Which CSS selector matches this element?
    <p class="note" id="hero">Hello</p> (a) .hero (b) #note (c) p (d) h1
36. 36.True or false: the content is the text or picture. (a) True (b) False
37. 37.🔍 Which is the odd one out? (a) checks a quiz answer (b) changes the page live (c) counts down a timer (d) sets colours and fonts
38. 38.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 50px;
      padding: 10px;
      border: 1px solid black;
      margin: 0px;
    }
39. 39.⚖️ What colour is the text of this element?
    <h2 class="box" id="intro">Hi</h2>
    CSS:
    h2 { color: green; }
    h2 { color: orange; } (a) green (b) yellow (c) purple (d) orange
40. 40.⚖️ What colour is the text of this element?
    <h2 class="star" id="main">Hi</h2>
    CSS:
    .star { color: yellow; }
    h2 { color: purple; } (a) yellow (b) purple (c) blue (d) green

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