CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 882 · 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 CSS selector matches this element?
   <p class="box" id="end">Hello</p> (a) p (b) #hero (c) #box (d) .end
2. 2.🖌️ Which CSS property makes letters bigger? (a) text-align (b) background-color (c) color (d) font-size
3. 3.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the end (c) equal gaps, none at ends (d) packs boxes at the start
4. 4.✍️ What value is given to width in this rule?
   li {
     width: 300px;
     color: red;
   } (a) italic (b) width (c) red (d) 300px
5. 5.Which of these is the content? (a) the gap to other boxes (b) the text or picture (c) space inside the border (d) the gap round content
6. 6.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 50px;
     padding: 10px;
     border: 3px solid black;
     margin: 0px;
   }
7. 7.🔍 Which is the odd one out? (a) reacts to a button click (b) counts down a timer (c) changes the text size (d) changes the page live
8. 8.🎨 Which tag connects an outside CSS file? (a) <css> (b) <img> (c) <link> (d) <a>
9. 9.True or false: padding is space inside the border. (a) False (b) True
10. 10.🖌️ Where does the text sit on its line?
    h2 {
      color: black;
      font-size: 32px;
      text-align: left;
      background-color: blue;
    } (a) on the right (b) on the left (c) in the middle
11. 11.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) exactly 100px (c) turned off (d) 800px or wider
12. 12.📱 Responsive design means a page ___. (a) never changes (b) is only for laptops (c) fits every screen (d) has no pictures
13. 13.What does justify-content: flex-end do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the end (d) packs boxes at the start
14. 14.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
15. 15.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) center (c) flex-end (d) flex-start
16. 16.✍️ What value is given to background-color in this rule?
    h2 {
      text-align: center;
      background-color: yellow;
    } (a) 10px (b) 8px (c) yellow (d) background-color
17. 17.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 170px;
      padding: 15px;
      border: 2px solid black;
      margin: 20px;
    }
18. 18.✍️ Which property is set to 8px in this rule?
    .note {
      padding: 8px;
      border: 2px solid;
    } (a) padding (b) border (c) font-weight (d) 8px
19. 19.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the viewport meta tag (c) the title tag (d) the br tag
20. 20.✍️ Which property is set to 20px in this rule?
    #top {
      background-color: yellow;
      text-align: center;
      font-size: 20px;
    } (a) text-align (b) background-color (c) 20px (d) font-size
21. 21.What does font-size do? (a) colours behind the text (b) centres a heading (c) makes the text bold (d) makes letters bigger
22. 22.🖌️ What colour are the letters?
    h1 {
      font-size: 36px;
      color: orange;
      background-color: green;
      text-align: right;
    } (a) blue (b) orange (c) green
23. 23.🎯 Which CSS selector matches this element?
    <h1 class="big" id="top">Hello</h1> (a) h2 (b) .red (c) #top (d) #big
24. 24.✍️ In color: blue; which part is the property? (a) blue (b) ; (c) color (d) :
25. 25.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) turned off (c) 600px or narrower (d) 600px or wider
26. 26.🎯 What kind of selector is .note? (a) a class selector (b) an element selector (c) an id selector
27. 27.⚖️ What colour is the text of this element?
    <h2 class="red" id="main">Hi</h2>
    CSS:
    h2 { color: red; }
    #main { color: purple; } (a) white (b) black (c) red (d) purple
28. 28.🎯 What kind of selector is .menu? (a) an id selector (b) a class selector (c) an element selector
29. 29.🎯 Which CSS selector matches this element?
    <li class="box" id="end">Hello</li> (a) .star (b) #box (c) .box (d) #hero
30. 30.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 24px;
      }
    } (a) No (b) Yes
31. 31.🎯 Which element does the selector #hero style? (a) <div class="hero"> (b) <span class="menu"> (c) <div id="top"> (d) <div id="hero">
32. 32.True or false: padding is the text or picture. (a) True (b) False
33. 33.⚖️ What colour is the text of this element?
    <h2 class="menu" id="end">Hi</h2>
    CSS:
    h2 { color: black; }
    .menu { color: purple; }
    #end { color: yellow; } (a) purple (b) green (c) black (d) yellow
34. 34.✍️ Which sign ends each CSS declaration? (a) . (b) ; (c) : (d) ,
35. 35.🌈 Which colour is #ffffff? (a) magenta (b) yellow (c) white (d) red
36. 36.⚖️ What colour is the text of this element?
    <p class="menu" id="intro">Hi</p>
    CSS:
    .menu { color: white; }
    #intro { color: blue; } (a) orange (b) green (c) white (d) blue
37. 37.🌈 Which hex code is yellow? (a) #0000ff (b) #ffff00 (c) #00ffff (d) #ff0000
38. 38.⚖️ What colour is the text of this element?
    <p class="note" id="top">Hi</p>
    CSS:
    .note { color: green; }
    .note { color: yellow; } (a) red (b) blue (c) green (d) yellow
39. 39.🎯 What kind of selector is #end? (a) an id selector (b) a class selector (c) an element selector
40. 40.🌈 Which hex code is blue? (a) #00ff00 (b) #ffff00 (c) #0000ff (d) #ff00ff

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