CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 577 · 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 colour is behind the letters?
   h1 {
     text-align: center;
     background-color: orange;
     font-size: 40px;
     color: red;
   } (a) red (b) yellow (c) orange
2. 2.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 18px;
     }
   }
3. 3.🎯 How many elements on a page should have the same id? (a) 1 (b) 2 (c) 5 (d) any number
4. 4.🧩 Which language puts a picture on a page? (a) CSS (b) HTML (c) JavaScript
5. 5.Which of these does CSS do? (a) checks a quiz answer (b) changes the page live (c) puts a picture on a page (d) adds space around boxes
6. 6.📱 The screen is 540px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 14px;
     }
   } (a) No (b) Yes
7. 7.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 16px;
     }
   }
8. 8.⚖️ What colour is the text of this element?
   <h1 class="note" id="main">Hi</h1>
   CSS:
   h1 { color: green; }
   h1 { color: blue; } (a) white (b) red (c) blue (d) green
9. 9.🔍 Which is the odd one out? (a) changes the page live (b) rounds box corners (c) shows a pop-up message (d) reacts to a button click
10. 10.✍️ In color: blue; which part is the property? (a) : (b) blue (c) ; (d) color
11. 11.⚖️ What colour is the text of this element?
    <h1 class="red" id="main">Hi</h1>
    CSS:
    .red { color: black; }
    .red { color: yellow; } (a) blue (b) black (c) orange (d) yellow
12. 12.True or false: .menu is an id selector. (a) True (b) False
13. 13.🧩 Which language sets colours and fonts? (a) CSS (b) JavaScript (c) HTML
14. 14.🌈 In #160000 the red part is the hex number 16. What is it as a normal number?
15. 15.True or false: HTML puts a picture on a page. (a) False (b) True
16. 16.⚖️ What colour is the text of this element?
    <p class="big" id="end">Hi</p>
    CSS:
    .big { color: orange; }
    .big { color: purple; } (a) blue (b) yellow (c) orange (d) purple
17. 17.✍️ In color: blue; which part is the value? (a) color (b) ; (c) blue (d) :
18. 18.True or false: JavaScript adds space around boxes. (a) False (b) True
19. 19.Which of these does CSS do? (a) checks a quiz answer (b) makes a form box (c) makes headings and lists (d) rounds box corners
20. 20.🧩 Which language reacts to a button click? (a) CSS (b) JavaScript (c) HTML
21. 21.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 140px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 40px wide (no margins).
22. 22.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 16px;
      }
    }
23. 23.🎯 Which CSS selector matches this element?
    <h1 class="star" id="hero">Hello</h1> (a) .star (b) #star (c) .menu (d) h2
24. 24.Which of these is margin? (a) space outside the border (b) the text or picture (c) a solid or dotted edge (d) the gap round content
25. 25.🎯 Which CSS selector matches this element?
    <h2 class="note" id="hero">Hello</h2> (a) #hero (b) .hero (c) .big (d) #note
26. 26.What does justify-content: flex-start 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
27. 27.⚖️ What colour is the text of this element?
    <h2 class="star" id="top">Hi</h2>
    CSS:
    h2 { color: white; }
    h2 { color: green; } (a) purple (b) white (c) green (d) black
28. 28.🎯 Which sign starts an id selector? (a) # (b) @ (c) . (d) &
29. 29.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    } (a) No (b) Yes
30. 30.True or false: the content is space outside the border. (a) False (b) True
31. 31.✍️ Which property is set to center in this rule?
    #top {
      text-align: center;
      color: red;
      font-weight: bold;
      border: 2px solid;
    } (a) background-color (b) center (c) text-align (d) margin
32. 32.✍️ Which property is set to center in this rule?
    h2 {
      margin: 10px;
      text-align: center;
    } (a) margin (b) text-align (c) background-color (d) center
33. 33.🌈 Which colour is #00ffff? (a) bright green (b) cyan (c) blue (d) black
34. 34.🌈 Which colour is rgb(0, 255, 0)? (a) red (b) bright green (c) magenta (d) blue
35. 35.🌈 What is the biggest number one colour can have in rgb()? (a) 1000 (b) 255 (c) 99 (d) 100
36. 36.Which of these does HTML do? (a) lays out the page (b) changes the text size (c) puts a picture on a page (d) sets colours and fonts
37. 37.🎯 Which CSS selector matches this element?
    <h1 class="star" id="top">Hello</h1> (a) #intro (b) .top (c) #top (d) .menu
38. 38.🖌️ Where does the text sit on its line?
    h1 {
      background-color: black;
      text-align: center;
      font-size: 16px;
      color: purple;
    } (a) on the left (b) on the right (c) in the middle
39. 39.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the viewport meta tag (c) the br tag (d) the hr tag
40. 40.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the first one (c) the shorter one (d) the later one

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