CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 455 · 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.True or false: padding is space outside the border. (a) True (b) False
2. 2.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
3. 3.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 18px;
     }
   }
4. 4.🖌️ How big is the text, in px?
   h2 {
     font-size: 24px;
     text-align: left;
     background-color: orange;
     color: green;
   }
5. 5.Which of these is the border? (a) the gap round content (b) the text or picture (c) space outside the border (d) a solid or dotted edge
6. 6.📱 Responsive design means a page ___. (a) is only for laptops (b) never changes (c) fits every screen (d) has no pictures
7. 7.✍️ What value is given to color in this rule?
   #top {
     color: red;
     padding: 8px;
   } (a) 20px (b) color (c) center (d) red
8. 8.🌈 Which colour is #ffff00? (a) yellow (b) white (c) black (d) red
9. 9.Which of these is padding? (a) space outside the border (b) the text or picture (c) the gap round content (d) a solid or dotted edge
10. 10.🔍 Which is the odd one out? (a) reacts to a button click (b) shows a pop-up message (c) makes a form box (d) checks a quiz answer
11. 11.🖌️ What colour is behind the letters?
    p {
      color: yellow;
      font-size: 24px;
      text-align: center;
      background-color: red;
    } (a) blue (b) red (c) yellow
12. 12.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
13. 13.✍️ What value is given to background-color in this rule?
    .note {
      padding: 8px;
      background-color: yellow;
      text-align: center;
    } (a) yellow (b) 10px (c) background-color (d) 8px
14. 14.✍️ CSS declarations go inside which brackets? (a) ( ) (b) [ ] (c) { } (d) < >
15. 15.🌈 Which colour is rgb(0, 255, 255)? (a) cyan (b) bright green (c) red (d) blue
16. 16.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) red (c) blue (d) white
17. 17.True or false: JavaScript counts down a timer. (a) False (b) True
18. 18.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 240px;
      justify-content: center;
    }
    Inside are 3 boxes, each 40px wide (no margins).
19. 19.🎯 How many elements on a page should have the same id? (a) 5 (b) 2 (c) any number (d) 1
20. 20.🎯 Which sign starts a class selector? (a) # (b) @ (c) & (d) .
21. 21.✍️ In color: blue; which part is the property? (a) : (b) blue (c) ; (d) color
22. 22.True or false: #main is an id selector. (a) False (b) True
23. 23.⚖️ What colour is the text of this element?
    <h2 class="star" id="end">Hi</h2>
    CSS:
    #end { color: red; }
    h2 { color: blue; }
    .star { color: green; } (a) blue (b) red (c) green (d) orange
24. 24.🎯 Can many elements share the same class? (a) No (b) Yes
25. 25.True or false: the border is space inside the border. (a) False (b) True
26. 26.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the br tag (c) the viewport meta tag (d) the title tag
27. 27.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) flex-start (c) center (d) flex-end
28. 28.🖌️ Where does the text sit on its line?
    h2 {
      background-color: blue;
      text-align: left;
      color: white;
      font-size: 20px;
    } (a) on the right (b) on the left (c) in the middle
29. 29.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 8px;
      }
    } (a) Yes (b) No
30. 30.True or false: the content is space outside the border. (a) True (b) False
31. 31.What does color do? (a) colours behind the text (b) makes the text bold (c) sets the letter colour (d) centres a heading
32. 32.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the later one (c) neither (d) the shorter one
33. 33.🔍 Which is the odd one out? (a) makes a form box (b) shows a pop-up message (c) makes a link (d) makes headings and lists
34. 34.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 130px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 50px wide (no margins).
35. 35.What does font-size do? (a) picks the font style (b) makes the text bold (c) sets the letter colour (d) makes letters bigger
36. 36.⚖️ What colour is the text of this element?
    <h2 class="menu" id="logo">Hi</h2>
    CSS:
    h2 { color: green; }
    h2 { color: orange; } (a) orange (b) black (c) green (d) red
37. 37.🖌️ Where does the text sit on its line?
    h1 {
      font-size: 24px;
      color: white;
      text-align: center;
      background-color: black;
    } (a) on the right (b) on the left (c) in the middle
38. 38.🎯 Which element does the selector #end style? (a) <span id="end"> (b) <p class="box"> (c) <span id="hero"> (d) <span class="end">
39. 39.🌈 In #5a0000 the red part is the hex number 5a. What is it as a normal number?
40. 40.True or false: HTML gives the page structure. (a) False (b) True

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