CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 972 · 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 of these is the content? (a) a solid or dotted edge (b) the gap round content (c) the line round the box (d) the text or picture
2. 2.⚖️ What colour is the text of this element?
   <p class="note" id="end">Hi</p>
   CSS:
   .note { color: blue; }
   #end { color: yellow; }
   p { color: orange; } (a) blue (b) orange (c) red (d) yellow
3. 3.📦 In the box model, which part is space inside the border? (a) content (b) margin (c) padding (d) border
4. 4.🌈 Which colour of light is strongest in rgb(130, 113, 179)? (a) red (b) green (c) blue
5. 5.🖌️ What colour is behind the letters?
   h1 {
     background-color: blue;
     text-align: right;
     color: yellow;
     font-size: 40px;
   } (a) orange (b) blue (c) yellow
6. 6.🖌️ Where does the text sit on its line?
   h2 {
     background-color: white;
     font-size: 24px;
     color: green;
     text-align: center;
   } (a) on the left (b) on the right (c) in the middle
7. 7.🖌️ How big is the text, in px?
   li {
     background-color: blue;
     font-size: 28px;
     color: black;
     text-align: right;
   }
8. 8.⚖️ What colour is the text of this element?
   <h2 class="star" id="hero">Hi</h2>
   CSS:
   .star { color: red; }
   h2 { color: black; } (a) green (b) red (c) blue (d) black
9. 9.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 18px;
     }
   }
10. 10.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) flex-start (c) center (d) space-between
11. 11.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 110px;
      padding: 5px;
      border: 5px solid black;
      margin: 5px;
    }
12. 12.🖌️ What colour are the letters?
    h2 {
      font-size: 20px;
      text-align: left;
      color: yellow;
      background-color: purple;
    } (a) green (b) yellow (c) purple
13. 13.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
14. 14.True or false: padding is the gap to other boxes. (a) True (b) False
15. 15.🎨 Which attribute adds CSS inside one tag? (a) style (b) src (c) alt (d) href
16. 16.🔍 Which is the odd one out? (a) checks a quiz answer (b) changes the page live (c) makes headings and lists (d) reacts to a button click
17. 17.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 160px;
      padding: 20px;
      border: 3px solid black;
      margin: 10px;
    }
18. 18.📦 In the box model, which part is the line round the box? (a) padding (b) margin (c) content (d) border
19. 19.✍️ Which sign ends each CSS declaration? (a) , (b) : (c) . (d) ;
20. 20.⚖️ What colour is the text of this element?
    <p class="box" id="main">Hi</p>
    CSS:
    .box { color: yellow; }
    .box { color: orange; } (a) purple (b) red (c) orange (d) yellow
21. 21.⚖️ What colour is the text of this element?
    <h2 class="box" id="end">Hi</h2>
    CSS:
    #end { color: orange; }
    .box { color: red; } (a) orange (b) red (c) black (d) yellow
22. 22.What does text-align do? (a) sets the letter colour (b) colours behind the text (c) picks the font style (d) centres a heading
23. 23.💪 Which justify-content value packs boxes at the end? (a) flex-end (b) center (c) space-between (d) flex-start
24. 24.🌈 Which hex code is red? (a) #ff0000 (b) #ffff00 (c) #000000 (d) #0000ff
25. 25.🧩 Which language puts a picture on a page? (a) HTML (b) CSS (c) JavaScript
26. 26.🖌️ How big is the text, in px?
    p {
      color: orange;
      background-color: red;
      text-align: left;
      font-size: 36px;
    }
27. 27.🖌️ Which CSS property colours behind the text? (a) font-weight (b) color (c) font-size (d) background-color
28. 28.🌈 Which hex code is magenta? (a) #ff00ff (b) #ffff00 (c) #ffffff (d) #00ff00
29. 29.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 120px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 50px wide (no margins).
30. 30.Which of these does HTML do? (a) lays out the page (b) counts down a timer (c) makes headings and lists (d) sets colours and fonts
31. 31.✍️ In color: blue; which part is the value? (a) : (b) blue (c) color (d) ;
32. 32.🌈 In #000033 the blue part is the hex number 33. What is it as a normal number?
33. 33.Which of these is margin? (a) the text or picture (b) space outside the border (c) the line round the box (d) the gap round content
34. 34.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 16px;
      }
    } (a) Yes (b) No
35. 35.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 370px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 40px wide (no margins).
36. 36.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      font-style: italic;
      font-size: 20px;
      width: 300px;
    }
37. 37.⚖️ 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
38. 38.✍️ Which property is set to center in this rule?
    li {
      text-align: center;
      margin: 10px;
    } (a) text-align (b) background-color (c) margin (d) center
39. 39.🎯 Which element does the selector #intro style? (a) <div class="red"> (b) <li class="intro"> (c) <li id="main"> (d) <li id="intro">
40. 40.🌈 In #0000e1 the blue part is the hex number e1. What is it as a normal number?

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