CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 183 · 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 CSS selector matches this element?
   <h2 class="star" id="hero">Hello</h2> (a) .menu (b) #star (c) li (d) .star
2. 2.✍️ CSS declarations go inside which brackets? (a) { } (b) ( ) (c) [ ] (d) < >
3. 3.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 80px;
     padding: 20px;
     border: 1px solid black;
     margin: 15px;
   }
4. 4.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) black (c) green (d) blue
5. 5.True or false: HTML puts a picture on a page. (a) True (b) False
6. 6.📦 In the box model, which part is space inside the border? (a) content (b) border (c) margin (d) padding
7. 7.✍️ What value is given to width in this rule?
   body {
     font-size: 20px;
     width: 300px;
     margin: 10px;
     font-style: italic;
   } (a) italic (b) width (c) red (d) 300px
8. 8.⚖️ What colour is the text of this element?
   <p class="big" id="main">Hi</p>
   CSS:
   .big { color: yellow; }
   p { color: blue; } (a) white (b) blue (c) red (d) yellow
9. 9.✍️ How many declarations (property: value pairs) are in this rule?
   h1 {
     border: 2px solid;
     font-style: italic;
     font-size: 20px;
     font-weight: bold;
   }
10. 10.🎯 Which CSS selector matches this element?
    <h1 class="note" id="logo">Hello</h1> (a) #note (b) .logo (c) h2 (d) h1
11. 11.🎯 What kind of selector is .note? (a) an element selector (b) an id selector (c) a class selector
12. 12.🖌️ What colour is behind the letters?
    h1 {
      text-align: right;
      color: green;
      background-color: blue;
      font-size: 12px;
    } (a) purple (b) green (c) blue
13. 13.🌈 In #260000 the red part is the hex number 26. What is it as a normal number?
14. 14.Which of these is padding? (a) space inside the border (b) space outside the border (c) the gap to other boxes (d) the text or picture
15. 15.Which of these is the content? (a) a solid or dotted edge (b) the text or picture (c) the line round the box (d) space inside the border
16. 16.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 240px;
      padding: 30px;
      border: 4px solid black;
      margin: 15px;
    }
17. 17.🎯 What kind of selector is p? (a) an element selector (b) a class selector (c) an id selector
18. 18.🖌️ What colour are the letters?
    li {
      font-size: 20px;
      text-align: left;
      color: black;
      background-color: purple;
    } (a) purple (b) yellow (c) black
19. 19.⚖️ What colour is the text of this element?
    <h2 class="red" id="intro">Hi</h2>
    CSS:
    h2 { color: orange; }
    #intro { color: yellow; } (a) red (b) yellow (c) orange (d) blue
20. 20.True or false: CSS rounds box corners. (a) True (b) False
21. 21.🎯 Which CSS selector matches this element?
    <h2 class="red" id="logo">Hello</h2> (a) .box (b) .logo (c) #logo (d) #red
22. 22.✍️ In color: blue; which part is the property? (a) : (b) color (c) blue (d) ;
23. 23.🎯 Which CSS selector matches this element?
    <span class="big" id="main">Hello</span> (a) #big (b) #main (c) .main (d) .red
24. 24.🧩 Which language shows a pop-up message? (a) CSS (b) HTML (c) JavaScript
25. 25.✍️ What value is given to color in this rule?
    p {
      color: red;
      font-style: italic;
    } (a) color (b) center (c) 20px (d) red
26. 26.🎯 Which sign starts a class selector? (a) # (b) @ (c) . (d) &
27. 27.⚖️ What colour is the text of this element?
    <h2 class="red" id="hero">Hi</h2>
    CSS:
    h2 { color: blue; }
    .red { color: white; }
    #hero { color: purple; } (a) purple (b) blue (c) white (d) yellow
28. 28.✍️ Which property is set to bold in this rule?
    #top {
      color: red;
      font-weight: bold;
    } (a) bold (b) font-weight (c) border (d) width
29. 29.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
30. 30.What does font-family do? (a) picks the font style (b) sets the letter colour (c) colours behind the text (d) makes the text bold
31. 31.🖌️ Which CSS property makes letters bigger? (a) font-family (b) color (c) font-weight (d) font-size
32. 32.Which of these does HTML do? (a) adds space around boxes (b) checks a quiz answer (c) makes a link (d) sets colours and fonts
33. 33.🎯 How many elements on a page should have the same id? (a) 1 (b) any number (c) 2 (d) 5
34. 34.💪 Which justify-content value packs boxes at the end? (a) center (b) flex-start (c) flex-end (d) space-between
35. 35.🖌️ What colour are the letters?
    h2 {
      background-color: purple;
      font-size: 28px;
      color: blue;
      text-align: center;
    } (a) red (b) blue (c) purple
36. 36.🎯 Which CSS selector matches this element?
    <span class="note" id="logo">Hello</span> (a) .big (b) #end (c) .logo (d) .note
37. 37.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 160px;
      justify-content: center;
    }
    Inside are 2 boxes, each 50px wide (no margins).
38. 38.🎯 What kind of selector is .big? (a) an element selector (b) a class selector (c) an id selector
39. 39.🌈 Which colour of light is strongest in rgb(243, 37, 35)? (a) red (b) blue (c) green
40. 40.🔍 Which is the odd one out? (a) checks a quiz answer (b) rounds box corners (c) changes the text size (d) sets colours and fonts

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