CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 254 · 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 kind of selector is .card? (a) an element selector (b) a class selector (c) an id selector
2. 2.🎯 Can many elements share the same class? (a) Yes (b) No
3. 3.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 18px;
     }
   }
4. 4.✍️ What is the selector in this CSS rule?
   body {
     font-style: italic;
     background-color: yellow;
     font-weight: bold;
     width: 300px;
   } (a) body (b) yellow (c) font-style (d) .box
5. 5.⚖️ What colour is the text of this element?
   <p class="box" id="hero">Hi</p>
   CSS:
   .box { color: purple; }
   .box { color: black; } (a) purple (b) black (c) blue (d) orange
6. 6.✍️ Which property is set to 10px in this rule?
   .note {
     color: red;
     background-color: yellow;
     margin: 10px;
   } (a) font-weight (b) padding (c) 10px (d) margin
7. 7.✍️ What value is given to color in this rule?
   h1 {
     color: red;
     font-size: 20px;
   } (a) color (b) red (c) 20px (d) center
8. 8.✍️ What value is given to width in this rule?
   .note {
     text-align: center;
     width: 300px;
     font-weight: bold;
   } (a) italic (b) 300px (c) width (d) red
9. 9.⚖️ What colour is the text of this element?
   <h1 class="star" id="main">Hi</h1>
   CSS:
   #main { color: green; }
   #main { color: yellow; } (a) green (b) black (c) yellow (d) orange
10. 10.Which of these does HTML do? (a) counts down a timer (b) reacts to a button click (c) changes the page live (d) makes a link
11. 11.Which of these does CSS do? (a) makes headings and lists (b) puts a picture on a page (c) changes the page live (d) adds space around boxes
12. 12.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 18px;
      }
    }
13. 13.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 220px;
      padding: 15px;
      border: 2px solid black;
      margin: 0px;
    }
14. 14.🖌️ What colour is behind the letters?
    h1 {
      background-color: red;
      font-size: 28px;
      color: green;
      text-align: center;
    } (a) green (b) black (c) red
15. 15.✍️ Which property is set to yellow in this rule?
    h1 {
      background-color: yellow;
      font-size: 20px;
    } (a) margin (b) yellow (c) padding (d) background-color
16. 16.🧩 Which language makes a form box? (a) JavaScript (b) CSS (c) HTML
17. 17.🎯 Which element does the selector .red style? (a) <span class="star"> (b) <div class="red"> (c) <div id="red"> (d) <div class="box">
18. 18.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }
19. 19.🖌️ What colour are the letters?
    p {
      text-align: right;
      background-color: orange;
      color: yellow;
      font-size: 28px;
    } (a) yellow (b) orange (c) blue
20. 20.Which of these does JavaScript do? (a) counts down a timer (b) makes a form box (c) makes headings and lists (d) puts a picture on a page
21. 21.True or false: li is an element selector. (a) True (b) False
22. 22.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Creative Sheet System (c) Computer Style Sheets (d) Cascading Style Sheets
23. 23.What does justify-content: center do? (a) packs boxes at the start (b) equal gaps, none at ends (c) packs boxes at the end (d) puts boxes in the middle
24. 24.⚖️ What colour is the text of this element?
    <h2 class="menu" id="top">Hi</h2>
    CSS:
    #top { color: white; }
    #top { color: blue; } (a) yellow (b) green (c) blue (d) white
25. 25.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 220px;
      padding: 5px;
      border: 3px solid black;
      margin: 5px;
    }
26. 26.🎯 Which element does the selector .big style? (a) <p class="box"> (b) <span class="red"> (c) <span id="big"> (d) <span class="big">
27. 27.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the later one (c) the shorter one (d) neither
28. 28.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 24px;
      }
    } (a) Yes (b) No
29. 29.🖌️ Where does the text sit on its line?
    p {
      text-align: left;
      color: white;
      background-color: black;
      font-size: 12px;
    } (a) on the left (b) in the middle (c) on the right
30. 30.⚖️ What colour is the text of this element?
    <p class="big" id="end">Hi</p>
    CSS:
    .big { color: green; }
    .big { color: red; } (a) green (b) purple (c) yellow (d) red
31. 31.🖌️ Where does the text sit on its line?
    h2 {
      text-align: right;
      background-color: blue;
      color: yellow;
      font-size: 20px;
    } (a) on the right (b) in the middle (c) on the left
32. 32.🎯 Which sign starts an id selector? (a) . (b) & (c) @ (d) #
33. 33.🖌️ Which CSS property centres a heading? (a) font-size (b) color (c) font-family (d) text-align
34. 34.⚖️ What colour is the text of this element?
    <h1 class="note" id="logo">Hi</h1>
    CSS:
    h1 { color: white; }
    .note { color: red; } (a) blue (b) white (c) green (d) red
35. 35.🖌️ Which CSS property makes the text bold? (a) font-family (b) font-weight (c) color (d) background-color
36. 36.True or false: #end is an id selector. (a) False (b) True
37. 37.⚖️ What colour is the text of this element?
    <p class="menu" id="hero">Hi</p>
    CSS:
    p { color: yellow; }
    p { color: blue; } (a) orange (b) red (c) blue (d) yellow
38. 38.🎨 Which tag holds CSS inside the head? (a) <style> (b) <script> (c) <css> (d) <body>
39. 39.🎯 Which CSS selector matches this element?
    <span class="box" id="main">Hello</span> (a) #logo (b) .star (c) .box (d) .main
40. 40.🎨 One CSS file can style how many pages? (a) no pages (b) many pages (c) only one image (d) only one word

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