CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 887 · 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.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 210px;
     padding: 20px;
     border: 4px solid black;
     margin: 0px;
   }
2. 2.✍️ Which sign ends each CSS declaration? (a) : (b) , (c) ; (d) .
3. 3.🎯 Which sign starts an id selector? (a) . (b) # (c) @ (d) &
4. 4.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 10px;
     }
   }
5. 5.✍️ Which property is set to italic in this rule?
   .note {
     border: 2px solid;
     font-style: italic;
     margin: 10px;
     text-align: center;
   } (a) font-size (b) italic (c) font-style (d) color
6. 6.💪 Which flexbox property picks row or column? (a) flex-direction (b) align-items (c) gap (d) justify-content
7. 7.✍️ In color: blue; which part is the value? (a) color (b) : (c) ; (d) blue
8. 8.🎯 What kind of selector is .star? (a) an element selector (b) a class selector (c) an id selector
9. 9.Which of these is the content? (a) the gap to other boxes (b) the text or picture (c) a solid or dotted edge (d) the gap round content
10. 10.📦 In the box model, which part is space outside the border? (a) padding (b) margin (c) content (d) border
11. 11.📦 In the box model, which part is the gap to other boxes? (a) content (b) border (c) padding (d) margin
12. 12.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 270px;
      padding: 30px;
      border: 1px solid black;
      margin: 5px;
    }
13. 13.🌈 Which hex code is red? (a) #ff0000 (b) #0000ff (c) #ff00ff (d) #ffff00
14. 14.🖌️ What colour is behind the letters?
    p {
      background-color: purple;
      color: yellow;
      font-size: 20px;
      text-align: right;
    } (a) red (b) yellow (c) purple
15. 15.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) turned off (c) 800px or narrower (d) 800px or wider
16. 16.🖌️ Which CSS property picks the font style? (a) font-weight (b) font-family (c) color (d) text-align
17. 17.True or false: HTML reacts to a button click. (a) False (b) True
18. 18.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
19. 19.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 26px;
      }
    }
20. 20.🖌️ How big is the text, in px?
    p {
      text-align: right;
      background-color: white;
      color: blue;
      font-size: 36px;
    }
21. 21.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) the shorter one (c) the first one (d) neither
22. 22.💪 Which justify-content value packs boxes at the start? (a) flex-start (b) flex-end (c) center (d) space-between
23. 23.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) turned off (c) 600px or narrower (d) 600px or wider
24. 24.✍️ How does a CSS comment start? (a) /* (b) # (c) <!-- (d) //
25. 25.✍️ Which property is set to center in this rule?
    .note {
      color: red;
      font-weight: bold;
      text-align: center;
      background-color: yellow;
    } (a) text-align (b) margin (c) background-color (d) center
26. 26.⚖️ What colour is the text of this element?
    <p class="star" id="logo">Hi</p>
    CSS:
    p { color: white; }
    p { color: purple; } (a) black (b) purple (c) white (d) green
27. 27.🎯 Which sign starts a class selector? (a) # (b) & (c) @ (d) .
28. 28.⚖️ What colour is the text of this element?
    <h1 class="note" id="end">Hi</h1>
    CSS:
    h1 { color: orange; }
    .note { color: white; } (a) orange (b) black (c) white (d) purple
29. 29.🖌️ Which CSS property centres a heading? (a) font-family (b) font-weight (c) text-align (d) font-size
30. 30.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 60px;
      padding: 5px;
      border: 1px solid black;
      margin: 5px;
    }
31. 31.✍️ In color: blue; which part is the property? (a) : (b) ; (c) blue (d) color
32. 32.Which of these does HTML do? (a) makes a form box (b) reacts to a button click (c) adds space around boxes (d) lays out the page
33. 33.🔍 Which is the odd one out? (a) makes headings and lists (b) makes a link (c) checks a quiz answer (d) puts a picture on a page
34. 34.🎯 Which CSS selector matches this element?
    <p class="big" id="logo">Hello</p> (a) #end (b) .big (c) .red (d) #big
35. 35.True or false: HTML changes the text size. (a) True (b) False
36. 36.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Creative Sheet System (c) Computer Style Sheets (d) Cascading Style Sheets
37. 37.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 8px;
      }
    }
38. 38.🔍 Which is the odd one out? (a) makes a form box (b) checks a quiz answer (c) counts down a timer (d) changes the page live
39. 39.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 130px;
      padding: 15px;
      border: 5px solid black;
      margin: 20px;
    }
40. 40.🎨 One CSS file can style how many pages? (a) many pages (b) no pages (c) only one word (d) only one image

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