CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 314 · 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.What does font-size do? (a) sets the letter colour (b) centres a heading (c) makes the text bold (d) makes letters bigger
2. 2.What does font-family do? (a) picks the font style (b) makes letters bigger (c) colours behind the text (d) sets the letter colour
3. 3.🖌️ How big is the text, in px?
   p {
     font-size: 12px;
     text-align: left;
     color: orange;
     background-color: blue;
   }
4. 4.🌈 Which colour is rgb(255, 255, 255)? (a) white (b) cyan (c) red (d) magenta
5. 5.⚖️ Which selector is the weakest? (a) an element selector (b) an id selector (c) a class selector
6. 6.🎯 Can many elements share the same class? (a) No (b) Yes
7. 7.🖌️ What colour are the letters?
   p {
     background-color: white;
     text-align: left;
     font-size: 20px;
     color: black;
   } (a) orange (b) black (c) white
8. 8.🌈 In #rrggbb, which colour do the last two digits give? (a) blue (b) white (c) red (d) green
9. 9.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) green (c) blue (d) black
10. 10.What does text-align do? (a) sets the letter colour (b) makes letters bigger (c) centres a heading (d) colours behind the text
11. 11.Which of these is the border? (a) the text or picture (b) space inside the border (c) the line round the box (d) space outside the border
12. 12.🎯 What kind of selector is #logo? (a) a class selector (b) an element selector (c) an id selector
13. 13.What does color do? (a) picks the font style (b) colours behind the text (c) makes letters bigger (d) sets the letter colour
14. 14.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 18px;
      }
    }
15. 15.🌈 Which colour is rgb(0, 0, 0)? (a) black (b) yellow (c) white (d) cyan
16. 16.True or false: #main is an id selector. (a) False (b) True
17. 17.📱 Responsive design means a page ___. (a) is only for laptops (b) has no pictures (c) never changes (d) fits every screen
18. 18.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) 800px or wider (c) 800px or narrower (d) exactly 100px
19. 19.✍️ What value is given to font-size in this rule?
    body {
      color: red;
      font-size: 20px;
      text-align: center;
      border: 2px solid;
    } (a) font-size (b) yellow (c) center (d) 20px
20. 20.🎯 Which sign starts a class selector? (a) @ (b) . (c) & (d) #
21. 21.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 14px;
      }
    }
22. 22.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
23. 23.True or false: JavaScript puts a picture on a page. (a) True (b) False
24. 24.Which of these is margin? (a) the line round the box (b) the gap to other boxes (c) the text or picture (d) space inside the border
25. 25.🎨 Which tag connects an outside CSS file? (a) <a> (b) <img> (c) <link> (d) <css>
26. 26.✍️ CSS declarations go inside which brackets? (a) ( ) (b) [ ] (c) < > (d) { }
27. 27.📦 In the box model, which part is the text or picture? (a) content (b) padding (c) border (d) margin
28. 28.💪 Which flexbox property spaces boxes along a row? (a) justify-content (b) flex-direction (c) gap (d) align-items
29. 29.⚖️ What colour is the text of this element?
    <h2 class="red" id="main">Hi</h2>
    CSS:
    #main { color: white; }
    .red { color: black; }
    h2 { color: blue; } (a) white (b) black (c) blue (d) purple
30. 30.⚖️ What colour is the text of this element?
    <p class="big" id="main">Hi</p>
    CSS:
    .big { color: black; }
    .big { color: orange; } (a) red (b) black (c) orange (d) purple
31. 31.📱 Which tag helps phones show a page at the right size? (a) the br tag (b) the viewport meta tag (c) the hr tag (d) the title tag
32. 32.True or false: HTML makes a link. (a) False (b) True
33. 33.🎯 Which CSS selector matches this element?
    <li class="box" id="top">Hello</li> (a) #box (b) div (c) .top (d) .box
34. 34.🖌️ What colour are the letters?
    p {
      text-align: center;
      font-size: 16px;
      background-color: blue;
      color: orange;
    } (a) blue (b) yellow (c) orange
35. 35.🌈 Which colour is #ffffff? (a) red (b) blue (c) bright green (d) white
36. 36.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      border: 2px solid;
      width: 300px;
      padding: 8px;
    }
37. 37.🎨 Which attribute adds CSS inside one tag? (a) alt (b) href (c) src (d) style
38. 38.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 18px;
      }
    }
39. 39.What does justify-content: flex-end do? (a) equal gaps, none at ends (b) packs boxes at the start (c) puts boxes in the middle (d) packs boxes at the end
40. 40.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 180px;
      padding: 5px;
      border: 4px solid black;
      margin: 15px;
    }

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