CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 923 · 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 colour is rgb(0, 255, 255)? (a) black (b) cyan (c) blue (d) white
2. 2.💪 Which flexbox property picks row or column? (a) flex-direction (b) justify-content (c) gap (d) align-items
3. 3.What does font-weight do? (a) centres a heading (b) sets the letter colour (c) makes letters bigger (d) makes the text bold
4. 4.What does font-family do? (a) sets the letter colour (b) centres a heading (c) picks the font style (d) colours behind the text
5. 5.🖌️ Which CSS property makes the text bold? (a) color (b) font-size (c) font-weight (d) font-family
6. 6.✍️ What value is given to color in this rule?
   h1 {
     color: red;
     text-align: center;
   } (a) color (b) red (c) center (d) 20px
7. 7.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 10px;
     }
   }
8. 8.Which of these is the content? (a) a solid or dotted edge (b) space inside the border (c) the text or picture (d) the gap round content
9. 9.🎯 Which CSS selector matches this element?
   <h1 class="star" id="hero">Hello</h1> (a) #star (b) h1 (c) .menu (d) #top
10. 10.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 12px;
      }
    }
11. 11.🔍 Which is the odd one out? (a) makes a form box (b) puts a picture on a page (c) makes a link (d) shows a pop-up message
12. 12.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 12px;
      }
    } (a) No (b) Yes
13. 13.📱 What does a media query check? (a) the time of day (b) the battery level (c) the page title (d) the screen width
14. 14.🖌️ How big is the text, in px?
    p {
      color: purple;
      background-color: blue;
      text-align: center;
      font-size: 20px;
    }
15. 15.✍️ What value is given to font-size in this rule?
    #top {
      text-align: center;
      font-size: 20px;
    } (a) 20px (b) center (c) font-size (d) yellow
16. 16.What does background-color do? (a) makes letters bigger (b) makes the text bold (c) centres a heading (d) colours behind the text
17. 17.What does color do? (a) picks the font style (b) makes the text bold (c) makes letters bigger (d) sets the letter colour
18. 18.🎯 Which element does the selector .box style? (a) <span id="box"> (b) <span class="star"> (c) <p class="menu"> (d) <span class="box">
19. 19.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 4 (b) 3 (c) 2 (d) 6
20. 20.📱 Responsive design means a page ___. (a) has no pictures (b) is only for laptops (c) never changes (d) fits every screen
21. 21.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 1000 (c) 255 (d) 99
22. 22.💪 Which flexbox property spaces boxes along a row? (a) display: flex (b) align-items (c) gap (d) justify-content
23. 23.What does justify-content: flex-start do? (a) packs boxes at the start (b) packs boxes at the end (c) equal gaps, none at ends (d) puts boxes in the middle
24. 24.🎨 Which tag holds CSS inside the head? (a) <body> (b) <css> (c) <style> (d) <script>
25. 25.🎯 What kind of selector is body? (a) an id selector (b) an element selector (c) a class selector
26. 26.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) black (c) blue (d) green
27. 27.🌈 In #4f0000 the red part is the hex number 4f. What is it as a normal number?
28. 28.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 20px;
      }
    } (a) No (b) Yes
29. 29.Which of these does HTML do? (a) sets colours and fonts (b) counts down a timer (c) adds space around boxes (d) makes a form box
30. 30.🎯 Which CSS selector matches this element?
    <li class="red" id="top">Hello</li> (a) #top (b) div (c) #red (d) .box
31. 31.🖌️ What colour are the letters?
    li {
      background-color: blue;
      font-size: 32px;
      text-align: left;
      color: white;
    } (a) blue (b) yellow (c) white
32. 32.⚖️ What colour is the text of this element?
    <p class="note" id="logo">Hi</p>
    CSS:
    p { color: red; }
    #logo { color: black; }
    .note { color: yellow; } (a) black (b) red (c) blue (d) yellow
33. 33.⚖️ What colour is the text of this element?
    <h2 class="box" id="top">Hi</h2>
    CSS:
    .box { color: white; }
    .box { color: purple; } (a) white (b) black (c) purple (d) orange
34. 34.True or false: CSS lays out the page. (a) True (b) False
35. 35.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) space-between (c) center (d) flex-start
36. 36.🖌️ How big is the text, in px?
    li {
      text-align: left;
      color: orange;
      font-size: 20px;
      background-color: blue;
    }
37. 37.🖌️ Which CSS property picks the font style? (a) font-size (b) background-color (c) color (d) font-family
38. 38.🎯 What kind of selector is img? (a) an id selector (b) a class selector (c) an element selector
39. 39.✍️ Which property is set to yellow in this rule?
    h1 {
      text-align: center;
      background-color: yellow;
    } (a) padding (b) background-color (c) margin (d) yellow
40. 40.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector

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