CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 916 · 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 of light is strongest in rgb(4, 220, 138)? (a) green (b) red (c) blue
2. 2.🌈 Which colour is #0000ff? (a) bright green (b) cyan (c) blue (d) white
3. 3.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) the first one (c) neither (d) the shorter one
4. 4.⚖️ What colour is the text of this element?
   <h1 class="menu" id="main">Hi</h1>
   CSS:
   .menu { color: black; }
   .menu { color: green; } (a) black (b) blue (c) purple (d) green
5. 5.📱 The screen is 700px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 12px;
     }
   } (a) No (b) Yes
6. 6.✍️ What value is given to font-size in this rule?
   h1 {
     font-size: 20px;
     text-align: center;
     padding: 8px;
     margin: 10px;
   } (a) yellow (b) font-size (c) 20px (d) center
7. 7.🌈 Which colour is rgb(255, 255, 255)? (a) red (b) white (c) blue (d) yellow
8. 8.✍️ Which property is set to 8px in this rule?
   h1 {
     font-weight: bold;
     padding: 8px;
     font-size: 20px;
   } (a) border (b) font-weight (c) padding (d) 8px
9. 9.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
10. 10.🎨 Which tag connects an outside CSS file? (a) <css> (b) <img> (c) <link> (d) <a>
11. 11.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 16px;
      }
    }
12. 12.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 50px wide (no margins).
13. 13.🌈 Which hex code is yellow? (a) #ff0000 (b) #0000ff (c) #ff00ff (d) #ffff00
14. 14.True or false: .note is a class selector. (a) True (b) False
15. 15.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
16. 16.🎨 A CSS file usually ends with which extension? (a) .js (b) .png (c) .html (d) .css
17. 17.🌈 Which colour is #ffffff? (a) blue (b) red (c) magenta (d) white
18. 18.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 80px;
      padding: 20px;
      border: 5px solid black;
      margin: 20px;
    }
19. 19.True or false: HTML shows a pop-up message. (a) True (b) False
20. 20.Which of these does HTML do? (a) changes the page live (b) lays out the page (c) gives the page structure (d) adds space around boxes
21. 21.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 60px wide (no margins).
22. 22.🖌️ What colour is behind the letters?
    li {
      font-size: 36px;
      color: blue;
      background-color: yellow;
      text-align: left;
    } (a) white (b) yellow (c) blue
23. 23.🧩 Which language checks a quiz answer? (a) CSS (b) JavaScript (c) HTML
24. 24.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      width: 300px;
      font-weight: bold;
    }
25. 25.🎯 Which element does the selector .star style? (a) <div class="note"> (b) <li id="star"> (c) <li class="menu"> (d) <li class="star">
26. 26.⚖️ What colour is the text of this element?
    <p class="menu" id="end">Hi</p>
    CSS:
    p { color: orange; }
    p { color: black; } (a) blue (b) black (c) green (d) orange
27. 27.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) red (c) green (d) blue
28. 28.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) 800px or wider (c) 800px or narrower (d) exactly 100px
29. 29.What does background-color do? (a) centres a heading (b) colours behind the text (c) picks the font style (d) makes the text bold
30. 30.⚖️ What colour is the text of this element?
    <p class="menu" id="intro">Hi</p>
    CSS:
    #intro { color: white; }
    #intro { color: red; } (a) white (b) red (c) purple (d) yellow
31. 31.🎯 How many elements on a page should have the same id? (a) 2 (b) 1 (c) any number (d) 5
32. 32.🖌️ Where does the text sit on its line?
    h1 {
      font-size: 24px;
      background-color: yellow;
      text-align: left;
      color: black;
    } (a) in the middle (b) on the left (c) on the right
33. 33.🎯 Which CSS selector matches this element?
    <h1 class="box" id="hero">Hello</h1> (a) h1 (b) #box (c) .star (d) #top
34. 34.Which of these does HTML do? (a) puts a picture on a page (b) lays out the page (c) shows a pop-up message (d) checks a quiz answer
35. 35.💪 Which flexbox property picks row or column? (a) align-items (b) flex-direction (c) display: flex (d) gap
36. 36.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) green (c) blue (d) red
37. 37.⚖️ What colour is the text of this element?
    <h1 class="red" id="logo">Hi</h1>
    CSS:
    #logo { color: green; }
    h1 { color: white; }
    .red { color: black; } (a) red (b) black (c) green (d) white
38. 38.📱 Responsive design means a page ___. (a) has no pictures (b) is only for laptops (c) fits every screen (d) never changes
39. 39.🖌️ What colour are the letters?
    p {
      font-size: 16px;
      text-align: center;
      color: orange;
      background-color: black;
    } (a) orange (b) yellow (c) black
40. 40.What does justify-content: flex-start do? (a) packs boxes at the end (b) equal gaps, none at ends (c) packs boxes at the start (d) puts boxes in the middle

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