CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 175 · 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 kind of selector is .note? (a) an id selector (b) a class selector (c) an element selector
2. 2.🖌️ Which CSS property colours behind the text? (a) font-weight (b) font-family (c) background-color (d) text-align
3. 3.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) red (c) green (d) blue
4. 4.🌈 Which colour is #00ff00? (a) black (b) blue (c) bright green (d) yellow
5. 5.🔍 Which is the odd one out? (a) adds space around boxes (b) counts down a timer (c) shows a pop-up message (d) checks a quiz answer
6. 6.📦 In the box model, which part is space inside the border? (a) border (b) content (c) margin (d) padding
7. 7.✍️ Which sign ends each CSS declaration? (a) : (b) ; (c) , (d) .
8. 8.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 460px;
     justify-content: space-between;
   }
   Inside are 4 boxes, each 100px wide (no margins).
9. 9.✍️ What is the selector in this CSS rule?
   h2 {
     font-style: italic;
     padding: 8px;
   } (a) h2 (b) font-style (c) 8px (d) h1
10. 10.🎯 Which CSS selector matches this element?
    <p class="star" id="top">Hello</p> (a) h1 (b) #star (c) .top (d) .star
11. 11.⚖️ What colour is the text of this element?
    <h1 class="menu" id="logo">Hi</h1>
    CSS:
    h1 { color: black; }
    h1 { color: yellow; } (a) black (b) white (c) purple (d) yellow
12. 12.🖌️ What colour are the letters?
    h2 {
      background-color: green;
      color: purple;
      font-size: 28px;
      text-align: left;
    } (a) blue (b) purple (c) green
13. 13.🖌️ What colour is behind the letters?
    p {
      background-color: orange;
      font-size: 24px;
      color: white;
      text-align: right;
    } (a) orange (b) white (c) red
14. 14.What does justify-content: space-between do? (a) packs boxes at the start (b) packs boxes at the end (c) equal gaps, none at ends (d) puts boxes in the middle
15. 15.💪 Which justify-content value packs boxes at the end? (a) flex-start (b) space-between (c) center (d) flex-end
16. 16.True or false: CSS lays out the page. (a) False (b) True
17. 17.🖌️ How big is the text, in px?
    h2 {
      background-color: green;
      text-align: left;
      color: yellow;
      font-size: 40px;
    }
18. 18.Which of these does JavaScript do? (a) puts a picture on a page (b) sets colours and fonts (c) makes a link (d) changes the page live
19. 19.🎯 Which sign starts a class selector? (a) @ (b) & (c) . (d) #
20. 20.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      font-size: 20px;
      font-style: italic;
    }
21. 21.Which of these is padding? (a) the line round the box (b) the gap round content (c) space outside the border (d) the gap to other boxes
22. 22.True or false: JavaScript changes the page live. (a) False (b) True
23. 23.🎯 Which element does the selector #logo style? (a) <h1 class="red"> (b) <p class="logo"> (c) <p id="end"> (d) <p id="logo">
24. 24.✍️ In color: blue; which part is the value? (a) color (b) : (c) ; (d) blue
25. 25.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 24px;
      }
    } (a) No (b) Yes
26. 26.What does text-align do? (a) centres a heading (b) colours behind the text (c) makes letters bigger (d) picks the font style
27. 27.⚖️ What colour is the text of this element?
    <p class="box" id="hero">Hi</p>
    CSS:
    p { color: black; }
    p { color: green; } (a) white (b) black (c) yellow (d) green
28. 28.✍️ How does a CSS comment start? (a) // (b) # (c) /* (d) <!--
29. 29.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector
30. 30.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 22px;
      }
    }
31. 31.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
32. 32.🔍 Which is the odd one out? (a) counts down a timer (b) shows a pop-up message (c) gives the page structure (d) checks a quiz answer
33. 33.True or false: JavaScript puts a picture on a page. (a) True (b) False
34. 34.True or false: padding is the line round the box. (a) True (b) False
35. 35.Which of these is padding? (a) the gap to other boxes (b) the text or picture (c) space outside the border (d) space inside the border
36. 36.⚖️ What colour is the text of this element?
    <h1 class="box" id="hero">Hi</h1>
    CSS:
    h1 { color: red; }
    #hero { color: black; }
    .box { color: purple; } (a) yellow (b) purple (c) black (d) red
37. 37.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Creative Sheet System (c) Cascading Style Sheets (d) Computer Style Sheets
38. 38.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      color: red;
      font-size: 20px;
      background-color: yellow;
      font-style: italic;
    }
39. 39.✍️ What value is given to width in this rule?
    p {
      color: red;
      font-size: 20px;
      font-style: italic;
      width: 300px;
    } (a) italic (b) width (c) red (d) 300px
40. 40.🎯 Which element does the selector #top style? (a) <div id="top"> (b) <span class="note"> (c) <div class="top"> (d) <div id="intro">

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