CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 22 · 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 language rounds box corners? (a) HTML (b) JavaScript (c) CSS
2. 2.⚖️ What colour is the text of this element?
   <p class="menu" id="end">Hi</p>
   CSS:
   .menu { color: orange; }
   p { color: blue; } (a) blue (b) orange (c) white (d) black
3. 3.🖌️ Which CSS property centres a heading? (a) color (b) font-size (c) font-family (d) text-align
4. 4.🖌️ What colour are the letters?
   li {
     background-color: blue;
     text-align: center;
     font-size: 16px;
     color: white;
   } (a) blue (b) white (c) red
5. 5.🔍 Which is the odd one out? (a) adds space around boxes (b) makes a form box (c) gives the page structure (d) makes headings and lists
6. 6.✍️ Which sign goes between a property and its value? (a) = (b) - (c) : (d) ;
7. 7.True or false: #hero is a class selector. (a) False (b) True
8. 8.📱 Responsive design means a page ___. (a) has no pictures (b) fits every screen (c) is only for laptops (d) never changes
9. 9.🎯 Which CSS selector matches this element?
   <h2 class="note" id="intro">Hello</h2> (a) #note (b) #intro (c) .intro (d) li
10. 10.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 370px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 100px wide (no margins).
11. 11.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      margin: 10px;
      padding: 8px;
      font-size: 20px;
    }
12. 12.✍️ Which sign ends each CSS declaration? (a) . (b) ; (c) , (d) :
13. 13.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 255 (c) 1000 (d) 99
14. 14.🎯 What kind of selector is #main? (a) a class selector (b) an element selector (c) an id selector
15. 15.⚖️ What colour is the text of this element?
    <h1 class="menu" id="hero">Hi</h1>
    CSS:
    #hero { color: red; }
    .menu { color: white; } (a) white (b) green (c) yellow (d) red
16. 16.🖌️ What colour is behind the letters?
    h2 {
      color: green;
      background-color: blue;
      text-align: left;
      font-size: 32px;
    } (a) orange (b) blue (c) green
17. 17.🔍 Which is the odd one out? (a) makes headings and lists (b) reacts to a button click (c) puts a picture on a page (d) makes a link
18. 18.🌈 Which colour is rgb(0, 0, 255)? (a) black (b) red (c) cyan (d) blue
19. 19.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) the later one (d) neither
20. 20.🎨 Which tag connects an outside CSS file? (a) <img> (b) <css> (c) <link> (d) <a>
21. 21.🖌️ What colour are the letters?
    p {
      text-align: left;
      color: green;
      background-color: yellow;
      font-size: 12px;
    } (a) red (b) yellow (c) green
22. 22.⚖️ What colour is the text of this element?
    <h2 class="note" id="main">Hi</h2>
    CSS:
    #main { color: orange; }
    h2 { color: black; } (a) black (b) red (c) orange (d) yellow
23. 23.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
24. 24.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 12px;
      }
    } (a) No (b) Yes
25. 25.What does justify-content: space-between do? (a) equal gaps, none at ends (b) packs boxes at the start (c) puts boxes in the middle (d) packs boxes at the end
26. 26.🌈 Which colour is #000000? (a) black (b) white (c) magenta (d) blue
27. 27.💪 Which justify-content value packs boxes at the start? (a) space-between (b) flex-start (c) center (d) flex-end
28. 28.✍️ What is the selector in this CSS rule?
    h2 {
      padding: 8px;
      font-style: italic;
      margin: 10px;
    } (a) italic (b) h2 (c) h1 (d) padding
29. 29.🎯 What kind of selector is .big? (a) a class selector (b) an element selector (c) an id selector
30. 30.🎯 What kind of selector is li? (a) an element selector (b) an id selector (c) a class selector
31. 31.🎯 Which CSS selector matches this element?
    <li class="note" id="top">Hello</li> (a) #note (b) .note (c) .big (d) .top
32. 32.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 3 (b) 6 (c) 4 (d) 2
33. 33.🖌️ What colour are the letters?
    li {
      text-align: left;
      background-color: green;
      color: white;
      font-size: 32px;
    } (a) white (b) green (c) red
34. 34.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      border: 2px solid;
      font-size: 20px;
      width: 300px;
    }
35. 35.What does color do? (a) colours behind the text (b) picks the font style (c) makes letters bigger (d) sets the letter colour
36. 36.⚖️ What colour is the text of this element?
    <p class="red" id="intro">Hi</p>
    CSS:
    .red { color: blue; }
    p { color: purple; } (a) red (b) black (c) blue (d) purple
37. 37.🖌️ How big is the text, in px?
    h2 {
      font-size: 40px;
      background-color: blue;
      color: green;
      text-align: left;
    }
38. 38.🖌️ What colour are the letters?
    li {
      text-align: center;
      font-size: 36px;
      color: blue;
      background-color: green;
    } (a) black (b) blue (c) green
39. 39.🖌️ What colour is behind the letters?
    h2 {
      font-size: 20px;
      text-align: left;
      background-color: red;
      color: purple;
    } (a) green (b) purple (c) red
40. 40.What does justify-content: center do? (a) packs boxes at the end (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the start

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