CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 850 · 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 much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 170px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 50px wide (no margins).
2. 2.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the later one (c) the first one (d) the shorter one
3. 3.Which of these is the border? (a) space inside the border (b) the line round the box (c) the gap round content (d) the gap to other boxes
4. 4.Which of these is padding? (a) space inside the border (b) the text or picture (c) a solid or dotted edge (d) space outside the border
5. 5.📦 In the box model, which part is the gap round content? (a) border (b) padding (c) margin (d) content
6. 6.✍️ Which sign goes between a property and its value? (a) = (b) - (c) : (d) ;
7. 7.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 110px;
     padding: 30px;
     border: 3px solid black;
     margin: 5px;
   }
8. 8.🌈 In #003800 the green part is the hex number 38. What is it as a normal number?
9. 9.🎯 Which CSS selector matches this element?
   <p class="big" id="top">Hello</p> (a) .red (b) #big (c) .top (d) .big
10. 10.True or false: .menu is a class selector. (a) True (b) False
11. 11.True or false: JavaScript checks a quiz answer. (a) True (b) False
12. 12.What does font-family do? (a) makes letters bigger (b) picks the font style (c) centres a heading (d) sets the letter colour
13. 13.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      font-weight: bold;
      padding: 8px;
    }
14. 14.What does justify-content: space-between do? (a) packs boxes at the end (b) packs boxes at the start (c) equal gaps, none at ends (d) puts boxes in the middle
15. 15.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 28px;
      }
    } (a) No (b) Yes
16. 16.📦 In the box model, which part is the text or picture? (a) margin (b) padding (c) border (d) content
17. 17.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) white (c) blue (d) red
18. 18.⚖️ What colour is the text of this element?
    <h2 class="red" id="top">Hi</h2>
    CSS:
    h2 { color: yellow; }
    h2 { color: orange; } (a) white (b) yellow (c) orange (d) red
19. 19.📦 In the box model, which part is space outside the border? (a) margin (b) content (c) padding (d) border
20. 20.🎯 What kind of selector is #main? (a) a class selector (b) an id selector (c) an element selector
21. 21.True or false: the border is space outside the border. (a) False (b) True
22. 22.⚖️ What colour is the text of this element?
    <h1 class="note" id="hero">Hi</h1>
    CSS:
    .note { color: red; }
    #hero { color: purple; }
    h1 { color: orange; } (a) yellow (b) orange (c) purple (d) red
23. 23.⚖️ What colour is the text of this element?
    <p class="red" id="end">Hi</p>
    CSS:
    p { color: red; }
    p { color: blue; } (a) black (b) red (c) green (d) blue
24. 24.🔍 Which is the odd one out? (a) makes headings and lists (b) puts a picture on a page (c) shows a pop-up message (d) gives the page structure
25. 25.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      background-color: yellow;
    }
26. 26.🖌️ Where does the text sit on its line?
    h2 {
      font-size: 12px;
      text-align: left;
      background-color: black;
      color: blue;
    } (a) in the middle (b) on the right (c) on the left
27. 27.🎯 Which element does the selector #hero style? (a) <h1 id="top"> (b) <h1 class="hero"> (c) <h1 id="hero"> (d) <h2 class="red">
28. 28.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) 600px or wider (c) exactly 1000px (d) turned off
29. 29.🎯 What kind of selector is .card? (a) an id selector (b) an element selector (c) a class selector
30. 30.🌈 Which colour of light is strongest in rgb(239, 7, 31)? (a) red (b) blue (c) green
31. 31.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
32. 32.🎯 How many elements on a page should have the same id? (a) 1 (b) 5 (c) any number (d) 2
33. 33.✍️ Which property is set to 10px in this rule?
    body {
      padding: 8px;
      margin: 10px;
    } (a) padding (b) margin (c) font-weight (d) 10px
34. 34.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) black (c) blue (d) green
35. 35.🎯 What kind of selector is li? (a) a class selector (b) an id selector (c) an element selector
36. 36.Which of these does JavaScript do? (a) makes a link (b) shows a pop-up message (c) sets colours and fonts (d) adds space around boxes
37. 37.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 6px;
      }
    }
38. 38.✍️ What is the selector in this CSS rule?
    h1 {
      font-style: italic;
      border: 2px solid;
      font-size: 20px;
    } (a) font-style (b) h1 (c) p (d) 2px solid
39. 39.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
40. 40.Which of these is margin? (a) space inside the border (b) the gap to other boxes (c) the gap round content (d) the line round the box

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