CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 520 · 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 many elements on a page should have the same id? (a) any number (b) 1 (c) 5 (d) 2
2. 2.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 220px;
     justify-content: center;
   }
   Inside are 2 boxes, each 60px wide (no margins).
3. 3.🌈 In #002500 the green part is the hex number 25. What is it as a normal number?
4. 4.🔍 Which is the odd one out? (a) counts down a timer (b) puts a picture on a page (c) shows a pop-up message (d) changes the page live
5. 5.✍️ How many declarations (property: value pairs) are in this rule?
   h1 {
     color: red;
     font-weight: bold;
   }
6. 6.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 2 (b) 4 (c) 3 (d) 6
7. 7.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
8. 8.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 360px;
     justify-content: center;
   }
   Inside are 4 boxes, each 50px wide (no margins).
9. 9.🎯 Which sign starts an id selector? (a) @ (b) . (c) # (d) &
10. 10.🧩 Which language sets colours and fonts? (a) HTML (b) CSS (c) JavaScript
11. 11.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 250px;
      padding: 30px;
      border: 5px solid black;
      margin: 20px;
    }
12. 12.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) neither (c) the first one (d) the later one
13. 13.✍️ Which sign goes between a property and its value? (a) - (b) ; (c) = (d) :
14. 14.📱 What does a media query check? (a) the battery level (b) the time of day (c) the screen width (d) the page title
15. 15.What does color do? (a) picks the font style (b) sets the letter colour (c) makes letters bigger (d) colours behind the text
16. 16.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 110px;
      padding: 10px;
      border: 2px solid black;
      margin: 10px;
    }
17. 17.🧩 Which language puts a picture on a page? (a) HTML (b) JavaScript (c) CSS
18. 18.Which of these does JavaScript do? (a) makes headings and lists (b) gives the page structure (c) makes a link (d) changes the page live
19. 19.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 40px wide (no margins).
20. 20.Which of these does JavaScript do? (a) lays out the page (b) shows a pop-up message (c) makes a link (d) makes headings and lists
21. 21.🎯 Which element does the selector .note style? (a) <h2 class="red"> (b) <h1 id="note"> (c) <h1 class="note"> (d) <h1 class="big">
22. 22.Which of these does CSS do? (a) checks a quiz answer (b) counts down a timer (c) adds space around boxes (d) gives the page structure
23. 23.💪 Which justify-content value packs boxes at the start? (a) flex-start (b) center (c) space-between (d) flex-end
24. 24.💪 Which flexbox property picks row or column? (a) justify-content (b) align-items (c) display: flex (d) flex-direction
25. 25.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    }
26. 26.What does font-weight do? (a) sets the letter colour (b) centres a heading (c) picks the font style (d) makes the text bold
27. 27.🎨 A CSS file usually ends with which extension? (a) .js (b) .css (c) .html (d) .png
28. 28.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) black (c) blue (d) green
29. 29.True or false: JavaScript counts down a timer. (a) False (b) True
30. 30.True or false: CSS changes the text size. (a) False (b) True
31. 31.🖌️ What colour is behind the letters?
    p {
      text-align: right;
      background-color: blue;
      color: black;
      font-size: 12px;
    } (a) red (b) blue (c) black
32. 32.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      font-style: italic;
      font-weight: bold;
      margin: 10px;
    }
33. 33.🖌️ Which CSS property makes letters bigger? (a) font-size (b) font-family (c) font-weight (d) color
34. 34.🎯 Which element does the selector span style? (a) <h1 class="box"> (b) <h2 id="main"> (c) <span class="box"> (d) <p>
35. 35.🖌️ What colour are the letters?
    h2 {
      font-size: 36px;
      background-color: red;
      text-align: left;
      color: blue;
    } (a) black (b) red (c) blue
36. 36.✍️ Which property is set to red in this rule?
    h2 {
      margin: 10px;
      color: red;
      text-align: center;
    } (a) red (b) text-align (c) font-size (d) color
37. 37.🎯 Which sign starts a class selector? (a) @ (b) & (c) . (d) #
38. 38.✍️ Which property is set to italic in this rule?
    .box {
      border: 2px solid;
      font-style: italic;
    } (a) italic (b) font-size (c) font-style (d) color
39. 39.🎯 What kind of selector is #main? (a) an id selector (b) an element selector (c) a class selector
40. 40.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 250px;
      padding: 30px;
      border: 1px solid black;
      margin: 15px;
    }

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