CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 650 · 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.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 20px;
     }
   }
2. 2.True or false: #end is an id selector. (a) False (b) True
3. 3.✍️ In color: blue; which part is the value? (a) ; (b) : (c) color (d) blue
4. 4.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 22px;
     }
   }
5. 5.🎯 Which CSS selector matches this element?
   <div class="note" id="hero">Hello</div> (a) span (b) #note (c) .hero (d) div
6. 6.What does font-family do? (a) colours behind the text (b) picks the font style (c) centres a heading (d) sets the letter colour
7. 7.Which of these is the content? (a) a solid or dotted edge (b) the gap round content (c) the text or picture (d) the line round the box
8. 8.🎯 How many elements on a page should have the same id? (a) any number (b) 5 (c) 2 (d) 1
9. 9.✍️ What is the selector in this CSS rule?
   p {
     background-color: yellow;
     font-weight: bold;
   } (a) background-color (b) p (c) .note (d) bold
10. 10.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      font-weight: bold;
      text-align: center;
      padding: 8px;
      color: red;
    }
11. 11.True or false: the border is space inside the border. (a) False (b) True
12. 12.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    }
13. 13.🖌️ Which CSS property sets the letter colour? (a) background-color (b) font-family (c) text-align (d) color
14. 14.✍️ How does a CSS comment start? (a) <!-- (b) // (c) # (d) /*
15. 15.🎯 Which CSS selector matches this element?
    <p class="star" id="intro">Hello</p> (a) .menu (b) #intro (c) .intro (d) h1
16. 16.True or false: HTML changes the page live. (a) True (b) False
17. 17.🖌️ What colour are the letters?
    li {
      background-color: yellow;
      text-align: left;
      font-size: 12px;
      color: orange;
    } (a) green (b) orange (c) yellow
18. 18.🌈 Which colour is #000000? (a) black (b) red (c) blue (d) magenta
19. 19.What does justify-content: space-between do? (a) puts boxes in the middle (b) packs boxes at the end (c) equal gaps, none at ends (d) packs boxes at the start
20. 20.🖌️ How big is the text, in px?
    h2 {
      text-align: center;
      font-size: 40px;
      background-color: purple;
      color: red;
    }
21. 21.📱 What does a media query check? (a) the screen width (b) the page title (c) the battery level (d) the time of day
22. 22.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) packs boxes at the end (c) packs boxes at the start (d) puts boxes in the middle
23. 23.What does justify-content: center 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
24. 24.What does font-size do? (a) colours behind the text (b) makes letters bigger (c) centres a heading (d) picks the font style
25. 25.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 140px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 40px wide (no margins).
26. 26.✍️ Which sign ends each CSS declaration? (a) ; (b) : (c) . (d) ,
27. 27.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
28. 28.Which of these does HTML do? (a) changes the page live (b) sets colours and fonts (c) gives the page structure (d) lays out the page
29. 29.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }
30. 30.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) red (c) green (d) black
31. 31.✍️ What is the selector in this CSS rule?
    li {
      color: red;
      background-color: yellow;
      margin: 10px;
    } (a) body (b) yellow (c) li (d) color
32. 32.🎯 Which element does the selector .box style? (a) <h1 class="star"> (b) <h1 class="box"> (c) <h2 class="menu"> (d) <h1 id="box">
33. 33.✍️ In color: blue; which part is the property? (a) : (b) color (c) ; (d) blue
34. 34.What does justify-content: flex-end do? (a) packs boxes at the start (b) puts boxes in the middle (c) packs boxes at the end (d) equal gaps, none at ends
35. 35.✍️ Which sign goes between a property and its value? (a) = (b) - (c) ; (d) :
36. 36.🖌️ Which CSS property picks the font style? (a) font-family (b) background-color (c) font-size (d) text-align
37. 37.🌈 Which hex code is red? (a) #00ffff (b) #0000ff (c) #ff00ff (d) #ff0000
38. 38.🎯 Can many elements share the same class? (a) No (b) Yes
39. 39.🖌️ Where does the text sit on its line?
    li {
      color: orange;
      background-color: green;
      font-size: 32px;
      text-align: right;
    } (a) in the middle (b) on the left (c) on the right
40. 40.🎨 Which tag connects an outside CSS file? (a) <css> (b) <a> (c) <img> (d) <link>

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