CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 666 · 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 is the odd one out? (a) makes headings and lists (b) puts a picture on a page (c) gives the page structure (d) rounds box corners
2. 2.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the title tag (c) the viewport meta tag (d) the br tag
3. 3.Which of these does HTML do? (a) changes the text size (b) rounds box corners (c) makes a link (d) counts down a timer
4. 4.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the shorter one (c) the later one (d) neither
5. 5.🖌️ What colour is behind the letters?
   p {
     color: green;
     font-size: 36px;
     background-color: black;
     text-align: center;
   } (a) black (b) red (c) green
6. 6.⚖️ What colour is the text of this element?
   <p class="box" id="end">Hi</p>
   CSS:
   #end { color: red; }
   p { color: yellow; }
   .box { color: orange; } (a) green (b) orange (c) red (d) yellow
7. 7.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 200px;
     padding: 20px;
     border: 2px solid black;
     margin: 0px;
   }
8. 8.🖌️ Which CSS property colours behind the text? (a) font-family (b) background-color (c) text-align (d) font-weight
9. 9.🌈 Which colour is #00ff00? (a) black (b) bright green (c) blue (d) white
10. 10.⚖️ What colour is the text of this element?
    <h1 class="note" id="intro">Hi</h1>
    CSS:
    .note { color: green; }
    h1 { color: white; } (a) green (b) black (c) white (d) red
11. 11.🌈 Which colour is rgb(0, 255, 255)? (a) bright green (b) blue (c) cyan (d) yellow
12. 12.Which of these does JavaScript do? (a) adds space around boxes (b) sets colours and fonts (c) changes the page live (d) gives the page structure
13. 13.🧩 Which language sets colours and fonts? (a) HTML (b) CSS (c) JavaScript
14. 14.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 210px;
      padding: 20px;
      border: 4px solid black;
      margin: 0px;
    }
15. 15.✍️ What is the selector in this CSS rule?
    h2 {
      width: 300px;
      color: red;
      font-style: italic;
    } (a) width (b) red (c) h1 (d) h2
16. 16.🧩 Which language lays out the page? (a) JavaScript (b) CSS (c) HTML
17. 17.⚖️ What colour is the text of this element?
    <h2 class="note" id="main">Hi</h2>
    CSS:
    .note { color: red; }
    .note { color: blue; } (a) red (b) blue (c) white (d) black
18. 18.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    }
19. 19.True or false: CSS adds space around boxes. (a) False (b) True
20. 20.⚖️ What colour is the text of this element?
    <h2 class="red" id="hero">Hi</h2>
    CSS:
    .red { color: yellow; }
    h2 { color: black; } (a) red (b) yellow (c) purple (d) black
21. 21.True or false: HTML makes headings and lists. (a) False (b) True
22. 22.True or false: .menu is a class selector. (a) False (b) True
23. 23.🎯 Which CSS selector matches this element?
    <div class="note" id="main">Hello</div> (a) .main (b) div (c) .big (d) #logo
24. 24.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) flex-start (c) space-between (d) center
25. 25.✍️ What is the selector in this CSS rule?
    #top {
      background-color: yellow;
      color: red;
      border: 2px solid;
      text-align: center;
    } (a) #top (b) background-color (c) li (d) red
26. 26.Which of these is padding? (a) the gap round content (b) space outside the border (c) the text or picture (d) the line round the box
27. 27.What does color do? (a) makes the text bold (b) centres a heading (c) colours behind the text (d) sets the letter colour
28. 28.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 6px;
      }
    } (a) Yes (b) No
29. 29.🖌️ Which CSS property makes the text bold? (a) background-color (b) text-align (c) font-weight (d) font-family
30. 30.🌈 Which colour of light is strongest in rgb(231, 113, 100)? (a) red (b) blue (c) green
31. 31.✍️ CSS declarations go inside which brackets? (a) [ ] (b) { } (c) < > (d) ( )
32. 32.📦 In the box model, which part is the gap to other boxes? (a) content (b) margin (c) border (d) padding
33. 33.True or false: padding is space inside the border. (a) True (b) False
34. 34.🔍 Which is the odd one out? (a) makes headings and lists (b) makes a link (c) gives the page structure (d) lays out the page
35. 35.🌈 Which hex code is yellow? (a) #ffff00 (b) #ffffff (c) #ff00ff (d) #00ffff
36. 36.🎯 How many elements on a page should have the same id? (a) 5 (b) any number (c) 2 (d) 1
37. 37.✍️ Which property is set to 300px in this rule?
    #top {
      width: 300px;
      padding: 8px;
    } (a) 300px (b) font-style (c) width (d) color
38. 38.Which of these does CSS do? (a) shows a pop-up message (b) reacts to a button click (c) puts a picture on a page (d) adds space around boxes
39. 39.💪 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 50px wide (no margins).
40. 40.⚖️ What colour is the text of this element?
    <p class="note" id="end">Hi</p>
    CSS:
    p { color: red; }
    #end { color: black; } (a) black (b) yellow (c) red (d) purple

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