CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 552 · 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 colour is rgb(0, 255, 0)? (a) black (b) cyan (c) blue (d) bright green
2. 2.True or false: margin is space outside the border. (a) False (b) True
3. 3.🎯 Which CSS selector matches this element?
   <h1 class="star" id="hero">Hello</h1> (a) h2 (b) .hero (c) .star (d) #top
4. 4.🧩 Which language makes a link? (a) JavaScript (b) HTML (c) CSS
5. 5.⚖️ What colour is the text of this element?
   <p class="note" id="end">Hi</p>
   CSS:
   .note { color: white; }
   .note { color: yellow; } (a) white (b) green (c) purple (d) yellow
6. 6.⚖️ What colour is the text of this element?
   <p class="note" id="logo">Hi</p>
   CSS:
   p { color: white; }
   #logo { color: purple; }
   .note { color: black; } (a) black (b) blue (c) white (d) purple
7. 7.📱 What does a media query check? (a) the screen width (b) the time of day (c) the battery level (d) the page title
8. 8.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the br tag (c) the hr tag (d) the viewport meta tag
9. 9.🌈 Which colour is #0000ff? (a) blue (b) cyan (c) white (d) black
10. 10.✍️ What value is given to background-color in this rule?
    body {
      background-color: yellow;
      padding: 8px;
      width: 300px;
      text-align: center;
    } (a) yellow (b) 10px (c) background-color (d) 8px
11. 11.🖌️ Where does the text sit on its line?
    li {
      text-align: left;
      color: orange;
      background-color: blue;
      font-size: 20px;
    } (a) in the middle (b) on the right (c) on the left
12. 12.Which of these is padding? (a) the text or picture (b) space inside the border (c) space outside the border (d) the line round the box
13. 13.💪 Which flexbox property lines boxes up across? (a) display: flex (b) flex-direction (c) align-items (d) gap
14. 14.🌈 In #150000 the red part is the hex number 15. What is it as a normal number?
15. 15.🖌️ How big is the text, in px?
    h2 {
      font-size: 20px;
      text-align: right;
      color: red;
      background-color: blue;
    }
16. 16.🌈 Which hex code is blue? (a) #0000ff (b) #00ffff (c) #ff0000 (d) #ff00ff
17. 17.🌈 Which colour is #00ff00? (a) magenta (b) bright green (c) red (d) white
18. 18.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    }
19. 19.⚖️ What colour is the text of this element?
    <h2 class="star" id="top">Hi</h2>
    CSS:
    h2 { color: purple; }
    h2 { color: blue; } (a) blue (b) purple (c) green (d) red
20. 20.🌈 Which hex code is white? (a) #0000ff (b) #ffff00 (c) #00ff00 (d) #ffffff
21. 21.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 255 (c) 1000 (d) 99
22. 22.⚖️ What colour is the text of this element?
    <p class="big" id="main">Hi</p>
    CSS:
    .big { color: orange; }
    .big { color: black; } (a) orange (b) purple (c) black (d) blue
23. 23.🎯 What kind of selector is body? (a) a class selector (b) an element selector (c) an id selector
24. 24.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 220px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 50px wide (no margins).
25. 25.✍️ In color: blue; which part is the property? (a) : (b) ; (c) blue (d) color
26. 26.🧩 Which language shows a pop-up message? (a) HTML (b) JavaScript (c) CSS
27. 27.✍️ Which property is set to 2px solid in this rule?
    h1 {
      border: 2px solid;
      margin: 10px;
    } (a) font-style (b) 2px solid (c) width (d) border
28. 28.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 8px;
      }
    } (a) Yes (b) No
29. 29.🎯 Which element does the selector .star style? (a) <h1 id="star"> (b) <h2 class="note"> (c) <h1 class="star"> (d) <h1 class="menu">
30. 30.⚖️ What colour is the text of this element?
    <h1 class="note" id="top">Hi</h1>
    CSS:
    .note { color: orange; }
    h1 { color: blue; } (a) yellow (b) orange (c) red (d) blue
31. 31.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    }
32. 32.🎨 Which tag holds CSS inside the head? (a) <body> (b) <style> (c) <css> (d) <script>
33. 33.📦 In the box model, which part is the line round the box? (a) padding (b) margin (c) border (d) content
34. 34.True or false: .big is an id selector. (a) False (b) True
35. 35.🎯 Which sign starts an id selector? (a) # (b) & (c) . (d) @
36. 36.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    }
37. 37.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 32px;
      }
    }
38. 38.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      font-size: 20px;
    }
39. 39.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      text-align: center;
    }
40. 40.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 120px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 40px wide (no margins).

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