CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 894 · 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 selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
2. 2.✍️ What value is given to color in this rule?
   p {
     font-style: italic;
     color: red;
   } (a) center (b) red (c) 20px (d) color
3. 3.🖌️ How big is the text, in px?
   p {
     font-size: 40px;
     background-color: red;
     text-align: left;
     color: orange;
   }
4. 4.🎯 Which CSS selector matches this element?
   <div class="menu" id="end">Hello</div> (a) .note (b) .end (c) #menu (d) .menu
5. 5.✍️ What value is given to font-size in this rule?
   h1 {
     font-style: italic;
     font-size: 20px;
     background-color: yellow;
     margin: 10px;
   } (a) font-size (b) 20px (c) center (d) yellow
6. 6.📱 Responsive design means a page ___. (a) is only for laptops (b) has no pictures (c) fits every screen (d) never changes
7. 7.⚖️ What colour is the text of this element?
   <p class="menu" id="hero">Hi</p>
   CSS:
   p { color: yellow; }
   .menu { color: white; }
   #hero { color: black; } (a) white (b) blue (c) yellow (d) black
8. 8.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 320px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 80px wide (no margins).
9. 9.What does justify-content: center 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
10. 10.⚖️ Which selector is the weakest? (a) an id selector (b) an element selector (c) a class selector
11. 11.✍️ What value is given to padding in this rule?
    body {
      padding: 8px;
      background-color: yellow;
      font-style: italic;
    } (a) padding (b) 2px solid (c) 8px (d) bold
12. 12.🌈 Which colour is rgb(255, 255, 255)? (a) white (b) yellow (c) blue (d) magenta
13. 13.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 22px;
      }
    }
14. 14.🌈 Which hex code is magenta? (a) #000000 (b) #00ffff (c) #ffffff (d) #ff00ff
15. 15.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 20px;
      }
    }
16. 16.🎯 Which CSS selector matches this element?
    <div class="big" id="intro">Hello</div> (a) .intro (b) #big (c) #main (d) .big
17. 17.🖌️ Where does the text sit on its line?
    h1 {
      color: purple;
      background-color: black;
      font-size: 40px;
      text-align: left;
    } (a) on the left (b) in the middle (c) on the right
18. 18.🎨 Which attribute adds CSS inside one tag? (a) href (b) src (c) alt (d) style
19. 19.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
20. 20.📦 In the box model, which part is space outside the border? (a) padding (b) margin (c) content (d) border
21. 21.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) black (c) green (d) red
22. 22.🎯 Which CSS selector matches this element?
    <div class="note" id="end">Hello</div> (a) div (b) #note (c) span (d) .big
23. 23.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) the later one (d) neither
24. 24.True or false: the border is a solid or dotted edge. (a) False (b) True
25. 25.⚖️ What colour is the text of this element?
    <h1 class="big" id="intro">Hi</h1>
    CSS:
    #intro { color: purple; }
    h1 { color: white; }
    .big { color: blue; } (a) white (b) red (c) purple (d) blue
26. 26.✍️ What is the selector in this CSS rule?
    .box {
      margin: 10px;
      font-style: italic;
      width: 300px;
      font-weight: bold;
    } (a) italic (b) .box (c) h2 (d) margin
27. 27.⚖️ What colour is the text of this element?
    <h2 class="star" id="hero">Hi</h2>
    CSS:
    .star { color: blue; }
    .star { color: purple; } (a) blue (b) yellow (c) purple (d) orange
28. 28.🖌️ Which CSS property centres a heading? (a) text-align (b) font-size (c) color (d) font-family
29. 29.🎯 What kind of selector is .big? (a) an id selector (b) an element selector (c) a class selector
30. 30.🖌️ Which CSS property makes letters bigger? (a) font-size (b) text-align (c) font-weight (d) font-family
31. 31.What does justify-content: space-between do? (a) packs boxes at the end (b) packs boxes at the start (c) puts boxes in the middle (d) equal gaps, none at ends
32. 32.Which of these does HTML do? (a) counts down a timer (b) changes the text size (c) gives the page structure (d) adds space around boxes
33. 33.Which of these does JavaScript do? (a) checks a quiz answer (b) makes a form box (c) gives the page structure (d) puts a picture on a page
34. 34.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) blue (c) red (d) white
35. 35.🔍 Which is the odd one out? (a) makes a form box (b) makes headings and lists (c) makes a link (d) changes the text size
36. 36.Which of these does CSS do? (a) changes the page live (b) puts a picture on a page (c) changes the text size (d) makes a link
37. 37.🌈 Which colour is #00ff00? (a) blue (b) magenta (c) cyan (d) bright green
38. 38.✍️ What value is given to font-size in this rule?
    li {
      padding: 8px;
      font-size: 20px;
      font-style: italic;
    } (a) yellow (b) center (c) 20px (d) font-size
39. 39.🎯 What kind of selector is #top? (a) an element selector (b) an id selector (c) a class selector
40. 40.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 160px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 50px wide (no margins).

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