CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 318 · 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 property makes the text bold? (a) font-weight (b) background-color (c) color (d) font-family
2. 2.🌈 Which hex code is bright green? (a) #0000ff (b) #ff00ff (c) #ff0000 (d) #00ff00
3. 3.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) black (c) green (d) blue
4. 4.📱 The screen is 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 28px;
     }
   } (a) No (b) Yes
5. 5.🔍 Which is the odd one out? (a) makes a form box (b) puts a picture on a page (c) makes headings and lists (d) changes the text size
6. 6.🎯 Can many elements share the same class? (a) Yes (b) No
7. 7.✍️ Which property is set to red in this rule?
   .box {
     color: red;
     margin: 10px;
     font-style: italic;
     background-color: yellow;
   } (a) color (b) font-size (c) text-align (d) red
8. 8.✍️ How many declarations (property: value pairs) are in this rule?
   h1 {
     color: red;
     font-size: 20px;
   }
9. 9.✍️ In color: blue; which part is the property? (a) blue (b) : (c) ; (d) color
10. 10.Which of these does CSS do? (a) adds space around boxes (b) makes a link (c) reacts to a button click (d) puts a picture on a page
11. 11.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      color: red;
      font-size: 20px;
      border: 2px solid;
    }
12. 12.🌈 Which colour is rgb(0, 255, 255)? (a) red (b) blue (c) cyan (d) yellow
13. 13.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
14. 14.🖌️ What colour are the letters?
    h1 {
      color: orange;
      background-color: red;
      text-align: left;
      font-size: 16px;
    } (a) green (b) orange (c) red
15. 15.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    }
16. 16.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      text-align: center;
    }
17. 17.🧩 Which language puts a picture on a page? (a) CSS (b) JavaScript (c) HTML
18. 18.🧩 Which language makes a form box? (a) HTML (b) JavaScript (c) CSS
19. 19.✍️ CSS declarations go inside which brackets? (a) [ ] (b) { } (c) ( ) (d) < >
20. 20.🎯 Which element does the selector h1 style? (a) <div id="main"> (b) <h1 class="star"> (c) <h2> (d) <li class="star">
21. 21.✍️ What is the selector in this CSS rule?
    #top {
      border: 2px solid;
      width: 300px;
      color: red;
      text-align: center;
    } (a) 300px (b) li (c) border (d) #top
22. 22.🎯 Which CSS selector matches this element?
    <h1 class="note" id="intro">Hello</h1> (a) #intro (b) #main (c) #note (d) .big
23. 23.🔍 Which is the odd one out? (a) reacts to a button click (b) counts down a timer (c) changes the page live (d) puts a picture on a page
24. 24.✍️ How does a CSS comment start? (a) // (b) /* (c) # (d) <!--
25. 25.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      color: red;
      font-style: italic;
      margin: 10px;
      background-color: yellow;
    }
26. 26.What does background-color do? (a) sets the letter colour (b) makes the text bold (c) picks the font style (d) colours behind the text
27. 27.🖌️ Which CSS property makes letters bigger? (a) font-size (b) color (c) font-family (d) background-color
28. 28.🎯 Which element does the selector .big style? (a) <span id="big"> (b) <span class="red"> (c) <p class="box"> (d) <span class="big">
29. 29.📱 Responsive design means a page ___. (a) has no pictures (b) fits every screen (c) never changes (d) is only for laptops
30. 30.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      font-size: 20px;
      text-align: center;
      margin: 10px;
    }
31. 31.🖌️ How big is the text, in px?
    h1 {
      color: orange;
      background-color: black;
      text-align: right;
      font-size: 12px;
    }
32. 32.🔍 Which is the odd one out? (a) sets colours and fonts (b) gives the page structure (c) makes a form box (d) makes headings and lists
33. 33.⚖️ What colour is the text of this element?
    <h1 class="big" id="hero">Hi</h1>
    CSS:
    h1 { color: green; }
    .big { color: orange; } (a) green (b) yellow (c) orange (d) purple
34. 34.📦 In the box model, which part is space inside the border? (a) margin (b) padding (c) content (d) border
35. 35.🧩 Which language shows a pop-up message? (a) JavaScript (b) CSS (c) HTML
36. 36.🧩 Which language sets colours and fonts? (a) HTML (b) CSS (c) JavaScript
37. 37.Which of these is the border? (a) space outside the border (b) space inside the border (c) the line round the box (d) the gap round content
38. 38.What does color do? (a) makes the text bold (b) colours behind the text (c) makes letters bigger (d) sets the letter colour
39. 39.True or false: the border is the gap to other boxes. (a) False (b) True
40. 40.Which of these is the border? (a) the gap to other boxes (b) a solid or dotted edge (c) space outside the border (d) space inside the border

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