CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 306 · 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 selector matches this element?
   <li class="big" id="hero">Hello</li> (a) .big (b) #top (c) #big (d) .hero
2. 2.✍️ What value is given to width in this rule?
   li {
     width: 300px;
     border: 2px solid;
   } (a) italic (b) red (c) 300px (d) width
3. 3.What does font-size do? (a) sets the letter colour (b) colours behind the text (c) makes the text bold (d) makes letters bigger
4. 4.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 100px;
     justify-content: space-between;
   }
   Inside are 2 boxes, each 40px wide (no margins).
5. 5.🎯 Which CSS selector matches this element?
   <span class="red" id="intro">Hello</span> (a) .red (b) #red (c) p (d) #main
6. 6.✍️ What is the selector in this CSS rule?
   .note {
     background-color: yellow;
     color: red;
   } (a) #top (b) background-color (c) red (d) .note
7. 7.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 26px;
     }
   }
8. 8.🎯 Which sign starts a class selector? (a) & (b) @ (c) . (d) #
9. 9.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) red (c) green (d) blue
10. 10.🎯 What kind of selector is .big? (a) a class selector (b) an id selector (c) an element selector
11. 11.🔍 Which is the odd one out? (a) makes headings and lists (b) shows a pop-up message (c) gives the page structure (d) puts a picture on a page
12. 12.🖌️ Which CSS property makes the text bold? (a) color (b) text-align (c) font-family (d) font-weight
13. 13.True or false: .big is an element selector. (a) True (b) False
14. 14.💪 Which justify-content value equal gaps, none at ends? (a) flex-end (b) space-between (c) center (d) flex-start
15. 15.✍️ Which sign goes between a property and its value? (a) : (b) = (c) ; (d) -
16. 16.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 70px;
      padding: 15px;
      border: 5px solid black;
      margin: 5px;
    }
17. 17.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 28px;
      }
    }
18. 18.True or false: JavaScript puts a picture on a page. (a) True (b) False
19. 19.True or false: #hero is an element selector. (a) True (b) False
20. 20.🔍 Which is the odd one out? (a) rounds box corners (b) changes the text size (c) makes a link (d) lays out the page
21. 21.🖌️ How big is the text, in px?
    p {
      color: black;
      text-align: right;
      font-size: 12px;
      background-color: green;
    }
22. 22.🌈 Which colour of light is strongest in rgb(64, 59, 236)? (a) blue (b) red (c) green
23. 23.✍️ In color: blue; which part is the property? (a) blue (b) ; (c) : (d) color
24. 24.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the end (c) packs boxes at the start (d) equal gaps, none at ends
25. 25.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 20px;
      }
    } (a) No (b) Yes
26. 26.✍️ What value is given to border in this rule?
    .note {
      border: 2px solid;
      color: red;
    } (a) border (b) 2px solid (c) italic (d) 300px
27. 27.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 610px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 100px wide (no margins).
28. 28.Which of these does HTML do? (a) makes a form box (b) sets colours and fonts (c) adds space around boxes (d) changes the text size
29. 29.⚖️ What colour is the text of this element?
    <h1 class="big" id="hero">Hi</h1>
    CSS:
    h1 { color: purple; }
    .big { color: green; } (a) white (b) orange (c) green (d) purple
30. 30.🎨 Which attribute adds CSS inside one tag? (a) alt (b) src (c) href (d) style
31. 31.Which of these is padding? (a) the line round the box (b) the text or picture (c) space inside the border (d) space outside the border
32. 32.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 20px;
      }
    } (a) No (b) Yes
33. 33.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 6px;
      }
    } (a) No (b) Yes
34. 34.💪 Which flexbox property turns on flexbox? (a) justify-content (b) display: flex (c) align-items (d) flex-direction
35. 35.🧩 Which language lays out the page? (a) HTML (b) CSS (c) JavaScript
36. 36.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) blue (c) white (d) red
37. 37.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 100px wide (no margins).
38. 38.True or false: .note is a class selector. (a) True (b) False
39. 39.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) 800px or wider (c) 800px or narrower (d) exactly 100px
40. 40.⚖️ What colour is the text of this element?
    <h1 class="note" id="main">Hi</h1>
    CSS:
    #main { color: white; }
    #main { color: blue; } (a) blue (b) green (c) white (d) yellow

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