CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 430 · 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 of these is padding? (a) space outside the border (b) a solid or dotted edge (c) the gap round content (d) the line round the box
2. 2.💪 Which flexbox property lines boxes up across? (a) flex-direction (b) justify-content (c) display: flex (d) align-items
3. 3.💪 Which justify-content value packs boxes at the start? (a) flex-start (b) center (c) space-between (d) flex-end
4. 4.Which of these does JavaScript do? (a) lays out the page (b) rounds box corners (c) adds space around boxes (d) reacts to a button click
5. 5.✍️ How many declarations (property: value pairs) are in this rule?
   h2 {
     font-style: italic;
     border: 2px solid;
     color: red;
     margin: 10px;
   }
6. 6.🖌️ What colour are the letters?
   h1 {
     background-color: yellow;
     font-size: 24px;
     text-align: center;
     color: orange;
   } (a) orange (b) yellow (c) blue
7. 7.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 520px;
     justify-content: space-between;
   }
   Inside are 4 boxes, each 100px wide (no margins).
8. 8.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 380px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 100px wide (no margins).
9. 9.✍️ Which property is set to italic in this rule?
   .box {
     color: red;
     font-style: italic;
   } (a) font-style (b) font-size (c) italic (d) color
10. 10.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      font-weight: bold;
    }
11. 11.⚖️ What colour is the text of this element?
    <h1 class="big" id="end">Hi</h1>
    CSS:
    h1 { color: orange; }
    h1 { color: green; } (a) orange (b) purple (c) green (d) yellow
12. 12.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      padding: 8px;
    }
13. 13.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 250px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 50px wide (no margins).
14. 14.🌈 In #002400 the green part is the hex number 24. What is it as a normal number?
15. 15.⚖️ What colour is the text of this element?
    <h2 class="box" id="hero">Hi</h2>
    CSS:
    h2 { color: yellow; }
    h2 { color: black; } (a) purple (b) blue (c) black (d) yellow
16. 16.📱 What does a media query check? (a) the battery level (b) the page title (c) the screen width (d) the time of day
17. 17.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 16px;
      }
    }
18. 18.🎯 Can many elements share the same class? (a) No (b) Yes
19. 19.✍️ Which property is set to yellow in this rule?
    #top {
      width: 300px;
      background-color: yellow;
    } (a) yellow (b) margin (c) padding (d) background-color
20. 20.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the br tag (c) the title tag (d) the viewport meta tag
21. 21.Which of these is the border? (a) the text or picture (b) space outside the border (c) the gap round content (d) a solid or dotted edge
22. 22.True or false: JavaScript puts a picture on a page. (a) True (b) False
23. 23.True or false: HTML makes a form box. (a) False (b) True
24. 24.🖌️ What colour are the letters?
    h1 {
      font-size: 40px;
      text-align: left;
      color: yellow;
      background-color: orange;
    } (a) purple (b) orange (c) yellow
25. 25.🖌️ What colour are the letters?
    li {
      background-color: yellow;
      font-size: 20px;
      text-align: center;
      color: black;
    } (a) yellow (b) white (c) black
26. 26.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 90px;
      padding: 10px;
      border: 2px solid black;
      margin: 5px;
    }
27. 27.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      font-size: 20px;
      color: red;
    }
28. 28.🌈 Which colour is #ff0000? (a) cyan (b) red (c) black (d) magenta
29. 29.🌈 Hex digits go 0 to 9, then A to which letter? (a) J (b) F (c) G (d) Z
30. 30.💪 Which flexbox property turns on flexbox? (a) gap (b) flex-direction (c) justify-content (d) display: flex
31. 31.🧩 Which language checks a quiz answer? (a) HTML (b) JavaScript (c) CSS
32. 32.🌈 Which hex code is yellow? (a) #ff00ff (b) #ff0000 (c) #ffff00 (d) #0000ff
33. 33.📦 In the box model, which part is the gap round content? (a) margin (b) border (c) padding (d) content
34. 34.🎯 Which sign starts an id selector? (a) . (b) # (c) @ (d) &
35. 35.✍️ What value is given to margin in this rule?
    p {
      margin: 10px;
      width: 300px;
    } (a) 10px (b) 8px (c) margin (d) bold
36. 36.🖌️ What colour are the letters?
    h1 {
      color: blue;
      font-size: 36px;
      text-align: center;
      background-color: white;
    } (a) orange (b) blue (c) white
37. 37.🖌️ How big is the text, in px?
    li {
      text-align: left;
      background-color: blue;
      font-size: 24px;
      color: yellow;
    }
38. 38.🎨 Which tag connects an outside CSS file? (a) <css> (b) <img> (c) <link> (d) <a>
39. 39.What does color do? (a) centres a heading (b) makes letters bigger (c) colours behind the text (d) sets the letter colour
40. 40.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector

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