CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 561 · 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.✍️ CSS declarations go inside which brackets? (a) ( ) (b) [ ] (c) { } (d) < >
2. 2.✍️ Which property is set to 20px in this rule?
   li {
     width: 300px;
     border: 2px solid;
     background-color: yellow;
     font-size: 20px;
   } (a) font-size (b) text-align (c) background-color (d) 20px
3. 3.🎯 How many elements on a page should have the same id? (a) 1 (b) 2 (c) any number (d) 5
4. 4.True or false: body is a class selector. (a) False (b) True
5. 5.Which of these does JavaScript do? (a) lays out the page (b) makes headings and lists (c) changes the page live (d) puts a picture on a page
6. 6.⚖️ What colour is the text of this element?
   <h1 class="note" id="top">Hi</h1>
   CSS:
   h1 { color: green; }
   h1 { color: yellow; } (a) blue (b) yellow (c) black (d) green
7. 7.🔍 Which is the odd one out? (a) changes the page live (b) checks a quiz answer (c) rounds box corners (d) shows a pop-up message
8. 8.⚖️ What colour is the text of this element?
   <h1 class="star" id="logo">Hi</h1>
   CSS:
   .star { color: black; }
   #logo { color: orange; }
   h1 { color: yellow; } (a) black (b) orange (c) yellow (d) green
9. 9.Which of these is margin? (a) space inside the border (b) space outside the border (c) the text or picture (d) the gap round content
10. 10.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
11. 11.🎯 Which CSS selector matches this element?
    <p class="menu" id="logo">Hello</p> (a) p (b) #menu (c) .logo (d) #end
12. 12.💪 Which justify-content value packs boxes at the start? (a) flex-start (b) space-between (c) flex-end (d) center
13. 13.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      margin: 10px;
      width: 300px;
    }
14. 14.✍️ What is the selector in this CSS rule?
    body {
      text-align: center;
      font-size: 20px;
      background-color: yellow;
    } (a) body (b) .box (c) 20px (d) text-align
15. 15.What does justify-content: space-between do? (a) puts boxes in the middle (b) packs boxes at the end (c) equal gaps, none at ends (d) packs boxes at the start
16. 16.⚖️ What colour is the text of this element?
    <p class="red" id="top">Hi</p>
    CSS:
    .red { color: green; }
    #top { color: orange; } (a) black (b) green (c) orange (d) white
17. 17.✍️ Which sign ends each CSS declaration? (a) , (b) : (c) . (d) ;
18. 18.True or false: #end is an id selector. (a) False (b) True
19. 19.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    } (a) No (b) Yes
20. 20.What does font-size do? (a) sets the letter colour (b) makes the text bold (c) picks the font style (d) makes letters bigger
21. 21.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 20px;
      }
    } (a) No (b) Yes
22. 22.⚖️ What colour is the text of this element?
    <p class="box" id="hero">Hi</p>
    CSS:
    .box { color: green; }
    p { color: orange; }
    #hero { color: red; } (a) orange (b) green (c) black (d) red
23. 23.🌈 In #rrggbb, which colour do the last two digits give? (a) blue (b) white (c) red (d) green
24. 24.🎯 Which element does the selector span style? (a) <span class="box"> (b) <h2 id="intro"> (c) <p> (d) <h1 class="box">
25. 25.What does color do? (a) sets the letter colour (b) picks the font style (c) makes the text bold (d) colours behind the text
26. 26.🎯 Can many elements share the same class? (a) Yes (b) No
27. 27.True or false: CSS adds space around boxes. (a) False (b) True
28. 28.✍️ What value is given to margin in this rule?
    h2 {
      font-weight: bold;
      margin: 10px;
    } (a) margin (b) bold (c) 10px (d) 8px
29. 29.🖌️ How big is the text, in px?
    li {
      background-color: yellow;
      text-align: center;
      font-size: 28px;
      color: red;
    }
30. 30.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
31. 31.🌈 Which colour is #0000ff? (a) blue (b) bright green (c) red (d) cyan
32. 32.🎨 Which tag connects an outside CSS file? (a) <img> (b) <css> (c) <link> (d) <a>
33. 33.🖌️ Which CSS property sets the letter colour? (a) font-size (b) font-family (c) background-color (d) color
34. 34.🌈 In #e90000 the red part is the hex number e9. What is it as a normal number?
35. 35.💪 Which justify-content value packs boxes at the end? (a) center (b) flex-end (c) space-between (d) flex-start
36. 36.🎯 What kind of selector is .menu? (a) an element selector (b) an id selector (c) a class selector
37. 37.⚖️ What colour is the text of this element?
    <p class="menu" id="logo">Hi</p>
    CSS:
    .menu { color: yellow; }
    p { color: orange; } (a) orange (b) blue (c) yellow (d) black
38. 38.🧩 Which language adds space around boxes? (a) CSS (b) JavaScript (c) HTML
39. 39.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) center (c) flex-end (d) space-between
40. 40.🖌️ Where does the text sit on its line?
    p {
      text-align: right;
      font-size: 28px;
      background-color: white;
      color: green;
    } (a) in the middle (b) on the right (c) on the left

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