CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 39 · 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 rounds box corners? (a) CSS (b) HTML (c) JavaScript
2. 2.🎯 Which sign starts an id selector? (a) # (b) . (c) & (d) @
3. 3.🌈 Which colour is #000000? (a) red (b) magenta (c) blue (d) black
4. 4.True or false: JavaScript sets colours and fonts. (a) True (b) False
5. 5.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 260px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 80px wide (no margins).
6. 6.📦 In the box model, which part is the text or picture? (a) content (b) margin (c) padding (d) border
7. 7.🎯 Which CSS selector matches this element?
   <p class="box" id="end">Hello</p> (a) #box (b) .star (c) .box (d) #hero
8. 8.🖌️ How big is the text, in px?
   li {
     font-size: 32px;
     background-color: red;
     color: green;
     text-align: right;
   }
9. 9.⚖️ What colour is the text of this element?
   <h2 class="star" id="top">Hi</h2>
   CSS:
   #top { color: white; }
   .star { color: green; } (a) yellow (b) white (c) green (d) purple
10. 10.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 310px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 80px wide (no margins).
11. 11.✍️ CSS declarations go inside which brackets? (a) ( ) (b) [ ] (c) < > (d) { }
12. 12.🖌️ What colour is behind the letters?
    h2 {
      font-size: 28px;
      color: purple;
      background-color: white;
      text-align: center;
    } (a) blue (b) purple (c) white
13. 13.🖌️ Where does the text sit on its line?
    h1 {
      background-color: orange;
      font-size: 36px;
      text-align: left;
      color: yellow;
    } (a) on the left (b) in the middle (c) on the right
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.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 80px;
      padding: 20px;
      border: 1px solid black;
      margin: 5px;
    }
16. 16.🌈 Which hex code is white? (a) #ff0000 (b) #0000ff (c) #ff00ff (d) #ffffff
17. 17.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      background-color: yellow;
      margin: 10px;
      font-style: italic;
    }
18. 18.📱 What does a media query check? (a) the screen width (b) the page title (c) the time of day (d) the battery level
19. 19.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) red (c) blue (d) black
20. 20.Which of these is the border? (a) the line round the box (b) the gap to other boxes (c) the text or picture (d) space outside the border
21. 21.True or false: body is an element selector. (a) False (b) True
22. 22.🖌️ Where does the text sit on its line?
    h1 {
      color: black;
      text-align: center;
      font-size: 12px;
      background-color: green;
    } (a) in the middle (b) on the right (c) on the left
23. 23.🧩 Which language checks a quiz answer? (a) JavaScript (b) CSS (c) HTML
24. 24.Which of these is the content? (a) the gap to other boxes (b) space inside the border (c) the gap round content (d) the text or picture
25. 25.🎯 How many elements on a page should have the same id? (a) any number (b) 2 (c) 1 (d) 5
26. 26.True or false: #main is an id selector. (a) True (b) False
27. 27.✍️ What is the selector in this CSS rule?
    body {
      background-color: yellow;
      font-size: 20px;
    } (a) body (b) background-color (c) 20px (d) .box
28. 28.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 160px;
      padding: 10px;
      border: 5px solid black;
      margin: 5px;
    }
29. 29.🖌️ What colour are the letters?
    p {
      text-align: left;
      font-size: 40px;
      color: orange;
      background-color: red;
    } (a) red (b) purple (c) orange
30. 30.🌈 In #970000 the red part is the hex number 97. What is it as a normal number?
31. 31.⚖️ What colour is the text of this element?
    <p class="red" id="main">Hi</p>
    CSS:
    p { color: blue; }
    p { color: red; } (a) blue (b) purple (c) red (d) yellow
32. 32.🖌️ What colour are the letters?
    h1 {
      font-size: 36px;
      text-align: left;
      background-color: green;
      color: black;
    } (a) green (b) black (c) blue
33. 33.🌈 Which hex code is cyan? (a) #00ffff (b) #ffffff (c) #0000ff (d) #000000
34. 34.What does text-align do? (a) picks the font style (b) makes letters bigger (c) makes the text bold (d) centres a heading
35. 35.🌈 In #7c0000 the red part is the hex number 7c. What is it as a normal number?
36. 36.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    }
37. 37.✍️ What value is given to border in this rule?
    .box {
      padding: 8px;
      border: 2px solid;
    } (a) border (b) italic (c) 300px (d) 2px solid
38. 38.True or false: .note is an element selector. (a) False (b) True
39. 39.What does justify-content: flex-start do? (a) packs boxes at the end (b) packs boxes at the start (c) puts boxes in the middle (d) equal gaps, none at ends
40. 40.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 230px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 100px wide (no margins).

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