CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 477 · 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.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 160px;
     padding: 20px;
     border: 3px solid black;
     margin: 0px;
   }
2. 2.Which of these does HTML do? (a) adds space around boxes (b) changes the text size (c) makes a form box (d) counts down a timer
3. 3.🧩 Which language changes the text size? (a) CSS (b) HTML (c) JavaScript
4. 4.True or false: HTML makes a link. (a) False (b) True
5. 5.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the first one (c) the later one (d) the shorter one
6. 6.🌈 Which hex code is blue? (a) #000000 (b) #ffffff (c) #ff0000 (d) #0000ff
7. 7.Which of these does CSS do? (a) changes the text size (b) makes headings and lists (c) shows a pop-up message (d) changes the page live
8. 8.⚖️ What colour is the text of this element?
   <h1 class="note" id="top">Hi</h1>
   CSS:
   #top { color: blue; }
   #top { color: black; } (a) blue (b) black (c) green (d) orange
9. 9.⚖️ What colour is the text of this element?
   <h1 class="star" id="end">Hi</h1>
   CSS:
   h1 { color: red; }
   h1 { color: orange; } (a) green (b) blue (c) red (d) orange
10. 10.✍️ How does a CSS comment start? (a) # (b) /* (c) <!-- (d) //
11. 11.🧩 Which language makes a link? (a) HTML (b) JavaScript (c) CSS
12. 12.⚖️ What colour is the text of this element?
    <h1 class="big" id="hero">Hi</h1>
    CSS:
    #hero { color: white; }
    #hero { color: green; } (a) black (b) white (c) green (d) blue
13. 13.📦 In the box model, which part is space inside the border? (a) padding (b) border (c) margin (d) content
14. 14.Which of these is margin? (a) the text or picture (b) the gap to other boxes (c) a solid or dotted edge (d) space inside the border
15. 15.🖌️ What colour is behind the letters?
    h2 {
      text-align: left;
      background-color: blue;
      font-size: 40px;
      color: orange;
    } (a) orange (b) yellow (c) blue
16. 16.🖌️ What colour are the letters?
    h1 {
      font-size: 20px;
      background-color: white;
      color: black;
      text-align: right;
    } (a) blue (b) white (c) black
17. 17.💪 Which flexbox property picks row or column? (a) justify-content (b) flex-direction (c) display: flex (d) gap
18. 18.🖌️ Which CSS property picks the font style? (a) background-color (b) font-family (c) text-align (d) color
19. 19.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 200px;
      padding: 20px;
      border: 4px solid black;
      margin: 0px;
    }
20. 20.True or false: JavaScript gives the page structure. (a) True (b) False
21. 21.🌈 Which hex code is white? (a) #000000 (b) #ff00ff (c) #0000ff (d) #ffffff
22. 22.🌈 Which hex code is yellow? (a) #ff0000 (b) #ffff00 (c) #00ffff (d) #0000ff
23. 23.🎯 What kind of selector is .menu? (a) a class selector (b) an id selector (c) an element selector
24. 24.🌈 Which colour is #00ff00? (a) white (b) bright green (c) red (d) magenta
25. 25.⚖️ What colour is the text of this element?
    <p class="star" id="top">Hi</p>
    CSS:
    p { color: blue; }
    p { color: green; } (a) purple (b) blue (c) green (d) black
26. 26.📦 In the box model, which part is the gap round content? (a) margin (b) border (c) content (d) padding
27. 27.What does justify-content: flex-end do? (a) puts boxes in the middle (b) packs boxes at the end (c) packs boxes at the start (d) equal gaps, none at ends
28. 28.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 2 boxes, each 50px wide (no margins).
29. 29.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) white (c) blue (d) green
30. 30.✍️ Which property is set to 300px in this rule?
    .box {
      width: 300px;
      margin: 10px;
    } (a) font-style (b) 300px (c) color (d) width
31. 31.Which of these is the content? (a) the line round the box (b) a solid or dotted edge (c) the gap round content (d) the text or picture
32. 32.🖌️ Which CSS property centres a heading? (a) font-size (b) color (c) font-family (d) text-align
33. 33.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 50px;
      padding: 5px;
      border: 3px solid black;
      margin: 15px;
    }
34. 34.True or false: padding is the line round the box. (a) True (b) False
35. 35.True or false: #top is an id selector. (a) True (b) False
36. 36.Which of these does HTML do? (a) lays out the page (b) changes the page live (c) rounds box corners (d) makes a link
37. 37.🖌️ Where does the text sit on its line?
    h1 {
      background-color: orange;
      text-align: left;
      font-size: 40px;
      color: black;
    } (a) on the left (b) in the middle (c) on the right
38. 38.⚖️ What colour is the text of this element?
    <h2 class="red" id="hero">Hi</h2>
    CSS:
    #hero { color: yellow; }
    h2 { color: red; } (a) yellow (b) orange (c) red (d) green
39. 39.Which of these does JavaScript do? (a) makes a form box (b) sets colours and fonts (c) reacts to a button click (d) rounds box corners
40. 40.📱 What does a media query check? (a) the screen width (b) the battery level (c) the time of day (d) the page title

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