CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 549 · 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 is the odd one out? (a) changes the text size (b) puts a picture on a page (c) adds space around boxes (d) sets colours and fonts
2. 2.🌈 In #000000 the green part is the hex number 00. What is it as a normal number?
3. 3.🔍 Which is the odd one out? (a) adds space around boxes (b) changes the text size (c) lays out the page (d) makes a form box
4. 4.🎯 Which sign starts an id selector? (a) . (b) & (c) @ (d) #
5. 5.🌈 Hex digits go 0 to 9, then A to which letter? (a) G (b) F (c) Z (d) J
6. 6.🌈 Which colour is rgb(0, 255, 255)? (a) white (b) bright green (c) cyan (d) yellow
7. 7.📱 Responsive design means a page ___. (a) fits every screen (b) never changes (c) is only for laptops (d) has no pictures
8. 8.🎨 What does CSS stand for? (a) Cascading Style Sheets (b) Computer Style Sheets (c) Colourful Site Styles (d) Creative Sheet System
9. 9.🖌️ What colour is behind the letters?
   h2 {
     font-size: 36px;
     text-align: center;
     color: black;
     background-color: blue;
   } (a) black (b) white (c) blue
10. 10.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) turned off (c) 600px or narrower (d) exactly 1000px
11. 11.True or false: the border is a solid or dotted edge. (a) False (b) True
12. 12.🎨 Which tag holds CSS inside the head? (a) <body> (b) <style> (c) <css> (d) <script>
13. 13.⚖️ What colour is the text of this element?
    <h1 class="menu" id="end">Hi</h1>
    CSS:
    #end { color: black; }
    #end { color: white; } (a) red (b) black (c) blue (d) white
14. 14.🎯 What kind of selector is li? (a) a class selector (b) an id selector (c) an element selector
15. 15.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 330px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 60px wide (no margins).
16. 16.🎯 Which CSS selector matches this element?
    <p class="menu" id="hero">Hello</p> (a) .note (b) #top (c) #menu (d) .menu
17. 17.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 110px;
      padding: 10px;
      border: 1px solid black;
      margin: 20px;
    }
18. 18.True or false: the border is the gap round content. (a) True (b) False
19. 19.Which of these does HTML do? (a) changes the page live (b) sets colours and fonts (c) gives the page structure (d) rounds box corners
20. 20.True or false: padding is space inside the border. (a) True (b) False
21. 21.🎯 What kind of selector is p? (a) a class selector (b) an element selector (c) an id selector
22. 22.What does justify-content: flex-end do? (a) packs boxes at the start (b) packs boxes at the end (c) puts boxes in the middle (d) equal gaps, none at ends
23. 23.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 50px wide (no margins).
24. 24.True or false: margin is the gap to other boxes. (a) True (b) False
25. 25.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) 800px or wider (c) turned off (d) exactly 100px
26. 26.🖌️ How big is the text, in px?
    h2 {
      background-color: orange;
      text-align: left;
      color: green;
      font-size: 16px;
    }
27. 27.🖌️ What colour is behind the letters?
    h2 {
      text-align: center;
      font-size: 24px;
      color: blue;
      background-color: green;
    } (a) blue (b) green (c) orange
28. 28.✍️ Which property is set to 20px in this rule?
    li {
      text-align: center;
      font-size: 20px;
      color: red;
    } (a) text-align (b) font-size (c) background-color (d) 20px
29. 29.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
30. 30.🌈 Which colour of light is strongest in rgb(244, 74, 107)? (a) green (b) blue (c) red
31. 31.Which of these is padding? (a) the gap round content (b) a solid or dotted edge (c) the gap to other boxes (d) space outside the border
32. 32.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 18px;
      }
    }
33. 33.🎯 Which CSS selector matches this element?
    <h2 class="big" id="top">Hello</h2> (a) .red (b) #intro (c) .top (d) h2
34. 34.✍️ Which property is set to 20px in this rule?
    p {
      font-size: 20px;
      font-weight: bold;
      padding: 8px;
      width: 300px;
    } (a) 20px (b) background-color (c) text-align (d) font-size
35. 35.Which of these does JavaScript do? (a) makes headings and lists (b) adds space around boxes (c) gives the page structure (d) changes the page live
36. 36.Which of these is the content? (a) the gap round content (b) the gap to other boxes (c) space outside the border (d) the text or picture
37. 37.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 30px;
      }
    }
38. 38.🔍 Which is the odd one out? (a) shows a pop-up message (b) puts a picture on a page (c) makes a form box (d) makes a link
39. 39.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 360px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 60px wide (no margins).
40. 40.✍️ Which property is set to bold in this rule?
    li {
      font-weight: bold;
      width: 300px;
    } (a) bold (b) width (c) font-weight (d) border

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