CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 952 · 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 element does the selector .note style? (a) <div class="big"> (b) <div class="note"> (c) <div id="note"> (d) <span class="red">
2. 2.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 160px;
     padding: 5px;
     border: 4px solid black;
     margin: 20px;
   }
3. 3.✍️ Which property is set to italic in this rule?
   .note {
     font-style: italic;
     border: 2px solid;
   } (a) color (b) italic (c) font-style (d) font-size
4. 4.🎯 What kind of selector is p? (a) an id selector (b) a class selector (c) an element selector
5. 5.True or false: JavaScript puts a picture on a page. (a) False (b) True
6. 6.🎯 What kind of selector is #logo? (a) an id selector (b) a class selector (c) an element selector
7. 7.🎯 Which sign starts an id selector? (a) @ (b) # (c) . (d) &
8. 8.Which of these does JavaScript do? (a) lays out the page (b) gives the page structure (c) changes the page live (d) changes the text size
9. 9.⚖️ What colour is the text of this element?
   <h2 class="menu" id="logo">Hi</h2>
   CSS:
   h2 { color: yellow; }
   h2 { color: red; } (a) red (b) purple (c) yellow (d) white
10. 10.🖌️ What colour is behind the letters?
    p {
      background-color: yellow;
      color: red;
      text-align: center;
      font-size: 24px;
    } (a) yellow (b) red (c) black
11. 11.🌈 Which colour is rgb(255, 255, 0)? (a) yellow (b) bright green (c) magenta (d) black
12. 12.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 220px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 100px wide (no margins).
13. 13.True or false: HTML reacts to a button click. (a) True (b) False
14. 14.⚖️ What colour is the text of this element?
    <p class="menu" id="hero">Hi</p>
    CSS:
    .menu { color: black; }
    .menu { color: green; } (a) black (b) yellow (c) green (d) white
15. 15.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
16. 16.💪 Which flexbox property spaces boxes along a row? (a) align-items (b) display: flex (c) gap (d) justify-content
17. 17.✍️ What value is given to padding in this rule?
    li {
      border: 2px solid;
      padding: 8px;
      color: red;
      margin: 10px;
    } (a) bold (b) padding (c) 2px solid (d) 8px
18. 18.🖌️ How big is the text, in px?
    h1 {
      background-color: purple;
      text-align: center;
      color: black;
      font-size: 36px;
    }
19. 19.✍️ What value is given to background-color in this rule?
    p {
      background-color: yellow;
      border: 2px solid;
      font-style: italic;
      text-align: center;
    } (a) 10px (b) 8px (c) yellow (d) background-color
20. 20.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the later one (c) neither (d) the first one
21. 21.🎯 Which element does the selector #top style? (a) <li class="top"> (b) <li id="top"> (c) <div class="big"> (d) <li id="intro">
22. 22.True or false: #top is an id selector. (a) True (b) False
23. 23.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    }
24. 24.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) 600px or wider (c) turned off (d) 600px or narrower
25. 25.True or false: the content is the text or picture. (a) True (b) False
26. 26.Which of these is margin? (a) space inside the border (b) the text or picture (c) the line round the box (d) space outside the border
27. 27.Which of these does CSS do? (a) makes headings and lists (b) makes a link (c) changes the text size (d) makes a form box
28. 28.✍️ Which sign goes between a property and its value? (a) ; (b) - (c) = (d) :
29. 29.🌈 Which hex code is magenta? (a) #ffff00 (b) #ff0000 (c) #00ffff (d) #ff00ff
30. 30.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      font-style: italic;
      text-align: center;
      color: red;
      padding: 8px;
    }
31. 31.🖌️ What colour are the letters?
    li {
      text-align: left;
      background-color: blue;
      font-size: 40px;
      color: black;
    } (a) blue (b) black (c) orange
32. 32.✍️ Which sign ends each CSS declaration? (a) , (b) ; (c) : (d) .
33. 33.✍️ In color: blue; which part is the value? (a) : (b) ; (c) blue (d) color
34. 34.🎨 What does CSS stand for? (a) Cascading Style Sheets (b) Computer Style Sheets (c) Colourful Site Styles (d) Creative Sheet System
35. 35.Which of these is the content? (a) space inside the border (b) the gap round content (c) the text or picture (d) the gap to other boxes
36. 36.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 26px;
      }
    }
37. 37.🎯 Which element does the selector h2 style? (a) <h2 class="menu"> (b) <span id="intro"> (c) <li> (d) <div class="menu">
38. 38.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) red (c) blue (d) green
39. 39.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 240px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 80px wide (no margins).
40. 40.True or false: the border is the text or picture. (a) False (b) True

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