CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 874 · 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 value is given to font-weight in this rule?
   .box {
     font-weight: bold;
     border: 2px solid;
     padding: 8px;
   } (a) 2px solid (b) font-weight (c) 300px (d) bold
2. 2.✍️ In color: blue; which part is the property? (a) color (b) : (c) blue (d) ;
3. 3.✍️ How does a CSS comment start? (a) // (b) /* (c) <!-- (d) #
4. 4.Which of these does CSS do? (a) changes the page live (b) changes the text size (c) makes a link (d) puts a picture on a page
5. 5.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 3 (b) 6 (c) 2 (d) 4
6. 6.Which of these is padding? (a) the gap to other boxes (b) the text or picture (c) a solid or dotted edge (d) the gap round content
7. 7.True or false: the border is a solid or dotted edge. (a) True (b) False
8. 8.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 130px;
     justify-content: flex-end;
   }
   Inside are 2 boxes, each 60px wide (no margins).
9. 9.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 370px;
     justify-content: space-between;
   }
   Inside are 4 boxes, each 40px wide (no margins).
10. 10.🔍 Which is the odd one out? (a) adds space around boxes (b) changes the text size (c) sets colours and fonts (d) puts a picture on a page
11. 11.✍️ In color: blue; which part is the value? (a) color (b) ; (c) : (d) blue
12. 12.🌈 Which hex code is yellow? (a) #00ffff (b) #000000 (c) #0000ff (d) #ffff00
13. 13.💪 Which flexbox property turns on flexbox? (a) display: flex (b) flex-direction (c) align-items (d) gap
14. 14.🎯 Which element does the selector li style? (a) <li class="red"> (b) <span class="red"> (c) <p id="hero"> (d) <div>
15. 15.🎨 One CSS file can style how many pages? (a) no pages (b) many pages (c) only one word (d) only one image
16. 16.🧩 Which language gives the page structure? (a) JavaScript (b) CSS (c) HTML
17. 17.True or false: #main is an id selector. (a) True (b) False
18. 18.📦 In the box model, which part is the gap to other boxes? (a) content (b) border (c) margin (d) padding
19. 19.🎯 What kind of selector is img? (a) a class selector (b) an id selector (c) an element selector
20. 20.✍️ What is the selector in this CSS rule?
    li {
      font-style: italic;
      color: red;
      margin: 10px;
      font-weight: bold;
    } (a) li (b) font-style (c) red (d) body
21. 21.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 140px;
      padding: 20px;
      border: 5px solid black;
      margin: 5px;
    }
22. 22.True or false: JavaScript changes the page live. (a) False (b) True
23. 23.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 12px;
      }
    }
24. 24.📦 In the box model, which part is the gap round content? (a) padding (b) border (c) content (d) margin
25. 25.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      text-align: center;
    }
26. 26.🎯 What kind of selector is h1? (a) an id selector (b) an element selector (c) a class selector
27. 27.🧩 Which language checks a quiz answer? (a) HTML (b) JavaScript (c) CSS
28. 28.✍️ Which sign ends each CSS declaration? (a) . (b) , (c) ; (d) :
29. 29.🎯 Which CSS selector matches this element?
    <div class="menu" id="intro">Hello</div> (a) span (b) .intro (c) #intro (d) #main
30. 30.🧩 Which language sets colours and fonts? (a) JavaScript (b) HTML (c) CSS
31. 31.✍️ What value is given to margin in this rule?
    li {
      color: red;
      width: 300px;
      margin: 10px;
      text-align: center;
    } (a) margin (b) bold (c) 8px (d) 10px
32. 32.⚖️ What colour is the text of this element?
    <p class="big" id="end">Hi</p>
    CSS:
    #end { color: blue; }
    #end { color: red; } (a) purple (b) blue (c) white (d) red
33. 33.🎯 Which element does the selector #intro style? (a) <p class="intro"> (b) <h1 class="big"> (c) <p id="main"> (d) <p id="intro">
34. 34.🔍 Which is the odd one out? (a) lays out the page (b) makes headings and lists (c) rounds box corners (d) changes the text size
35. 35.⚖️ What colour is the text of this element?
    <p class="big" id="main">Hi</p>
    CSS:
    p { color: white; }
    p { color: black; } (a) red (b) yellow (c) white (d) black
36. 36.What does color do? (a) makes the text bold (b) colours behind the text (c) sets the letter colour (d) makes letters bigger
37. 37.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
38. 38.🌈 Which hex code is red? (a) #ff00ff (b) #ffffff (c) #00ffff (d) #ff0000
39. 39.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      margin: 10px;
      background-color: yellow;
    }
40. 40.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      color: red;
    }

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