CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 216 · 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 tag helps phones show a page at the right size? (a) the viewport meta tag (b) the title tag (c) the hr tag (d) the br tag
2. 2.🎯 Which element does the selector div style? (a) <h1 id="top"> (b) <p class="red"> (c) <div class="red"> (d) <span>
3. 3.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 120px;
     padding: 25px;
     border: 3px solid black;
     margin: 5px;
   }
4. 4.What does justify-content: flex-end do? (a) equal gaps, none at ends (b) packs boxes at the start (c) packs boxes at the end (d) puts boxes in the middle
5. 5.🔍 Which is the odd one out? (a) gives the page structure (b) makes headings and lists (c) rounds box corners (d) makes a form box
6. 6.✍️ Which sign goes between a property and its value? (a) : (b) = (c) - (d) ;
7. 7.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) 800px or narrower (c) 800px or wider (d) exactly 100px
8. 8.🎯 What kind of selector is #logo? (a) a class selector (b) an id selector (c) an element selector
9. 9.Which of these does CSS do? (a) lays out the page (b) puts a picture on a page (c) reacts to a button click (d) gives the page structure
10. 10.📦 In the box model, which part is space inside the border? (a) padding (b) margin (c) content (d) border
11. 11.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
12. 12.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) neither (d) the later one
13. 13.What does text-align do? (a) sets the letter colour (b) centres a heading (c) makes the text bold (d) colours behind the text
14. 14.✍️ Which property is set to 20px in this rule?
    #top {
      font-size: 20px;
      border: 2px solid;
      padding: 8px;
    } (a) 20px (b) background-color (c) font-size (d) text-align
15. 15.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 270px;
      padding: 20px;
      border: 3px solid black;
      margin: 10px;
    }
16. 16.💪 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 80px wide (no margins).
17. 17.🌈 Which colour is rgb(0, 0, 0)? (a) cyan (b) black (c) magenta (d) blue
18. 18.✍️ What value is given to text-align in this rule?
    #top {
      text-align: center;
      border: 2px solid;
    } (a) center (b) 10px (c) yellow (d) text-align
19. 19.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) flex-start (c) center (d) space-between
20. 20.🎯 What kind of selector is p? (a) an element selector (b) a class selector (c) an id selector
21. 21.🌈 What is the biggest number one colour can have in rgb()? (a) 255 (b) 99 (c) 1000 (d) 100
22. 22.🖌️ Where does the text sit on its line?
    h1 {
      font-size: 20px;
      text-align: right;
      color: white;
      background-color: orange;
    } (a) on the left (b) in the middle (c) on the right
23. 23.🌈 Which colour is rgb(0, 0, 255)? (a) magenta (b) blue (c) yellow (d) red
24. 24.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 180px;
      padding: 10px;
      border: 5px solid black;
      margin: 10px;
    }
25. 25.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 22px;
      }
    }
26. 26.✍️ What value is given to color in this rule?
    h2 {
      border: 2px solid;
      margin: 10px;
      color: red;
      font-style: italic;
    } (a) color (b) red (c) center (d) 20px
27. 27.✍️ What value is given to font-size in this rule?
    .box {
      margin: 10px;
      font-size: 20px;
      background-color: yellow;
    } (a) center (b) yellow (c) font-size (d) 20px
28. 28.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 14px;
      }
    }
29. 29.📱 What does a media query check? (a) the battery level (b) the time of day (c) the page title (d) the screen width
30. 30.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the start (c) packs boxes at the end (d) equal gaps, none at ends
31. 31.✍️ Which property is set to center in this rule?
    body {
      text-align: center;
      color: red;
      padding: 8px;
      margin: 10px;
    } (a) text-align (b) background-color (c) margin (d) center
32. 32.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 14px;
      }
    }
33. 33.Which of these is margin? (a) the gap round content (b) space inside the border (c) space outside the border (d) the text or picture
34. 34.🖌️ What colour is behind the letters?
    p {
      font-size: 28px;
      color: red;
      background-color: yellow;
      text-align: right;
    } (a) green (b) red (c) yellow
35. 35.🔍 Which is the odd one out? (a) shows a pop-up message (b) lays out the page (c) checks a quiz answer (d) counts down a timer
36. 36.🎯 Which element does the selector #main style? (a) <h1 class="main"> (b) <h1 id="logo"> (c) <h1 id="main"> (d) <h2 class="menu">
37. 37.✍️ Which property is set to 20px in this rule?
    p {
      font-size: 20px;
      font-style: italic;
    } (a) font-size (b) background-color (c) text-align (d) 20px
38. 38.⚖️ What colour is the text of this element?
    <p class="box" id="top">Hi</p>
    CSS:
    p { color: red; }
    p { color: white; } (a) white (b) black (c) red (d) orange
39. 39.🌈 Which hex code is magenta? (a) #ff0000 (b) #ff00ff (c) #00ff00 (d) #ffff00
40. 40.Which of these is the content? (a) the gap round content (b) space inside the border (c) the line round the box (d) the text or picture

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