CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 879 · 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 the text of this element?
   <h2 class="big" id="logo">Hi</h2>
   CSS:
   h2 { color: green; }
   h2 { color: red; } (a) blue (b) green (c) purple (d) red
2. 2.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 270px;
     padding: 5px;
     border: 2px solid black;
     margin: 5px;
   }
3. 3.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) flex-start (c) center (d) space-between
4. 4.🧩 Which language rounds box corners? (a) CSS (b) JavaScript (c) HTML
5. 5.✍️ How many declarations (property: value pairs) are in this rule?
   li {
     color: red;
     font-size: 20px;
     text-align: center;
   }
6. 6.🖌️ What colour are the letters?
   p {
     background-color: red;
     font-size: 28px;
     color: black;
     text-align: left;
   } (a) white (b) red (c) black
7. 7.⚖️ What colour is the text of this element?
   <h2 class="big" id="intro">Hi</h2>
   CSS:
   h2 { color: purple; }
   .big { color: red; }
   #intro { color: black; } (a) blue (b) red (c) black (d) purple
8. 8.🌈 Which colour is rgb(255, 255, 255)? (a) white (b) blue (c) red (d) bright green
9. 9.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) black (c) red (d) blue
10. 10.What does background-color do? (a) makes the text bold (b) makes letters bigger (c) colours behind the text (d) picks the font style
11. 11.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) exactly 1000px (c) 600px or narrower (d) 600px or wider
12. 12.🖌️ What colour is behind the letters?
    li {
      font-size: 36px;
      background-color: orange;
      color: red;
      text-align: right;
    } (a) orange (b) white (c) red
13. 13.⚖️ What colour is the text of this element?
    <h1 class="menu" id="hero">Hi</h1>
    CSS:
    .menu { color: red; }
    .menu { color: green; } (a) green (b) orange (c) purple (d) red
14. 14.🖌️ What colour is behind the letters?
    h2 {
      background-color: red;
      font-size: 28px;
      color: black;
      text-align: center;
    } (a) black (b) blue (c) red
15. 15.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 320px;
      justify-content: center;
    }
    Inside are 3 boxes, each 60px wide (no margins).
16. 16.Which of these is padding? (a) the gap round content (b) the text or picture (c) the line round the box (d) space outside the border
17. 17.✍️ Which property is set to 300px in this rule?
    .note {
      text-align: center;
      width: 300px;
      margin: 10px;
    } (a) 300px (b) color (c) font-style (d) width
18. 18.True or false: .menu is a class selector. (a) False (b) True
19. 19.⚖️ What colour is the text of this element?
    <p class="box" id="top">Hi</p>
    CSS:
    .box { color: white; }
    .box { color: orange; } (a) blue (b) white (c) green (d) orange
20. 20.🧩 Which language makes a form box? (a) JavaScript (b) CSS (c) HTML
21. 21.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 80px;
      padding: 20px;
      border: 3px solid black;
      margin: 0px;
    }
22. 22.🎯 Which sign starts an id selector? (a) @ (b) & (c) . (d) #
23. 23.⚖️ What colour is the text of this element?
    <p class="star" id="top">Hi</p>
    CSS:
    #top { color: yellow; }
    p { color: white; } (a) yellow (b) black (c) blue (d) white
24. 24.🧩 Which language counts down a timer? (a) CSS (b) HTML (c) JavaScript
25. 25.✍️ What value is given to text-align in this rule?
    .box {
      margin: 10px;
      background-color: yellow;
      text-align: center;
    } (a) center (b) 10px (c) yellow (d) text-align
26. 26.🌈 In #002c00 the green part is the hex number 2c. What is it as a normal number?
27. 27.🎯 Which CSS selector matches this element?
    <p class="red" id="top">Hello</p> (a) p (b) .box (c) #red (d) #intro
28. 28.⚖️ What colour is the text of this element?
    <h1 class="note" id="intro">Hi</h1>
    CSS:
    .note { color: blue; }
    h1 { color: purple; }
    #intro { color: black; } (a) black (b) purple (c) blue (d) red
29. 29.💪 Which flexbox property sets space between boxes? (a) flex-direction (b) display: flex (c) align-items (d) gap
30. 30.True or false: #top is an id selector. (a) False (b) True
31. 31.💪 Which justify-content value puts boxes in the middle? (a) center (b) space-between (c) flex-end (d) flex-start
32. 32.🌈 Which colour of light is strongest in rgb(156, 48, 61)? (a) green (b) blue (c) red
33. 33.🌈 Which colour is rgb(255, 0, 255)? (a) bright green (b) white (c) cyan (d) magenta
34. 34.True or false: CSS lays out the page. (a) False (b) True
35. 35.True or false: margin is space outside the border. (a) False (b) True
36. 36.🎯 Which CSS selector matches this element?
    <div class="menu" id="top">Hello</div> (a) .note (b) .top (c) #menu (d) #top
37. 37.🌈 In #0000d2 the blue part is the hex number d2. What is it as a normal number?
38. 38.True or false: body is a class selector. (a) False (b) True
39. 39.⚖️ What colour is the text of this element?
    <h2 class="big" id="logo">Hi</h2>
    CSS:
    #logo { color: red; }
    .big { color: black; }
    h2 { color: green; } (a) red (b) blue (c) green (d) black
40. 40.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 260px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 100px wide (no margins).

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