CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 781 · 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.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 4 (b) 2 (c) 6 (d) 3
2. 2.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 70px;
     padding: 30px;
     border: 1px solid black;
     margin: 5px;
   }
3. 3.✍️ Which sign goes between a property and its value? (a) ; (b) : (c) - (d) =
4. 4.⚖️ What colour is the text of this element?
   <p class="menu" id="hero">Hi</p>
   CSS:
   .menu { color: orange; }
   .menu { color: green; } (a) orange (b) white (c) green (d) red
5. 5.⚖️ What colour is the text of this element?
   <h1 class="note" id="top">Hi</h1>
   CSS:
   #top { color: green; }
   h1 { color: red; } (a) green (b) red (c) orange (d) purple
6. 6.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 14px;
     }
   } (a) No (b) Yes
7. 7.📱 The screen is 540px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 18px;
     }
   } (a) No (b) Yes
8. 8.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 170px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 60px wide (no margins).
9. 9.📱 Responsive design means a page ___. (a) is only for laptops (b) never changes (c) fits every screen (d) has no pictures
10. 10.🖌️ What colour are the letters?
    h1 {
      font-size: 32px;
      color: purple;
      text-align: center;
      background-color: blue;
    } (a) green (b) purple (c) blue
11. 11.🌈 Hex digits go 0 to 9, then A to which letter? (a) Z (b) F (c) G (d) J
12. 12.🖌️ Which CSS property centres a heading? (a) font-family (b) font-weight (c) text-align (d) color
13. 13.🌈 In #001000 the green part is the hex number 10. What is it as a normal number?
14. 14.✍️ Which property is set to 8px in this rule?
    #top {
      padding: 8px;
      border: 2px solid;
      background-color: yellow;
      width: 300px;
    } (a) font-weight (b) padding (c) 8px (d) border
15. 15.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 28px;
      }
    }
16. 16.✍️ Which property is set to bold in this rule?
    li {
      font-weight: bold;
      width: 300px;
    } (a) border (b) bold (c) font-weight (d) width
17. 17.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: center;
    }
    Inside are 2 boxes, each 80px wide (no margins).
18. 18.⚖️ What colour is the text of this element?
    <p class="star" id="top">Hi</p>
    CSS:
    .star { color: purple; }
    #top { color: yellow; } (a) white (b) yellow (c) purple (d) blue
19. 19.Which of these is margin? (a) space inside the border (b) space outside the border (c) the text or picture (d) the line round the box
20. 20.⚖️ What colour is the text of this element?
    <h2 class="note" id="logo">Hi</h2>
    CSS:
    #logo { color: green; }
    h2 { color: blue; } (a) white (b) blue (c) black (d) green
21. 21.What does font-family do? (a) picks the font style (b) centres a heading (c) sets the letter colour (d) colours behind the text
22. 22.Which of these does HTML do? (a) rounds box corners (b) counts down a timer (c) shows a pop-up message (d) puts a picture on a page
23. 23.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) the first one (c) neither (d) the shorter one
24. 24.📦 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: 5px;
      border: 5px solid black;
      margin: 15px;
    }
25. 25.✍️ What is the selector in this CSS rule?
    .note {
      border: 2px solid;
      padding: 8px;
      text-align: center;
    } (a) .note (b) 8px (c) #top (d) border
26. 26.✍️ Which property is set to 8px in this rule?
    .box {
      border: 2px solid;
      text-align: center;
      padding: 8px;
      background-color: yellow;
    } (a) border (b) padding (c) font-weight (d) 8px
27. 27.🧩 Which language sets colours and fonts? (a) JavaScript (b) CSS (c) HTML
28. 28.🖌️ What colour are the letters?
    h1 {
      background-color: red;
      font-size: 20px;
      text-align: center;
      color: blue;
    } (a) red (b) blue (c) green
29. 29.🔍 Which is the odd one out? (a) counts down a timer (b) rounds box corners (c) checks a quiz answer (d) shows a pop-up message
30. 30.🖌️ What colour are the letters?
    li {
      font-size: 28px;
      text-align: center;
      color: orange;
      background-color: black;
    } (a) black (b) orange (c) blue
31. 31.🖌️ Where does the text sit on its line?
    p {
      font-size: 12px;
      color: purple;
      text-align: left;
      background-color: green;
    } (a) on the left (b) in the middle (c) on the right
32. 32.🎯 Which element does the selector li style? (a) <li class="note"> (b) <p id="hero"> (c) <span class="note"> (d) <div>
33. 33.🎯 Which CSS selector matches this element?
    <h1 class="note" id="main">Hello</h1> (a) #logo (b) #note (c) h1 (d) .big
34. 34.💪 Which justify-content value packs boxes at the start? (a) center (b) flex-start (c) space-between (d) flex-end
35. 35.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 70px;
      padding: 30px;
      border: 3px solid black;
      margin: 0px;
    }
36. 36.🌈 Which hex code is black? (a) #ff0000 (b) #0000ff (c) #000000 (d) #ffffff
37. 37.📱 What does a media query check? (a) the page title (b) the screen width (c) the battery level (d) the time of day
38. 38.True or false: p is an element selector. (a) True (b) False
39. 39.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 60px;
      padding: 10px;
      border: 4px solid black;
      margin: 5px;
    }
40. 40.🎯 What kind of selector is body? (a) a class selector (b) an element selector (c) an id selector

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