CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 535 · 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 counts down a timer? (a) CSS (b) JavaScript (c) HTML
2. 2.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 20px;
     }
   }
3. 3.🎨 A CSS file usually ends with which extension? (a) .css (b) .png (c) .html (d) .js
4. 4.🌈 Which hex code is yellow? (a) #00ff00 (b) #00ffff (c) #ff0000 (d) #ffff00
5. 5.⚖️ What colour is the text of this element?
   <h2 class="star" id="intro">Hi</h2>
   CSS:
   .star { color: purple; }
   .star { color: black; } (a) white (b) purple (c) black (d) yellow
6. 6.What does color do? (a) colours behind the text (b) centres a heading (c) sets the letter colour (d) makes letters bigger
7. 7.💪 Which flexbox property picks row or column? (a) justify-content (b) flex-direction (c) gap (d) display: flex
8. 8.True or false: margin is the gap round content. (a) False (b) True
9. 9.Which of these does CSS do? (a) lays out the page (b) checks a quiz answer (c) reacts to a button click (d) puts a picture on a page
10. 10.✍️ What is the selector in this CSS rule?
    h2 {
      text-align: center;
      font-weight: bold;
      color: red;
      margin: 10px;
    } (a) text-align (b) h1 (c) h2 (d) bold
11. 11.True or false: HTML puts a picture on a page. (a) False (b) True
12. 12.✍️ What is the selector in this CSS rule?
    h1 {
      background-color: yellow;
      font-size: 20px;
      color: red;
      text-align: center;
    } (a) 20px (b) background-color (c) h1 (d) p
13. 13.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      color: red;
    }
14. 14.True or false: HTML makes a link. (a) True (b) False
15. 15.⚖️ What colour is the text of this element?
    <h2 class="red" id="main">Hi</h2>
    CSS:
    h2 { color: red; }
    #main { color: blue; } (a) white (b) red (c) green (d) blue
16. 16.🖌️ What colour are the letters?
    h2 {
      text-align: left;
      color: black;
      font-size: 12px;
      background-color: red;
    } (a) black (b) blue (c) red
17. 17.🧩 Which language makes a link? (a) JavaScript (b) CSS (c) HTML
18. 18.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the br tag (c) the title tag (d) the hr tag
19. 19.Which of these is the content? (a) the text or picture (b) a solid or dotted edge (c) space inside the border (d) the line round the box
20. 20.True or false: JavaScript changes the page live. (a) True (b) False
21. 21.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
22. 22.⚖️ What colour is the text of this element?
    <p class="big" id="logo">Hi</p>
    CSS:
    #logo { color: black; }
    #logo { color: blue; } (a) red (b) blue (c) black (d) yellow
23. 23.🎯 Can many elements share the same class? (a) Yes (b) No
24. 24.🧩 Which language gives the page structure? (a) CSS (b) JavaScript (c) HTML
25. 25.🌈 Which hex code is black? (a) #000000 (b) #00ffff (c) #00ff00 (d) #ffff00
26. 26.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
27. 27.✍️ What is the selector in this CSS rule?
    #top {
      color: red;
      background-color: yellow;
    } (a) #top (b) yellow (c) color (d) li
28. 28.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 40px wide (no margins).
29. 29.🎯 Which CSS selector matches this element?
    <p class="note" id="logo">Hello</p> (a) #note (b) h1 (c) #logo (d) .logo
30. 30.Which of these does JavaScript do? (a) changes the text size (b) sets colours and fonts (c) counts down a timer (d) adds space around boxes
31. 31.🖌️ Where does the text sit on its line?
    li {
      font-size: 20px;
      text-align: right;
      color: blue;
      background-color: orange;
    } (a) on the right (b) in the middle (c) on the left
32. 32.✍️ What is the selector in this CSS rule?
    h1 {
      font-size: 20px;
      margin: 10px;
      background-color: yellow;
    } (a) h1 (b) p (c) 10px (d) font-size
33. 33.🧩 Which language makes a form box? (a) HTML (b) CSS (c) JavaScript
34. 34.✍️ Which property is set to red in this rule?
    .note {
      background-color: yellow;
      color: red;
      font-size: 20px;
      font-weight: bold;
    } (a) red (b) color (c) font-size (d) text-align
35. 35.💪 Which justify-content value puts boxes in the middle? (a) center (b) flex-end (c) space-between (d) flex-start
36. 36.✍️ Which sign goes between a property and its value? (a) - (b) : (c) ; (d) =
37. 37.🧩 Which language puts a picture on a page? (a) JavaScript (b) CSS (c) HTML
38. 38.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 190px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 80px wide (no margins).
39. 39.🎯 Which CSS selector matches this element?
    <h2 class="note" id="logo">Hello</h2> (a) #end (b) li (c) #note (d) .note
40. 40.⚖️ What colour is the text of this element?
    <h1 class="note" id="top">Hi</h1>
    CSS:
    #top { color: blue; }
    #top { color: red; } (a) black (b) blue (c) red (d) green

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