CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 193 · 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.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 80px;
     padding: 30px;
     border: 4px solid black;
     margin: 5px;
   }
2. 2.✍️ Which sign ends each CSS declaration? (a) . (b) ; (c) : (d) ,
3. 3.✍️ How many declarations (property: value pairs) are in this rule?
   h1 {
     width: 300px;
     font-style: italic;
     font-size: 20px;
   }
4. 4.🌈 Which colour is #ff0000? (a) white (b) cyan (c) black (d) red
5. 5.✍️ In color: blue; which part is the property? (a) blue (b) color (c) ; (d) :
6. 6.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 line round the box
7. 7.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 120px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 40px wide (no margins).
8. 8.🖌️ Where does the text sit on its line?
   p {
     font-size: 36px;
     text-align: center;
     color: orange;
     background-color: purple;
   } (a) on the right (b) in the middle (c) on the left
9. 9.🎯 Which CSS selector matches this element?
   <h1 class="note" id="end">Hello</h1> (a) h1 (b) .end (c) h2 (d) #hero
10. 10.Which of these does JavaScript do? (a) shows a pop-up message (b) puts a picture on a page (c) makes a form box (d) sets colours and fonts
11. 11.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 28px;
      }
    } (a) Yes (b) No
12. 12.📦 In the box model, which part is the gap round content? (a) border (b) padding (c) content (d) margin
13. 13.Which of these is the border? (a) space inside the border (b) the text or picture (c) space outside the border (d) a solid or dotted edge
14. 14.🎨 A CSS file usually ends with which extension? (a) .html (b) .css (c) .png (d) .js
15. 15.🖌️ What colour are the letters?
    h1 {
      text-align: left;
      background-color: black;
      font-size: 12px;
      color: white;
    } (a) black (b) orange (c) white
16. 16.⚖️ What colour is the text of this element?
    <p class="red" id="logo">Hi</p>
    CSS:
    p { color: black; }
    p { color: green; } (a) blue (b) black (c) green (d) red
17. 17.True or false: the content is the text or picture. (a) False (b) True
18. 18.What does font-weight do? (a) centres a heading (b) colours behind the text (c) makes letters bigger (d) makes the text bold
19. 19.🌈 Which colour is rgb(0, 0, 0)? (a) white (b) bright green (c) black (d) cyan
20. 20.🌈 In #0000e5 the blue part is the hex number e5. What is it as a normal number?
21. 21.True or false: body is an element selector. (a) False (b) True
22. 22.🎯 Which CSS selector matches this element?
    <span class="big" id="top">Hello</span> (a) .top (b) p (c) #big (d) span
23. 23.🎯 Which element does the selector div style? (a) <h1 id="end"> (b) <p class="note"> (c) <div class="note"> (d) <span>
24. 24.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 270px;
      padding: 20px;
      border: 2px solid black;
      margin: 10px;
    }
25. 25.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 250px;
      justify-content: center;
    }
    Inside are 3 boxes, each 50px wide (no margins).
26. 26.🎯 Can many elements share the same class? (a) Yes (b) No
27. 27.⚖️ What colour is the text of this element?
    <p class="box" id="main">Hi</p>
    CSS:
    .box { color: white; }
    #main { color: red; } (a) yellow (b) white (c) black (d) red
28. 28.⚖️ What colour is the text of this element?
    <p class="note" id="main">Hi</p>
    CSS:
    p { color: red; }
    #main { color: green; } (a) blue (b) green (c) orange (d) red
29. 29.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 270px;
      padding: 25px;
      border: 1px solid black;
      margin: 20px;
    }
30. 30.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 6px;
      }
    }
31. 31.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 30px;
      }
    } (a) Yes (b) No
32. 32.⚖️ What colour is the text of this element?
    <h1 class="box" id="intro">Hi</h1>
    CSS:
    .box { color: green; }
    .box { color: yellow; } (a) purple (b) orange (c) yellow (d) green
33. 33.🌈 Which colour is rgb(0, 255, 255)? (a) yellow (b) cyan (c) magenta (d) bright green
34. 34.💪 Which justify-content value packs boxes at the start? (a) space-between (b) flex-end (c) center (d) flex-start
35. 35.🎨 Which tag holds CSS inside the head? (a) <script> (b) <css> (c) <body> (d) <style>
36. 36.⚖️ What colour is the text of this element?
    <h1 class="star" id="intro">Hi</h1>
    CSS:
    .star { color: red; }
    h1 { color: blue; } (a) green (b) blue (c) red (d) yellow
37. 37.🎯 What kind of selector is .card? (a) an id selector (b) a class selector (c) an element selector
38. 38.🎯 What kind of selector is img? (a) an element selector (b) an id selector (c) a class selector
39. 39.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    } (a) No (b) Yes
40. 40.💪 Which flexbox property sets space between boxes? (a) flex-direction (b) justify-content (c) gap (d) display: flex

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