CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 319 · 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.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the later one (c) the shorter one (d) the first one
2. 2.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) flex-end (c) flex-start (d) center
3. 3.🌈 Which hex code is yellow? (a) #000000 (b) #ff0000 (c) #ffff00 (d) #00ff00
4. 4.True or false: HTML makes headings and lists. (a) False (b) True
5. 5.True or false: .note is a class selector. (a) False (b) True
6. 6.✍️ Which property is set to 20px in this rule?
   li {
     font-size: 20px;
     font-weight: bold;
   } (a) font-size (b) background-color (c) 20px (d) text-align
7. 7.✍️ What value is given to text-align in this rule?
   p {
     text-align: center;
     font-weight: bold;
   } (a) center (b) text-align (c) 10px (d) yellow
8. 8.⚖️ What colour is the text of this element?
   <p class="big" id="logo">Hi</p>
   CSS:
   #logo { color: red; }
   #logo { color: green; } (a) green (b) red (c) orange (d) blue
9. 9.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 240px;
     padding: 20px;
     border: 3px solid black;
     margin: 15px;
   }
10. 10.What does justify-content: flex-start do? (a) packs boxes at the end (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the start
11. 11.Which of these is the content? (a) the gap round content (b) the line round the box (c) the text or picture (d) space outside the border
12. 12.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
13. 13.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 25px;
      border: 5px solid black;
      margin: 5px;
    }
14. 14.✍️ Which property is set to italic in this rule?
    p {
      background-color: yellow;
      font-style: italic;
    } (a) color (b) italic (c) font-size (d) font-style
15. 15.🖌️ Which CSS property sets the letter colour? (a) color (b) font-weight (c) font-family (d) background-color
16. 16.🌈 In #1b0000 the red part is the hex number 1b. What is it as a normal number?
17. 17.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      width: 300px;
      background-color: yellow;
      font-size: 20px;
    }
18. 18.✍️ How does a CSS comment start? (a) // (b) /* (c) <!-- (d) #
19. 19.🌈 Which colour of light is strongest in rgb(120, 70, 184)? (a) green (b) red (c) blue
20. 20.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the hr tag (c) the viewport meta tag (d) the br tag
21. 21.🌈 Which hex code is blue? (a) #00ff00 (b) #ff00ff (c) #00ffff (d) #0000ff
22. 22.🌈 Which colour of light is strongest in rgb(93, 167, 135)? (a) blue (b) green (c) red
23. 23.True or false: body is a class selector. (a) True (b) False
24. 24.🖌️ Where does the text sit on its line?
    h1 {
      font-size: 36px;
      background-color: purple;
      text-align: center;
      color: black;
    } (a) on the right (b) in the middle (c) on the left
25. 25.🎯 Which CSS selector matches this element?
    <h1 class="note" id="top">Hello</h1> (a) h2 (b) .big (c) #note (d) #top
26. 26.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
27. 27.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 160px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 60px wide (no margins).
28. 28.✍️ What value is given to border in this rule?
    p {
      text-align: center;
      font-style: italic;
      border: 2px solid;
    } (a) 300px (b) 2px solid (c) border (d) italic
29. 29.🎯 Which element does the selector div style? (a) <p class="big"> (b) <span> (c) <h1 id="logo"> (d) <div class="big">
30. 30.💪 Which flexbox property spaces boxes along a row? (a) gap (b) display: flex (c) justify-content (d) align-items
31. 31.💪 Which flexbox property sets space between boxes? (a) align-items (b) flex-direction (c) gap (d) justify-content
32. 32.🌈 Which colour is rgb(0, 255, 0)? (a) cyan (b) bright green (c) black (d) blue
33. 33.🌈 Which colour is #ffffff? (a) red (b) white (c) black (d) yellow
34. 34.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 200px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 40px wide (no margins).
35. 35.True or false: .card is an id selector. (a) False (b) True
36. 36.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 260px;
      padding: 20px;
      border: 2px solid black;
      margin: 10px;
    }
37. 37.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 15px;
      border: 5px solid black;
      margin: 5px;
    }
38. 38.⚖️ What colour is the text of this element?
    <p class="menu" id="hero">Hi</p>
    CSS:
    p { color: yellow; }
    #hero { color: green; } (a) yellow (b) green (c) purple (d) orange
39. 39.⚖️ What colour is the text of this element?
    <h1 class="menu" id="end">Hi</h1>
    CSS:
    .menu { color: purple; }
    .menu { color: blue; } (a) purple (b) orange (c) blue (d) green
40. 40.📦 In the box model, which part is the line round the box? (a) padding (b) content (c) margin (d) border

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