CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 506 · 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.📱 The screen is 540px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 18px;
     }
   } (a) Yes (b) No
2. 2.Which of these is margin? (a) the gap round content (b) the text or picture (c) space inside the border (d) space outside the border
3. 3.✍️ How many declarations (property: value pairs) are in this rule?
   .box {
     font-size: 20px;
   }
4. 4.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
5. 5.🎯 What kind of selector is .note? (a) a class selector (b) an id selector (c) an element selector
6. 6.✍️ How many declarations (property: value pairs) are in this rule?
   li {
     text-align: center;
     width: 300px;
   }
7. 7.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 10px;
     }
   }
8. 8.⚖️ What colour is the text of this element?
   <p class="red" id="intro">Hi</p>
   CSS:
   .red { color: blue; }
   .red { color: yellow; } (a) purple (b) yellow (c) red (d) blue
9. 9.✍️ How many declarations (property: value pairs) are in this rule?
   .note {
     background-color: yellow;
   }
10. 10.True or false: the content is the text or picture. (a) True (b) False
11. 11.⚖️ What colour is the text of this element?
    <p class="red" id="intro">Hi</p>
    CSS:
    #intro { color: yellow; }
    .red { color: white; } (a) yellow (b) white (c) green (d) black
12. 12.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 16px;
      }
    } (a) No (b) Yes
13. 13.True or false: padding is the gap round content. (a) False (b) True
14. 14.🌈 In #005100 the green part is the hex number 51. What is it as a normal number?
15. 15.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 14px;
      }
    }
16. 16.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
17. 17.🌈 Which colour is #000000? (a) magenta (b) blue (c) yellow (d) black
18. 18.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 3 (b) 2 (c) 6 (d) 4
19. 19.🌈 Which colour is #00ff00? (a) blue (b) cyan (c) bright green (d) white
20. 20.✍️ What is the selector in this CSS rule?
    h2 {
      border: 2px solid;
      width: 300px;
      font-style: italic;
      margin: 10px;
    } (a) border (b) h2 (c) 300px (d) h1
21. 21.✍️ How does a CSS comment start? (a) <!-- (b) /* (c) # (d) //
22. 22.🎯 What kind of selector is p? (a) an id selector (b) an element selector (c) a class selector
23. 23.⚖️ What colour is the text of this element?
    <h2 class="big" id="main">Hi</h2>
    CSS:
    h2 { color: green; }
    h2 { color: red; } (a) red (b) green (c) black (d) white
24. 24.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      padding: 8px;
      background-color: yellow;
    }
25. 25.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 250px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 60px wide (no margins).
26. 26.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      font-weight: bold;
      background-color: yellow;
      border: 2px solid;
      text-align: center;
    }
27. 27.⚖️ Which selector is the strongest? (a) a class selector (b) an element selector (c) an id selector
28. 28.What does justify-content: space-between do? (a) packs boxes at the end (b) packs boxes at the start (c) puts boxes in the middle (d) equal gaps, none at ends
29. 29.Which of these does HTML do? (a) makes a link (b) changes the page live (c) shows a pop-up message (d) adds space around boxes
30. 30.True or false: HTML reacts to a button click. (a) True (b) False
31. 31.🖌️ Where does the text sit on its line?
    p {
      color: orange;
      font-size: 36px;
      background-color: white;
      text-align: left;
    } (a) on the right (b) in the middle (c) on the left
32. 32.Which of these is the content? (a) the gap round content (b) the text or picture (c) the gap to other boxes (d) space inside the border
33. 33.🎯 What kind of selector is #end? (a) a class selector (b) an element selector (c) an id selector
34. 34.🎨 Which tag connects an outside CSS file? (a) <img> (b) <link> (c) <a> (d) <css>
35. 35.True or false: .card is a class selector. (a) True (b) False
36. 36.🖌️ How big is the text, in px?
    h1 {
      text-align: center;
      color: black;
      font-size: 40px;
      background-color: purple;
    }
37. 37.🖌️ How big is the text, in px?
    h2 {
      font-size: 16px;
      background-color: orange;
      color: white;
      text-align: center;
    }
38. 38.⚖️ What colour is the text of this element?
    <p class="star" id="hero">Hi</p>
    CSS:
    .star { color: purple; }
    .star { color: white; } (a) purple (b) yellow (c) white (d) orange
39. 39.✍️ What is the selector in this CSS rule?
    .note {
      font-style: italic;
      padding: 8px;
      margin: 10px;
    } (a) #top (b) font-style (c) 8px (d) .note
40. 40.⚖️ What colour is the text of this element?
    <h2 class="menu" id="intro">Hi</h2>
    CSS:
    h2 { color: red; }
    .menu { color: green; }
    #intro { color: orange; } (a) green (b) purple (c) orange (d) red

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