CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 162 · 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?
   <h1 class="star" id="top">Hi</h1>
   CSS:
   .star { color: black; }
   .star { color: white; } (a) white (b) purple (c) black (d) yellow
2. 2.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 170px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 40px wide (no margins).
3. 3.✍️ In color: blue; which part is the value? (a) : (b) color (c) blue (d) ;
4. 4.What does justify-content: space-between do? (a) packs boxes at the start (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the end
5. 5.⚖️ What colour is the text of this element?
   <h1 class="star" id="top">Hi</h1>
   CSS:
   .star { color: black; }
   .star { color: blue; } (a) green (b) yellow (c) blue (d) black
6. 6.✍️ How does a CSS comment start? (a) # (b) // (c) /* (d) <!--
7. 7.Which of these is the border? (a) a solid or dotted edge (b) space outside the border (c) the text or picture (d) the gap to other boxes
8. 8.✍️ What value is given to background-color in this rule?
   body {
     background-color: yellow;
     border: 2px solid;
     text-align: center;
     color: red;
   } (a) 8px (b) yellow (c) background-color (d) 10px
9. 9.🧩 Which language sets colours and fonts? (a) JavaScript (b) CSS (c) HTML
10. 10.🖌️ How big is the text, in px?
    h2 {
      background-color: white;
      text-align: left;
      color: black;
      font-size: 16px;
    }
11. 11.🎯 How many elements on a page should have the same id? (a) any number (b) 1 (c) 2 (d) 5
12. 12.📱 What does a media query check? (a) the screen width (b) the battery level (c) the page title (d) the time of day
13. 13.True or false: the border is the gap to other boxes. (a) True (b) False
14. 14.🌈 Which colour is #00ffff? (a) cyan (b) black (c) red (d) yellow
15. 15.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 140px;
      padding: 10px;
      border: 3px solid black;
      margin: 10px;
    }
16. 16.📱 Responsive design means a page ___. (a) is only for laptops (b) fits every screen (c) has no pictures (d) never changes
17. 17.✍️ What is the selector in this CSS rule?
    #top {
      background-color: yellow;
      font-weight: bold;
      text-align: center;
    } (a) li (b) bold (c) background-color (d) #top
18. 18.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 280px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 80px wide (no margins).
19. 19.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) blue (c) red (d) green
20. 20.⚖️ What colour is the text of this element?
    <h2 class="box" id="hero">Hi</h2>
    CSS:
    #hero { color: white; }
    #hero { color: black; } (a) red (b) black (c) white (d) orange
21. 21.🌈 Which colour is rgb(0, 0, 0)? (a) white (b) black (c) bright green (d) yellow
22. 22.💪 Which justify-content value equal gaps, none at ends? (a) center (b) space-between (c) flex-end (d) flex-start
23. 23.💪 Which justify-content value puts boxes in the middle? (a) center (b) space-between (c) flex-start (d) flex-end
24. 24.✍️ In color: blue; which part is the property? (a) ; (b) color (c) blue (d) :
25. 25.✍️ Which property is set to 2px solid in this rule?
    p {
      font-size: 20px;
      border: 2px solid;
    } (a) border (b) font-style (c) 2px solid (d) width
26. 26.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      border: 2px solid;
      color: red;
      margin: 10px;
      font-style: italic;
    }
27. 27.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) exactly 100px (c) turned off (d) 800px or narrower
28. 28.Which of these does HTML do? (a) shows a pop-up message (b) adds space around boxes (c) changes the text size (d) makes a form box
29. 29.⚖️ What colour is the text of this element?
    <h1 class="menu" id="intro">Hi</h1>
    CSS:
    h1 { color: black; }
    h1 { color: yellow; } (a) yellow (b) green (c) black (d) orange
30. 30.✍️ What is the selector in this CSS rule?
    .box {
      font-style: italic;
      width: 300px;
    } (a) .box (b) font-style (c) 300px (d) h2
31. 31.What does font-size do? (a) centres a heading (b) makes the text bold (c) makes letters bigger (d) sets the letter colour
32. 32.🌈 Hex digits go 0 to 9, then A to which letter? (a) J (b) Z (c) G (d) F
33. 33.🌈 Which colour of light is strongest in rgb(250, 59, 23)? (a) blue (b) red (c) green
34. 34.True or false: the border is a solid or dotted edge. (a) False (b) True
35. 35.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector
36. 36.🖌️ Which CSS property picks the font style? (a) font-family (b) background-color (c) font-weight (d) font-size
37. 37.⚖️ What colour is the text of this element?
    <h1 class="box" id="top">Hi</h1>
    CSS:
    .box { color: yellow; }
    h1 { color: black; } (a) black (b) white (c) red (d) yellow
38. 38.⚖️ What colour is the text of this element?
    <h1 class="box" id="logo">Hi</h1>
    CSS:
    #logo { color: green; }
    #logo { color: blue; } (a) orange (b) blue (c) black (d) green
39. 39.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
40. 40.🎯 What kind of selector is li? (a) an id selector (b) a class selector (c) an element selector

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