CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 110 · 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 colours behind the text? (a) background-color (b) color (c) font-weight (d) font-size
2. 2.🎯 Which CSS selector matches this element?
   <h2 class="note" id="intro">Hello</h2> (a) .intro (b) li (c) .big (d) h2
3. 3.✍️ What value is given to text-align in this rule?
   #top {
     text-align: center;
     font-style: italic;
   } (a) 10px (b) center (c) yellow (d) text-align
4. 4.✍️ Which property is set to red in this rule?
   p {
     color: red;
     font-style: italic;
   } (a) font-size (b) text-align (c) color (d) red
5. 5.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 280px;
     padding: 5px;
     border: 4px solid black;
     margin: 10px;
   }
6. 6.📱 The screen is 700px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 10px;
     }
   } (a) No (b) Yes
7. 7.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 2 (b) 6 (c) 4 (d) 3
8. 8.True or false: the border is the line round the box. (a) True (b) False
9. 9.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 160px;
     padding: 15px;
     border: 3px solid black;
     margin: 20px;
   }
10. 10.✍️ How does a CSS comment start? (a) // (b) # (c) <!-- (d) /*
11. 11.🌈 In #008000 the green part is the hex number 80. What is it as a normal number?
12. 12.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
13. 13.Which of these does HTML do? (a) puts a picture on a page (b) changes the page live (c) sets colours and fonts (d) lays out the page
14. 14.✍️ Which sign goes between a property and its value? (a) ; (b) = (c) : (d) -
15. 15.⚖️ What colour is the text of this element?
    <p class="star" id="top">Hi</p>
    CSS:
    .star { color: white; }
    #top { color: purple; } (a) white (b) black (c) purple (d) yellow
16. 16.📦 In the box model, which part is space inside the border? (a) margin (b) padding (c) content (d) border
17. 17.Which of these is padding? (a) space inside the border (b) the gap to other boxes (c) space outside the border (d) the line round the box
18. 18.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 32px;
      }
    }
19. 19.🔍 Which is the odd one out? (a) makes a link (b) gives the page structure (c) makes headings and lists (d) shows a pop-up message
20. 20.Which of these does CSS do? (a) shows a pop-up message (b) makes headings and lists (c) counts down a timer (d) sets colours and fonts
21. 21.True or false: body is an element selector. (a) False (b) True
22. 22.🌈 What is the biggest number one colour can have in rgb()? (a) 255 (b) 1000 (c) 100 (d) 99
23. 23.⚖️ What colour is the text of this element?
    <h2 class="big" id="end">Hi</h2>
    CSS:
    h2 { color: red; }
    h2 { color: orange; } (a) yellow (b) white (c) orange (d) red
24. 24.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 22px;
      }
    }
25. 25.✍️ In color: blue; which part is the property? (a) blue (b) color (c) ; (d) :
26. 26.🔍 Which is the odd one out? (a) sets colours and fonts (b) makes a form box (c) changes the text size (d) adds space around boxes
27. 27.🌈 Which colour is #00ffff? (a) black (b) cyan (c) blue (d) magenta
28. 28.🎨 Which tag connects an outside CSS file? (a) <css> (b) <img> (c) <a> (d) <link>
29. 29.⚖️ What colour is the text of this element?
    <p class="red" id="intro">Hi</p>
    CSS:
    p { color: white; }
    p { color: red; } (a) red (b) green (c) blue (d) white
30. 30.Which of these does JavaScript do? (a) rounds box corners (b) reacts to a button click (c) sets colours and fonts (d) lays out the page
31. 31.True or false: JavaScript rounds box corners. (a) True (b) False
32. 32.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 190px;
      padding: 5px;
      border: 3px solid black;
      margin: 0px;
    }
33. 33.Which of these does JavaScript do? (a) changes the page live (b) lays out the page (c) adds space around boxes (d) gives the page structure
34. 34.✍️ What is the selector in this CSS rule?
    .box {
      width: 300px;
      text-align: center;
      font-size: 20px;
    } (a) width (b) .box (c) h2 (d) center
35. 35.📦 In the box model, which part is the gap to other boxes? (a) border (b) content (c) padding (d) margin
36. 36.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }
37. 37.⚖️ Which selector is the strongest? (a) an element selector (b) an id selector (c) a class selector
38. 38.🎯 What kind of selector is #hero? (a) an id selector (b) an element selector (c) a class selector
39. 39.🌈 Which colour is rgb(0, 0, 0)? (a) white (b) black (c) blue (d) red
40. 40.⚖️ What colour is the text of this element?
    <h2 class="note" id="intro">Hi</h2>
    CSS:
    h2 { color: orange; }
    .note { color: purple; } (a) orange (b) purple (c) blue (d) green

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