CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 921 · 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.✍️ How many declarations (property: value pairs) are in this rule?
   body {
     font-weight: bold;
   }
2. 2.🎨 A CSS file usually ends with which extension? (a) .css (b) .html (c) .png (d) .js
3. 3.Which of these does JavaScript do? (a) changes the page live (b) adds space around boxes (c) sets colours and fonts (d) makes a form box
4. 4.🎯 Which CSS selector matches this element?
   <li class="menu" id="hero">Hello</li> (a) .note (b) #menu (c) #top (d) li
5. 5.True or false: margin is space outside the border. (a) True (b) False
6. 6.✍️ How does a CSS comment start? (a) <!-- (b) // (c) # (d) /*
7. 7.🎯 Which element does the selector #intro style? (a) <div id="main"> (b) <span class="box"> (c) <div id="intro"> (d) <div class="intro">
8. 8.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 22px;
     }
   }
9. 9.✍️ How many declarations (property: value pairs) are in this rule?
   body {
     background-color: yellow;
   }
10. 10.🔍 Which is the odd one out? (a) changes the page live (b) checks a quiz answer (c) puts a picture on a page (d) reacts to a button click
11. 11.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 140px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 40px wide (no margins).
12. 12.📱 What does a media query check? (a) the time of day (b) the screen width (c) the battery level (d) the page title
13. 13.🎯 How many elements on a page should have the same id? (a) 2 (b) 1 (c) any number (d) 5
14. 14.🌈 Which colour is #ff0000? (a) bright green (b) blue (c) white (d) red
15. 15.True or false: CSS makes headings and lists. (a) True (b) False
16. 16.✍️ What is the selector in this CSS rule?
    .box {
      font-weight: bold;
      width: 300px;
      font-size: 20px;
      margin: 10px;
    } (a) .box (b) font-weight (c) h2 (d) 300px
17. 17.⚖️ What colour is the text of this element?
    <h1 class="menu" id="logo">Hi</h1>
    CSS:
    #logo { color: orange; }
    .menu { color: red; } (a) orange (b) red (c) yellow (d) purple
18. 18.What does justify-content: space-between do? (a) packs boxes at the start (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the end
19. 19.🧩 Which language rounds box corners? (a) CSS (b) JavaScript (c) HTML
20. 20.💪 Which justify-content value equal gaps, none at ends? (a) center (b) flex-start (c) flex-end (d) space-between
21. 21.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 40px wide (no margins).
22. 22.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 280px;
      justify-content: center;
    }
    Inside are 2 boxes, each 80px wide (no margins).
23. 23.Which of these does HTML do? (a) makes a link (b) sets colours and fonts (c) counts down a timer (d) shows a pop-up message
24. 24.🖌️ How big is the text, in px?
    p {
      text-align: right;
      background-color: yellow;
      color: orange;
      font-size: 16px;
    }
25. 25.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      border: 2px solid;
      padding: 8px;
      width: 300px;
      margin: 10px;
    }
26. 26.🎨 Which tag connects an outside CSS file? (a) <a> (b) <css> (c) <link> (d) <img>
27. 27.What does text-align do? (a) centres a heading (b) makes the text bold (c) makes letters bigger (d) colours behind the text
28. 28.🖌️ Where does the text sit on its line?
    h1 {
      font-size: 24px;
      background-color: green;
      text-align: left;
      color: blue;
    } (a) in the middle (b) on the left (c) on the right
29. 29.🔍 Which is the odd one out? (a) makes a link (b) puts a picture on a page (c) counts down a timer (d) makes headings and lists
30. 30.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    }
31. 31.🎯 Which CSS selector matches this element?
    <h2 class="menu" id="hero">Hello</h2> (a) .hero (b) h2 (c) .note (d) li
32. 32.🖌️ How big is the text, in px?
    p {
      font-size: 20px;
      color: black;
      text-align: right;
      background-color: blue;
    }
33. 33.Which of these does JavaScript do? (a) adds space around boxes (b) makes a form box (c) checks a quiz answer (d) makes a link
34. 34.Which of these does CSS do? (a) changes the text size (b) makes headings and lists (c) checks a quiz answer (d) changes the page live
35. 35.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Creative Sheet System (c) Cascading Style Sheets (d) Colourful Site Styles
36. 36.📦 In the box model, which part is a solid or dotted edge? (a) border (b) content (c) margin (d) padding
37. 37.🌈 Which colour of light is strongest in rgb(26, 174, 28)? (a) green (b) blue (c) red
38. 38.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) 800px or wider (c) exactly 100px (d) turned off
39. 39.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) the shorter one (c) the first one (d) neither
40. 40.✍️ CSS declarations go inside which brackets? (a) [ ] (b) < > (c) { } (d) ( )

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