CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 124 · 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?
   <h2 class="note" id="end">Hi</h2>
   CSS:
   .note { color: blue; }
   .note { color: orange; } (a) green (b) blue (c) orange (d) purple
2. 2.✍️ Which property is set to 2px solid in this rule?
   .note {
     border: 2px solid;
     color: red;
     background-color: yellow;
     padding: 8px;
   } (a) 2px solid (b) font-style (c) border (d) width
3. 3.✍️ Which property is set to center in this rule?
   li {
     text-align: center;
     padding: 8px;
   } (a) margin (b) text-align (c) background-color (d) center
4. 4.🌈 In #100000 the red part is the hex number 10. What is it as a normal number?
5. 5.True or false: padding is the gap round content. (a) True (b) False
6. 6.True or false: .big is an element selector. (a) True (b) False
7. 7.✍️ How many declarations (property: value pairs) are in this rule?
   p {
     font-weight: bold;
     width: 300px;
     font-size: 20px;
   }
8. 8.💪 Which flexbox property sets space between boxes? (a) align-items (b) flex-direction (c) gap (d) display: flex
9. 9.🎯 Which CSS selector matches this element?
   <p class="menu" id="main">Hello</p> (a) .note (b) #menu (c) p (d) h1
10. 10.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 2 (b) 6 (c) 3 (d) 4
11. 11.🖌️ What colour are the letters?
    h2 {
      color: purple;
      font-size: 12px;
      background-color: yellow;
      text-align: left;
    } (a) yellow (b) purple (c) orange
12. 12.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      font-size: 20px;
      padding: 8px;
      border: 2px solid;
    }
13. 13.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
14. 14.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 150px;
      padding: 10px;
      border: 2px solid black;
      margin: 15px;
    }
15. 15.✍️ What value is given to font-size in this rule?
    li {
      padding: 8px;
      font-size: 20px;
      text-align: center;
    } (a) center (b) font-size (c) 20px (d) yellow
16. 16.Which of these is the border? (a) the text or picture (b) space outside the border (c) the line round the box (d) the gap round content
17. 17.🧩 Which language changes the page live? (a) HTML (b) CSS (c) JavaScript
18. 18.🌈 In #000082 the blue part is the hex number 82. What is it as a normal number?
19. 19.✍️ What value is given to padding in this rule?
    body {
      border: 2px solid;
      padding: 8px;
      text-align: center;
    } (a) 2px solid (b) bold (c) 8px (d) padding
20. 20.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      padding: 8px;
      color: red;
      margin: 10px;
      text-align: center;
    }
21. 21.True or false: HTML checks a quiz answer. (a) True (b) False
22. 22.🖌️ What colour is behind the letters?
    h2 {
      background-color: purple;
      font-size: 12px;
      text-align: center;
      color: white;
    } (a) white (b) green (c) purple
23. 23.🧩 Which language makes headings and lists? (a) CSS (b) HTML (c) JavaScript
24. 24.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Creative Sheet System (c) Colourful Site Styles (d) Cascading Style Sheets
25. 25.True or false: the content is a solid or dotted edge. (a) True (b) False
26. 26.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 310px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 100px wide (no margins).
27. 27.🎯 Which element does the selector span style? (a) <p> (b) <span class="box"> (c) <h1 class="box"> (d) <h2 id="logo">
28. 28.🧩 Which language gives the page structure? (a) JavaScript (b) HTML (c) CSS
29. 29.🖌️ Where does the text sit on its line?
    h1 {
      text-align: center;
      font-size: 24px;
      color: black;
      background-color: orange;
    } (a) in the middle (b) on the left (c) on the right
30. 30.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 24px;
      }
    }
31. 31.✍️ What is the selector in this CSS rule?
    h1 {
      text-align: center;
      font-size: 20px;
      background-color: yellow;
    } (a) h1 (b) 20px (c) text-align (d) p
32. 32.⚖️ What colour is the text of this element?
    <p class="big" id="end">Hi</p>
    CSS:
    .big { color: red; }
    .big { color: purple; } (a) red (b) purple (c) blue (d) orange
33. 33.💪 Which flexbox property spaces boxes along a row? (a) gap (b) flex-direction (c) justify-content (d) display: flex
34. 34.🌈 Which hex code is yellow? (a) #00ffff (b) #ffff00 (c) #00ff00 (d) #ffffff
35. 35.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) neither (d) the later one
36. 36.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
37. 37.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 120px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 40px wide (no margins).
38. 38.Which of these is the content? (a) the gap round content (b) space inside the border (c) the line round the box (d) the text or picture
39. 39.🎯 Which CSS selector matches this element?
    <p class="big" id="logo">Hello</p> (a) h1 (b) #end (c) .red (d) p
40. 40.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      color: red;
      margin: 10px;
      font-style: italic;
    }

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