CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 891 · 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.True or false: JavaScript checks a quiz answer. (a) False (b) True
2. 2.True or false: JavaScript counts down a timer. (a) False (b) True
3. 3.📦 In the box model, which part is a solid or dotted edge? (a) padding (b) margin (c) border (d) content
4. 4.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 150px;
     justify-content: space-between;
   }
   Inside are 2 boxes, each 60px wide (no margins).
5. 5.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 10px;
     }
   }
6. 6.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 16px;
     }
   } (a) No (b) Yes
7. 7.💪 Which flexbox property turns on flexbox? (a) flex-direction (b) justify-content (c) display: flex (d) align-items
8. 8.⚖️ What colour is the text of this element?
   <p class="big" id="logo">Hi</p>
   CSS:
   .big { color: white; }
   .big { color: blue; } (a) red (b) blue (c) yellow (d) white
9. 9.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 14px;
     }
   }
10. 10.📱 Responsive design means a page ___. (a) is only for laptops (b) has no pictures (c) never changes (d) fits every screen
11. 11.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      text-align: center;
    }
12. 12.📱 What does a media query check? (a) the screen width (b) the battery level (c) the time of day (d) the page title
13. 13.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 280px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 100px wide (no margins).
14. 14.🎯 Which element does the selector .box style? (a) <p id="box"> (b) <h1 class="menu"> (c) <p class="box"> (d) <p class="star">
15. 15.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the shorter one (c) the later one (d) neither
16. 16.What does justify-content: center do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the start (d) packs boxes at the end
17. 17.🖌️ What colour are the letters?
    h2 {
      font-size: 16px;
      background-color: orange;
      color: white;
      text-align: left;
    } (a) orange (b) white (c) blue
18. 18.Which of these is the content? (a) the text or picture (b) a solid or dotted edge (c) the gap to other boxes (d) the gap round content
19. 19.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      font-style: italic;
    }
20. 20.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      width: 300px;
    }
21. 21.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 60px wide (no margins).
22. 22.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 26px;
      }
    }
23. 23.🌈 Which colour is #00ffff? (a) black (b) blue (c) magenta (d) cyan
24. 24.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    }
25. 25.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 26px;
      }
    }
26. 26.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 30px;
      }
    }
27. 27.True or false: HTML adds space around boxes. (a) False (b) True
28. 28.What does justify-content: flex-end do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the end (d) packs boxes at the start
29. 29.What does color do? (a) colours behind the text (b) makes letters bigger (c) picks the font style (d) sets the letter colour
30. 30.🎨 One CSS file can style how many pages? (a) many pages (b) no pages (c) only one word (d) only one image
31. 31.Which of these does JavaScript do? (a) makes a form box (b) rounds box corners (c) changes the page live (d) lays out the page
32. 32.✍️ How does a CSS comment start? (a) # (b) /* (c) // (d) <!--
33. 33.🎯 How many elements on a page should have the same id? (a) 5 (b) any number (c) 2 (d) 1
34. 34.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 160px;
      padding: 30px;
      border: 4px solid black;
      margin: 5px;
    }
35. 35.True or false: HTML rounds box corners. (a) False (b) True
36. 36.🌈 In #970000 the red part is the hex number 97. What is it as a normal number?
37. 37.🎯 Can many elements share the same class? (a) Yes (b) No
38. 38.🎯 What kind of selector is li? (a) an element selector (b) an id selector (c) a class selector
39. 39.✍️ What value is given to font-style in this rule?
    body {
      font-weight: bold;
      width: 300px;
      font-style: italic;
      text-align: center;
    } (a) italic (b) font-style (c) red (d) 20px
40. 40.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes

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