CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 47 · 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 of these does CSS do? (a) makes a link (b) counts down a timer (c) sets colours and fonts (d) puts a picture on a page
2. 2.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 140px;
     padding: 5px;
     border: 4px solid black;
     margin: 0px;
   }
3. 3.🖌️ What colour is behind the letters?
   h2 {
     background-color: orange;
     color: green;
     font-size: 40px;
     text-align: right;
   } (a) green (b) orange (c) purple
4. 4.⚖️ What colour is the text of this element?
   <p class="note" id="intro">Hi</p>
   CSS:
   #intro { color: orange; }
   #intro { color: blue; } (a) blue (b) orange (c) green (d) black
5. 5.⚖️ What colour is the text of this element?
   <p class="star" id="top">Hi</p>
   CSS:
   p { color: red; }
   p { color: blue; } (a) blue (b) purple (c) green (d) red
6. 6.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the br tag (c) the hr tag (d) the title tag
7. 7.⚖️ What colour is the text of this element?
   <h2 class="red" id="intro">Hi</h2>
   CSS:
   .red { color: blue; }
   h2 { color: green; } (a) purple (b) green (c) blue (d) black
8. 8.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 220px;
     padding: 15px;
     border: 2px solid black;
     margin: 15px;
   }
9. 9.✍️ In color: blue; which part is the property? (a) blue (b) : (c) ; (d) color
10. 10.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the shorter one (c) neither (d) the later one
11. 11.🔍 Which is the odd one out? (a) counts down a timer (b) checks a quiz answer (c) shows a pop-up message (d) adds space around boxes
12. 12.🎯 Which CSS selector matches this element?
    <span class="star" id="main">Hello</span> (a) .menu (b) #star (c) #main (d) p
13. 13.⚖️ What colour is the text of this element?
    <h1 class="menu" id="hero">Hi</h1>
    CSS:
    #hero { color: blue; }
    #hero { color: red; } (a) blue (b) black (c) green (d) red
14. 14.True or false: .menu is an element selector. (a) True (b) False
15. 15.💪 Which flexbox property lines boxes up across? (a) align-items (b) gap (c) justify-content (d) flex-direction
16. 16.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) green (c) white (d) blue
17. 17.Which of these does JavaScript do? (a) gives the page structure (b) adds space around boxes (c) reacts to a button click (d) makes headings and lists
18. 18.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) black (c) red (d) blue
19. 19.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 28px;
      }
    } (a) Yes (b) No
20. 20.🌈 Which colour is rgb(255, 255, 0)? (a) red (b) blue (c) yellow (d) black
21. 21.🖌️ Which CSS property picks the font style? (a) font-size (b) color (c) font-family (d) text-align
22. 22.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 120px;
      padding: 25px;
      border: 2px solid black;
      margin: 20px;
    }
23. 23.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 240px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 80px wide (no margins).
24. 24.🎨 A CSS file usually ends with which extension? (a) .png (b) .css (c) .html (d) .js
25. 25.🎯 Which CSS selector matches this element?
    <h2 class="box" id="end">Hello</h2> (a) #box (b) #hero (c) .box (d) .star
26. 26.🎯 Which CSS selector matches this element?
    <p class="menu" id="hero">Hello</p> (a) .note (b) h1 (c) #menu (d) .menu
27. 27.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) 800px or wider (c) 800px or narrower (d) exactly 100px
28. 28.🔍 Which is the odd one out? (a) counts down a timer (b) puts a picture on a page (c) makes headings and lists (d) makes a form box
29. 29.✍️ What is the selector in this CSS rule?
    .box {
      font-size: 20px;
      font-weight: bold;
    } (a) h2 (b) .box (c) bold (d) font-size
30. 30.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 200px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 60px wide (no margins).
31. 31.🎯 Which element does the selector span style? (a) <span class="star"> (b) <h1 class="star"> (c) <p> (d) <h2 id="main">
32. 32.📱 What does a media query check? (a) the time of day (b) the page title (c) the screen width (d) the battery level
33. 33.⚖️ What colour is the text of this element?
    <h2 class="red" id="logo">Hi</h2>
    CSS:
    h2 { color: black; }
    h2 { color: white; } (a) black (b) yellow (c) white (d) orange
34. 34.🎯 Which CSS selector matches this element?
    <div class="note" id="top">Hello</div> (a) .top (b) .note (c) #note (d) span
35. 35.🎯 What kind of selector is #hero? (a) an id selector (b) a class selector (c) an element selector
36. 36.True or false: HTML gives the page structure. (a) True (b) False
37. 37.True or false: .note is an element selector. (a) True (b) False
38. 38.🖌️ How big is the text, in px?
    h1 {
      background-color: purple;
      text-align: center;
      font-size: 16px;
      color: blue;
    }
39. 39.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      margin: 10px;
      padding: 8px;
    }
40. 40.True or false: HTML reacts to a button click. (a) True (b) False

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