CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 793 · 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(81, 116, 165)? (a) green (b) blue (c) red
2. 2.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) turned off (c) 800px or wider (d) 800px or narrower
3. 3.What does justify-content: flex-end do? (a) packs boxes at the start (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the end
4. 4.Which of these does CSS do? (a) gives the page structure (b) shows a pop-up message (c) sets colours and fonts (d) makes headings and lists
5. 5.True or false: CSS rounds box corners. (a) False (b) True
6. 6.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 230px;
     justify-content: flex-start;
   }
   Inside are 4 boxes, each 50px wide (no margins).
7. 7.📱 The screen is 375px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 10px;
     }
   } (a) No (b) Yes
8. 8.📱 The screen is 820px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 14px;
     }
   } (a) No (b) Yes
9. 9.🖌️ Which CSS property sets the letter colour? (a) color (b) font-size (c) background-color (d) font-family
10. 10.⚖️ What colour is the text of this element?
    <h1 class="note" id="intro">Hi</h1>
    CSS:
    .note { color: orange; }
    .note { color: green; } (a) green (b) red (c) yellow (d) orange
11. 11.Which of these does CSS do? (a) gives the page structure (b) shows a pop-up message (c) changes the text size (d) reacts to a button click
12. 12.🎯 Which element does the selector .big style? (a) <p class="red"> (b) <h1 class="box"> (c) <p class="big"> (d) <p id="big">
13. 13.🌈 Which colour is #000000? (a) cyan (b) bright green (c) magenta (d) black
14. 14.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 4 (b) 3 (c) 6 (d) 2
15. 15.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) the first one (c) the shorter one (d) neither
16. 16.🎯 Which element does the selector #logo style? (a) <h1 id="end"> (b) <h1 class="logo"> (c) <h1 id="logo"> (d) <h2 class="note">
17. 17.⚖️ What colour is the text of this element?
    <h2 class="box" id="logo">Hi</h2>
    CSS:
    #logo { color: red; }
    #logo { color: purple; } (a) red (b) purple (c) yellow (d) white
18. 18.Which of these is padding? (a) space inside the border (b) space outside the border (c) a solid or dotted edge (d) the gap to other boxes
19. 19.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 160px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 50px wide (no margins).
20. 20.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 260px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 60px wide (no margins).
21. 21.🎯 What kind of selector is #hero? (a) a class selector (b) an element selector (c) an id selector
22. 22.What does justify-content: flex-start 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
23. 23.⚖️ What colour is the text of this element?
    <p class="big" id="top">Hi</p>
    CSS:
    .big { color: white; }
    p { color: green; }
    #top { color: black; } (a) green (b) black (c) red (d) white
24. 24.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
25. 25.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      font-weight: bold;
      font-size: 20px;
      color: red;
    }
26. 26.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 8px;
      }
    } (a) No (b) Yes
27. 27.🎯 Can many elements share the same class? (a) Yes (b) No
28. 28.✍️ What value is given to margin in this rule?
    .box {
      margin: 10px;
      width: 300px;
    } (a) 10px (b) margin (c) bold (d) 8px
29. 29.🎯 Which element does the selector span style? (a) <h1 class="menu"> (b) <p> (c) <span class="menu"> (d) <h2 id="top">
30. 30.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) flex-start (c) space-between (d) center
31. 31.What does justify-content: space-between do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the end (d) packs boxes at the start
32. 32.⚖️ What colour is the text of this element?
    <p class="star" id="logo">Hi</p>
    CSS:
    p { color: blue; }
    p { color: green; } (a) blue (b) yellow (c) red (d) green
33. 33.✍️ Which property is set to red in this rule?
    .note {
      width: 300px;
      margin: 10px;
      color: red;
    } (a) text-align (b) color (c) red (d) font-size
34. 34.Which of these does JavaScript do? (a) checks a quiz answer (b) gives the page structure (c) sets colours and fonts (d) lays out the page
35. 35.Which of these does HTML do? (a) changes the page live (b) gives the page structure (c) rounds box corners (d) shows a pop-up message
36. 36.🔍 Which is the odd one out? (a) checks a quiz answer (b) puts a picture on a page (c) reacts to a button click (d) shows a pop-up message
37. 37.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) red (c) black (d) blue
38. 38.What does color do? (a) centres a heading (b) sets the letter colour (c) makes letters bigger (d) picks the font style
39. 39.⚖️ What colour is the text of this element?
    <h2 class="big" id="top">Hi</h2>
    CSS:
    h2 { color: purple; }
    h2 { color: black; } (a) blue (b) black (c) green (d) purple
40. 40.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector

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