CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 367 · 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?
   h2 {
     font-style: italic;
     border: 2px solid;
     color: red;
     padding: 8px;
   }
2. 2.True or false: HTML changes the page live. (a) True (b) False
3. 3.🌈 Which colour of light is strongest in rgb(54, 77, 194)? (a) red (b) blue (c) green
4. 4.💪 Which flexbox property spaces boxes along a row? (a) gap (b) justify-content (c) display: flex (d) flex-direction
5. 5.🌈 Which hex code is blue? (a) #ffffff (b) #ffff00 (c) #00ff00 (d) #0000ff
6. 6.✍️ Which sign goes between a property and its value? (a) : (b) - (c) = (d) ;
7. 7.⚖️ What colour is the text of this element?
   <p class="star" id="logo">Hi</p>
   CSS:
   #logo { color: red; }
   .star { color: purple; } (a) red (b) blue (c) purple (d) yellow
8. 8.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 300px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 80px wide (no margins).
9. 9.🔍 Which is the odd one out? (a) reacts to a button click (b) checks a quiz answer (c) counts down a timer (d) sets colours and fonts
10. 10.🎯 What kind of selector is .card? (a) an element selector (b) a class selector (c) an id selector
11. 11.🎯 Which CSS selector matches this element?
    <li class="big" id="logo">Hello</li> (a) #big (b) #logo (c) .red (d) .logo
12. 12.🔍 Which is the odd one out? (a) makes headings and lists (b) sets colours and fonts (c) lays out the page (d) adds space around boxes
13. 13.🖌️ What colour are the letters?
    p {
      text-align: left;
      font-size: 28px;
      color: white;
      background-color: yellow;
    } (a) green (b) yellow (c) white
14. 14.🖌️ Which CSS property picks the font style? (a) background-color (b) text-align (c) font-family (d) color
15. 15.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) 600px or narrower (c) turned off (d) 600px or wider
16. 16.🎯 Which element does the selector h1 style? (a) <div id="logo"> (b) <li class="menu"> (c) <h1 class="menu"> (d) <h2>
17. 17.🌈 In #rrggbb, which colour do the last two digits give? (a) blue (b) red (c) green (d) white
18. 18.🖌️ Which CSS property sets the letter colour? (a) font-size (b) color (c) font-family (d) font-weight
19. 19.⚖️ What colour is the text of this element?
    <h2 class="big" id="end">Hi</h2>
    CSS:
    .big { color: green; }
    .big { color: orange; } (a) orange (b) red (c) yellow (d) green
20. 20.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) exactly 100px (c) 800px or wider (d) turned off
21. 21.💪 Which justify-content value packs boxes at the end? (a) flex-start (b) space-between (c) flex-end (d) center
22. 22.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 70px;
      padding: 10px;
      border: 2px solid black;
      margin: 5px;
    }
23. 23.💪 Which justify-content value packs boxes at the start? (a) space-between (b) center (c) flex-end (d) flex-start
24. 24.🎯 Which CSS selector matches this element?
    <h2 class="menu" id="top">Hello</h2> (a) .note (b) li (c) .menu (d) #intro
25. 25.🌈 Which colour is #ff0000? (a) red (b) black (c) yellow (d) bright green
26. 26.⚖️ What colour is the text of this element?
    <h2 class="note" id="intro">Hi</h2>
    CSS:
    h2 { color: blue; }
    .note { color: purple; } (a) blue (b) yellow (c) purple (d) red
27. 27.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 130px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 40px wide (no margins).
28. 28.✍️ What is the selector in this CSS rule?
    h1 {
      margin: 10px;
      font-style: italic;
    } (a) italic (b) p (c) h1 (d) margin
29. 29.🖌️ What colour are the letters?
    li {
      color: yellow;
      background-color: black;
      text-align: center;
      font-size: 36px;
    } (a) black (b) yellow (c) blue
30. 30.🌈 Which hex code is cyan? (a) #00ffff (b) #00ff00 (c) #ff0000 (d) #0000ff
31. 31.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 20px;
      }
    }
32. 32.True or false: JavaScript makes headings and lists. (a) True (b) False
33. 33.Which of these is margin? (a) the gap to other boxes (b) the line round the box (c) space inside the border (d) the gap round content
34. 34.🎯 Which CSS selector matches this element?
    <h1 class="big" id="end">Hello</h1> (a) .end (b) #hero (c) #end (d) h2
35. 35.🎯 What kind of selector is .big? (a) an element selector (b) a class selector (c) an id selector
36. 36.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 18px;
      }
    }
37. 37.⚖️ What colour is the text of this element?
    <h1 class="box" id="top">Hi</h1>
    CSS:
    #top { color: yellow; }
    #top { color: purple; } (a) purple (b) yellow (c) green (d) white
38. 38.🎯 What kind of selector is img? (a) an element selector (b) an id selector (c) a class selector
39. 39.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
40. 40.🌈 In #00a900 the green part is the hex number a9. What is it as a normal number?

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