CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 295 · 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 colour is #ff00ff? (a) black (b) magenta (c) white (d) red
2. 2.✍️ How does a CSS comment start? (a) /* (b) <!-- (c) // (d) #
3. 3.🖌️ Where does the text sit on its line?
   li {
     color: black;
     background-color: white;
     font-size: 36px;
     text-align: left;
   } (a) on the left (b) in the middle (c) on the right
4. 4.What does background-color do? (a) sets the letter colour (b) picks the font style (c) colours behind the text (d) makes the text bold
5. 5.🌈 Which hex code is cyan? (a) #00ffff (b) #ff00ff (c) #000000 (d) #ffffff
6. 6.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) flex-start (c) flex-end (d) center
7. 7.🎯 Which element does the selector .red style? (a) <h2 id="red"> (b) <li class="star"> (c) <h2 class="red"> (d) <h2 class="box">
8. 8.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 18px;
     }
   }
9. 9.🖌️ Which CSS property sets the letter colour? (a) font-weight (b) color (c) font-family (d) background-color
10. 10.🔍 Which is the odd one out? (a) shows a pop-up message (b) makes a link (c) counts down a timer (d) changes the page live
11. 11.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 260px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 80px wide (no margins).
12. 12.🖌️ What colour are the letters?
    p {
      background-color: green;
      color: orange;
      font-size: 36px;
      text-align: right;
    } (a) green (b) yellow (c) orange
13. 13.🎯 What kind of selector is .card? (a) an id selector (b) a class selector (c) an element selector
14. 14.⚖️ What colour is the text of this element?
    <h2 class="big" id="logo">Hi</h2>
    CSS:
    #logo { color: purple; }
    #logo { color: red; } (a) purple (b) black (c) blue (d) red
15. 15.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
16. 16.✍️ What value is given to font-size in this rule?
    li {
      font-size: 20px;
      text-align: center;
    } (a) 20px (b) center (c) yellow (d) font-size
17. 17.✍️ What value is given to background-color in this rule?
    p {
      background-color: yellow;
      color: red;
    } (a) background-color (b) 8px (c) 10px (d) yellow
18. 18.📱 Responsive design means a page ___. (a) fits every screen (b) is only for laptops (c) never changes (d) has no pictures
19. 19.✍️ Which property is set to red in this rule?
    .box {
      margin: 10px;
      color: red;
    } (a) font-size (b) red (c) text-align (d) color
20. 20.True or false: HTML lays out the page. (a) False (b) True
21. 21.⚖️ What colour is the text of this element?
    <h2 class="note" id="logo">Hi</h2>
    CSS:
    #logo { color: green; }
    h2 { color: blue; } (a) green (b) black (c) blue (d) red
22. 22.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      margin: 10px;
    }
23. 23.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Creative Sheet System (c) Colourful Site Styles (d) Cascading Style Sheets
24. 24.Which of these does JavaScript do? (a) rounds box corners (b) lays out the page (c) gives the page structure (d) checks a quiz answer
25. 25.💪 Which justify-content value packs boxes at the start? (a) flex-start (b) flex-end (c) center (d) space-between
26. 26.Which of these is padding? (a) the gap round content (b) space outside the border (c) a solid or dotted edge (d) the line round the box
27. 27.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      margin: 10px;
      font-weight: bold;
      background-color: yellow;
      font-size: 20px;
    }
28. 28.💪 Which flexbox property turns on flexbox? (a) gap (b) flex-direction (c) align-items (d) display: flex
29. 29.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 22px;
      }
    }
30. 30.What does color do? (a) sets the letter colour (b) colours behind the text (c) makes the text bold (d) centres a heading
31. 31.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 32px;
      }
    }
32. 32.💪 Which flexbox property sets space between boxes? (a) gap (b) display: flex (c) flex-direction (d) align-items
33. 33.🎯 What kind of selector is .star? (a) an element selector (b) a class selector (c) an id selector
34. 34.🌈 Which colour of light is strongest in rgb(0, 217, 138)? (a) red (b) green (c) blue
35. 35.📱 What does a media query check? (a) the time of day (b) the battery level (c) the page title (d) the screen width
36. 36.🌈 In #000018 the blue part is the hex number 18. What is it as a normal number?
37. 37.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      padding: 8px;
      font-weight: bold;
      background-color: yellow;
      color: red;
    }
38. 38.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 18px;
      }
    }
39. 39.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      font-style: italic;
      border: 2px solid;
      width: 300px;
      font-weight: bold;
    }
40. 40.🌈 In #000100 the green part is the hex number 01. What is it as a normal number?

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