CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 278 · 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 colour is behind the letters?
   h1 {
     font-size: 20px;
     text-align: center;
     background-color: orange;
     color: yellow;
   } (a) blue (b) orange (c) yellow
2. 2.✍️ Which property is set to italic in this rule?
   body {
     font-style: italic;
     text-align: center;
     font-size: 20px;
     width: 300px;
   } (a) font-size (b) italic (c) font-style (d) color
3. 3.What does color do? (a) sets the letter colour (b) makes letters bigger (c) centres a heading (d) colours behind the text
4. 4.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) the later one (d) neither
5. 5.📱 Responsive design means a page ___. (a) has no pictures (b) never changes (c) is only for laptops (d) fits every screen
6. 6.🧩 Which language adds space around boxes? (a) CSS (b) JavaScript (c) HTML
7. 7.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
8. 8.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Cascading Style Sheets (c) Computer Style Sheets (d) Creative Sheet System
9. 9.✍️ What value is given to text-align in this rule?
   p {
     text-align: center;
     color: red;
     font-weight: bold;
   } (a) yellow (b) 10px (c) text-align (d) center
10. 10.🖌️ Which CSS property centres a heading? (a) font-weight (b) color (c) text-align (d) font-size
11. 11.Which of these is padding? (a) a solid or dotted edge (b) space outside the border (c) space inside the border (d) the gap to other boxes
12. 12.🖌️ What colour are the letters?
    p {
      background-color: black;
      font-size: 32px;
      text-align: right;
      color: red;
    } (a) red (b) black (c) green
13. 13.✍️ Which sign goes between a property and its value? (a) - (b) = (c) ; (d) :
14. 14.Which of these is the content? (a) the text or picture (b) space outside the border (c) the gap to other boxes (d) the line round the box
15. 15.True or false: the content is the gap to other boxes. (a) False (b) True
16. 16.🖌️ Where does the text sit on its line?
    h2 {
      background-color: yellow;
      font-size: 20px;
      text-align: center;
      color: red;
    } (a) on the left (b) in the middle (c) on the right
17. 17.🎯 Which element does the selector li style? (a) <p id="logo"> (b) <div> (c) <span class="box"> (d) <li class="box">
18. 18.True or false: #logo is an element selector. (a) False (b) True
19. 19.🎯 Which CSS selector matches this element?
    <p class="box" id="hero">Hello</p> (a) h1 (b) #box (c) .box (d) .star
20. 20.⚖️ What colour is the text of this element?
    <h2 class="big" id="logo">Hi</h2>
    CSS:
    h2 { color: green; }
    #logo { color: blue; } (a) blue (b) yellow (c) green (d) red
21. 21.🌈 Which colour is #ff00ff? (a) magenta (b) cyan (c) bright green (d) white
22. 22.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 130px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 40px wide (no margins).
23. 23.🎯 Which CSS selector matches this element?
    <span class="note" id="hero">Hello</span> (a) #note (b) .big (c) .note (d) #top
24. 24.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 100px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 40px wide (no margins).
25. 25.🎯 Which element does the selector h1 style? (a) <h2> (b) <div id="top"> (c) <h1 class="menu"> (d) <li class="menu">
26. 26.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      border: 2px solid;
      font-style: italic;
      text-align: center;
    }
27. 27.🎯 What kind of selector is h1? (a) an element selector (b) a class selector (c) an id selector
28. 28.True or false: CSS puts a picture on a page. (a) False (b) True
29. 29.⚖️ What colour is the text of this element?
    <h2 class="big" id="top">Hi</h2>
    CSS:
    .big { color: orange; }
    #top { color: white; }
    h2 { color: yellow; } (a) orange (b) yellow (c) green (d) white
30. 30.🖌️ What colour are the letters?
    li {
      color: green;
      background-color: blue;
      text-align: left;
      font-size: 24px;
    } (a) green (b) blue (c) red
31. 31.🖌️ Which CSS property makes letters bigger? (a) color (b) font-family (c) background-color (d) font-size
32. 32.✍️ What is the selector in this CSS rule?
    li {
      font-weight: bold;
      text-align: center;
      width: 300px;
      font-size: 20px;
    } (a) font-weight (b) center (c) li (d) body
33. 33.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
34. 34.✍️ What is the selector in this CSS rule?
    li {
      text-align: center;
      padding: 8px;
    } (a) 8px (b) body (c) text-align (d) li
35. 35.⚖️ What colour is the text of this element?
    <p class="menu" id="intro">Hi</p>
    CSS:
    #intro { color: black; }
    .menu { color: blue; } (a) white (b) blue (c) orange (d) black
36. 36.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 380px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 80px wide (no margins).
37. 37.✍️ Which property is set to yellow in this rule?
    li {
      background-color: yellow;
      margin: 10px;
      color: red;
    } (a) margin (b) background-color (c) padding (d) yellow
38. 38.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      background-color: yellow;
      margin: 10px;
    }
39. 39.🖌️ Where does the text sit on its line?
    h1 {
      text-align: center;
      background-color: black;
      font-size: 20px;
      color: green;
    } (a) on the right (b) in the middle (c) on the left
40. 40.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 20px;
      }
    }

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