CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 689 · 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.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) turned off (c) 600px or wider (d) 600px or narrower
2. 2.What does background-color do? (a) picks the font style (b) colours behind the text (c) makes letters bigger (d) sets the letter colour
3. 3.True or false: img is an id selector. (a) True (b) False
4. 4.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 160px;
     justify-content: center;
   }
   Inside are 2 boxes, each 50px wide (no margins).
5. 5.🎯 What kind of selector is #main? (a) an id selector (b) a class selector (c) an element selector
6. 6.✍️ How many declarations (property: value pairs) are in this rule?
   .box {
     font-style: italic;
     font-size: 20px;
     padding: 8px;
     color: red;
   }
7. 7.🧩 Which language changes the text size? (a) HTML (b) CSS (c) JavaScript
8. 8.⚖️ What colour is the text of this element?
   <h2 class="star" id="end">Hi</h2>
   CSS:
   .star { color: white; }
   h2 { color: orange; } (a) blue (b) orange (c) white (d) purple
9. 9.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) 800px or wider (c) exactly 100px (d) 800px or narrower
10. 10.🎯 Which element does the selector h2 style? (a) <div class="menu"> (b) <h2 class="menu"> (c) <span id="end"> (d) <li>
11. 11.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      margin: 10px;
      text-align: center;
    }
12. 12.✍️ How does a CSS comment start? (a) <!-- (b) // (c) # (d) /*
13. 13.🎯 Which element does the selector .note style? (a) <p class="note"> (b) <h1 class="red"> (c) <p class="big"> (d) <p id="note">
14. 14.⚖️ What colour is the text of this element?
    <p class="big" id="top">Hi</p>
    CSS:
    .big { color: purple; }
    .big { color: red; } (a) red (b) white (c) blue (d) purple
15. 15.💪 Which justify-content value packs boxes at the end? (a) center (b) flex-start (c) flex-end (d) space-between
16. 16.💪 Which justify-content value packs boxes at the start? (a) center (b) flex-end (c) flex-start (d) space-between
17. 17.True or false: #hero is an id selector. (a) False (b) True
18. 18.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
19. 19.✍️ Which sign goes between a property and its value? (a) = (b) - (c) ; (d) :
20. 20.🖌️ Which CSS property centres a heading? (a) font-size (b) background-color (c) text-align (d) color
21. 21.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 80px wide (no margins).
22. 22.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      border: 2px solid;
      text-align: center;
    }
23. 23.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 270px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 60px wide (no margins).
24. 24.🌈 In #0a0000 the red part is the hex number 0a. What is it as a normal number?
25. 25.True or false: the border is space inside the border. (a) False (b) True
26. 26.Which of these is the border? (a) space inside the border (b) the gap round content (c) a solid or dotted edge (d) the text or picture
27. 27.🌈 Which hex code is black? (a) #000000 (b) #ffffff (c) #00ffff (d) #0000ff
28. 28.What does justify-content: flex-start do? (a) packs boxes at the start (b) packs boxes at the end (c) equal gaps, none at ends (d) puts boxes in the middle
29. 29.📱 Responsive design means a page ___. (a) has no pictures (b) is only for laptops (c) never changes (d) fits every screen
30. 30.⚖️ What colour is the text of this element?
    <p class="note" id="logo">Hi</p>
    CSS:
    #logo { color: purple; }
    .note { color: white; }
    p { color: blue; } (a) blue (b) black (c) white (d) purple
31. 31.🎨 Which attribute adds CSS inside one tag? (a) href (b) src (c) style (d) alt
32. 32.🖌️ Where does the text sit on its line?
    h1 {
      background-color: orange;
      text-align: right;
      font-size: 28px;
      color: yellow;
    } (a) in the middle (b) on the left (c) on the right
33. 33.💪 Which flexbox property sets space between boxes? (a) align-items (b) flex-direction (c) gap (d) display: flex
34. 34.🌈 In #006e00 the green part is the hex number 6e. What is it as a normal number?
35. 35.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 190px;
      padding: 20px;
      border: 1px solid black;
      margin: 0px;
    }
36. 36.🎯 Which element does the selector #hero style? (a) <h2 id="top"> (b) <li class="big"> (c) <h2 class="hero"> (d) <h2 id="hero">
37. 37.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    }
38. 38.✍️ What value is given to padding in this rule?
    p {
      background-color: yellow;
      padding: 8px;
      text-align: center;
      color: red;
    } (a) 2px solid (b) 8px (c) padding (d) bold
39. 39.Which of these is margin? (a) the text or picture (b) space outside the border (c) the line round the box (d) a solid or dotted edge
40. 40.🎯 What kind of selector is #end? (a) an element selector (b) a class selector (c) an id selector

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