CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 219 · 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.🧩 Which language makes a link? (a) JavaScript (b) CSS (c) HTML
2. 2.⚖️ What colour is the text of this element?
   <h1 class="box" id="main">Hi</h1>
   CSS:
   .box { color: orange; }
   .box { color: red; } (a) orange (b) red (c) blue (d) yellow
3. 3.✍️ In color: blue; which part is the property? (a) : (b) color (c) ; (d) blue
4. 4.🧩 Which language counts down a timer? (a) CSS (b) HTML (c) JavaScript
5. 5.🎯 Which CSS selector matches this element?
   <li class="big" id="top">Hello</li> (a) #intro (b) .red (c) #big (d) li
6. 6.🖌️ What colour is behind the letters?
   li {
     font-size: 20px;
     text-align: right;
     background-color: blue;
     color: black;
   } (a) black (b) blue (c) red
7. 7.📱 What does a media query check? (a) the time of day (b) the battery level (c) the page title (d) the screen width
8. 8.🌈 Which colour of light is strongest in rgb(15, 203, 22)? (a) green (b) blue (c) red
9. 9.⚖️ Which selector is the strongest? (a) an element selector (b) an id selector (c) a class selector
10. 10.⚖️ What colour is the text of this element?
    <h1 class="box" id="hero">Hi</h1>
    CSS:
    #hero { color: white; }
    #hero { color: black; } (a) green (b) black (c) white (d) blue
11. 11.🎯 What kind of selector is img? (a) an element selector (b) an id selector (c) a class selector
12. 12.🖌️ How big is the text, in px?
    li {
      color: black;
      background-color: red;
      text-align: left;
      font-size: 40px;
    }
13. 13.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      color: red;
      text-align: center;
      font-style: italic;
    }
14. 14.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 270px;
      justify-content: center;
    }
    Inside are 3 boxes, each 50px wide (no margins).
15. 15.True or false: .menu is an id selector. (a) True (b) False
16. 16.Which of these is the border? (a) the gap round content (b) a solid or dotted edge (c) the gap to other boxes (d) space inside the border
17. 17.🖌️ What colour is behind the letters?
    h1 {
      background-color: yellow;
      font-size: 36px;
      color: orange;
      text-align: center;
    } (a) orange (b) red (c) yellow
18. 18.🌈 Which colour is #ffff00? (a) white (b) yellow (c) magenta (d) black
19. 19.What does justify-content: space-between do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the start (d) packs boxes at the end
20. 20.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    }
21. 21.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 16px;
      }
    }
22. 22.🌈 Which hex code is white? (a) #0000ff (b) #ff0000 (c) #ffffff (d) #000000
23. 23.Which of these does HTML do? (a) puts a picture on a page (b) adds space around boxes (c) rounds box corners (d) sets colours and fonts
24. 24.Which of these is padding? (a) space inside the border (b) the text or picture (c) a solid or dotted edge (d) the line round the box
25. 25.⚖️ What colour is the text of this element?
    <h1 class="menu" id="intro">Hi</h1>
    CSS:
    h1 { color: purple; }
    h1 { color: white; } (a) red (b) orange (c) purple (d) white
26. 26.🎯 Which sign starts an id selector? (a) # (b) & (c) . (d) @
27. 27.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) neither (c) the later one (d) the shorter one
28. 28.🖌️ What colour is behind the letters?
    li {
      font-size: 32px;
      text-align: right;
      background-color: red;
      color: purple;
    } (a) red (b) purple (c) blue
29. 29.🖌️ What colour are the letters?
    li {
      font-size: 28px;
      color: orange;
      text-align: center;
      background-color: white;
    } (a) white (b) orange (c) purple
30. 30.💪 Which justify-content value packs boxes at the end? (a) flex-start (b) space-between (c) center (d) flex-end
31. 31.🖌️ Which CSS property picks the font style? (a) font-weight (b) font-family (c) text-align (d) background-color
32. 32.🎨 Which tag connects an outside CSS file? (a) <css> (b) <img> (c) <a> (d) <link>
33. 33.What does background-color do? (a) picks the font style (b) colours behind the text (c) makes letters bigger (d) makes the text bold
34. 34.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }
35. 35.What does font-weight do? (a) centres a heading (b) colours behind the text (c) makes letters bigger (d) makes the text bold
36. 36.True or false: margin is the text or picture. (a) False (b) True
37. 37.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Computer Style Sheets (c) Cascading Style Sheets (d) Creative Sheet System
38. 38.✍️ Which property is set to italic in this rule?
    li {
      font-weight: bold;
      color: red;
      font-style: italic;
      text-align: center;
    } (a) color (b) font-size (c) font-style (d) italic
39. 39.✍️ CSS declarations go inside which brackets? (a) [ ] (b) ( ) (c) < > (d) { }
40. 40.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 22px;
      }
    }

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