CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 196 · 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 language gives the page structure? (a) CSS (b) HTML (c) JavaScript
2. 2.✍️ Which property is set to italic in this rule?
   h2 {
     font-size: 20px;
     font-style: italic;
     font-weight: bold;
     width: 300px;
   } (a) italic (b) color (c) font-style (d) font-size
3. 3.🖌️ Where does the text sit on its line?
   h1 {
     text-align: left;
     background-color: black;
     font-size: 28px;
     color: orange;
   } (a) on the left (b) on the right (c) in the middle
4. 4.What does color do? (a) makes the text bold (b) colours behind the text (c) sets the letter colour (d) makes letters bigger
5. 5.⚖️ What colour is the text of this element?
   <h2 class="big" id="logo">Hi</h2>
   CSS:
   h2 { color: white; }
   .big { color: yellow; }
   #logo { color: black; } (a) white (b) yellow (c) red (d) black
6. 6.🖌️ What colour is behind the letters?
   h1 {
     background-color: yellow;
     text-align: center;
     color: red;
     font-size: 12px;
   } (a) orange (b) red (c) yellow
7. 7.⚖️ What colour is the text of this element?
   <h2 class="star" id="main">Hi</h2>
   CSS:
   #main { color: purple; }
   h2 { color: black; }
   .star { color: orange; } (a) black (b) green (c) orange (d) purple
8. 8.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 210px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 60px wide (no margins).
9. 9.📦 In the box model, which part is the gap to other boxes? (a) content (b) border (c) margin (d) padding
10. 10.🧩 Which language lays out the page? (a) JavaScript (b) HTML (c) CSS
11. 11.🌈 In #008e00 the green part is the hex number 8e. What is it as a normal number?
12. 12.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 6px;
      }
    } (a) Yes (b) No
13. 13.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      margin: 10px;
    }
14. 14.💪 Which flexbox property spaces boxes along a row? (a) gap (b) flex-direction (c) align-items (d) justify-content
15. 15.True or false: #end is an id selector. (a) True (b) False
16. 16.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Colourful Site Styles (c) Creative Sheet System (d) Cascading Style Sheets
17. 17.📦 In the box model, which part is a solid or dotted edge? (a) margin (b) border (c) padding (d) content
18. 18.True or false: HTML reacts to a button click. (a) True (b) False
19. 19.⚖️ What colour is the text of this element?
    <h2 class="star" id="top">Hi</h2>
    CSS:
    #top { color: purple; }
    h2 { color: yellow; } (a) yellow (b) black (c) purple (d) blue
20. 20.🎨 Which attribute adds CSS inside one tag? (a) href (b) style (c) alt (d) src
21. 21.🖌️ Which CSS property makes the text bold? (a) color (b) font-weight (c) font-family (d) text-align
22. 22.🔍 Which is the odd one out? (a) checks a quiz answer (b) makes a link (c) puts a picture on a page (d) makes headings and lists
23. 23.🖌️ Which CSS property centres a heading? (a) text-align (b) background-color (c) color (d) font-family
24. 24.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 8px;
      }
    }
25. 25.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 170px;
      padding: 10px;
      border: 3px solid black;
      margin: 0px;
    }
26. 26.Which of these is padding? (a) the text or picture (b) the gap to other boxes (c) the gap round content (d) space outside the border
27. 27.✍️ Which sign goes between a property and its value? (a) : (b) ; (c) - (d) =
28. 28.🎨 Which tag connects an outside CSS file? (a) <link> (b) <img> (c) <a> (d) <css>
29. 29.✍️ What value is given to background-color in this rule?
    .note {
      background-color: yellow;
      text-align: center;
    } (a) 10px (b) background-color (c) 8px (d) yellow
30. 30.🌈 In #e10000 the red part is the hex number e1. What is it as a normal number?
31. 31.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 300px;
      justify-content: center;
    }
    Inside are 2 boxes, each 100px wide (no margins).
32. 32.⚖️ What colour is the text of this element?
    <h2 class="star" id="end">Hi</h2>
    CSS:
    .star { color: orange; }
    .star { color: blue; } (a) orange (b) yellow (c) green (d) blue
33. 33.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 26px;
      }
    }
34. 34.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 14px;
      }
    }
35. 35.✍️ What is the selector in this CSS rule?
    p {
      padding: 8px;
      border: 2px solid;
      background-color: yellow;
    } (a) padding (b) .note (c) p (d) 2px solid
36. 36.⚖️ What colour is the text of this element?
    <h2 class="red" id="intro">Hi</h2>
    CSS:
    h2 { color: blue; }
    h2 { color: purple; } (a) red (b) blue (c) purple (d) yellow
37. 37.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 6px;
      }
    }
38. 38.✍️ What is the selector in this CSS rule?
    #top {
      width: 300px;
      font-size: 20px;
      color: red;
    } (a) width (b) 20px (c) #top (d) li
39. 39.Which of these is padding? (a) the line round the box (b) a solid or dotted edge (c) space inside the border (d) space outside the border
40. 40.🖌️ Which CSS property sets the letter colour? (a) background-color (b) font-weight (c) font-family (d) color

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