CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 360 · 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 property is set to 10px in this rule?
   .box {
     background-color: yellow;
     margin: 10px;
     text-align: center;
   } (a) 10px (b) padding (c) margin (d) font-weight
2. 2.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) exactly 100px (c) 800px or narrower (d) turned off
3. 3.🖌️ Which CSS property makes letters bigger? (a) text-align (b) font-size (c) font-family (d) color
4. 4.What does background-color do? (a) makes the text bold (b) makes letters bigger (c) colours behind the text (d) picks the font style
5. 5.🖌️ Where does the text sit on its line?
   li {
     background-color: yellow;
     color: blue;
     text-align: center;
     font-size: 28px;
   } (a) on the right (b) in the middle (c) on the left
6. 6.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 30px;
     }
   } (a) Yes (b) No
7. 7.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the shorter one (c) the later one (d) neither
8. 8.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 180px;
     padding: 5px;
     border: 2px solid black;
     margin: 10px;
   }
9. 9.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
10. 10.🌈 Which colour of light is strongest in rgb(181, 124, 2)? (a) green (b) blue (c) red
11. 11.True or false: .big is an id selector. (a) True (b) False
12. 12.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 60px wide (no margins).
13. 13.📱 What does a media query check? (a) the screen width (b) the time of day (c) the battery level (d) the page title
14. 14.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 120px;
      padding: 25px;
      border: 5px solid black;
      margin: 20px;
    }
15. 15.✍️ Which sign goes between a property and its value? (a) - (b) ; (c) : (d) =
16. 16.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 430px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 100px wide (no margins).
17. 17.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 190px;
      padding: 25px;
      border: 4px solid black;
      margin: 5px;
    }
18. 18.⚖️ What colour is the text of this element?
    <p class="note" id="logo">Hi</p>
    CSS:
    p { color: red; }
    .note { color: black; } (a) purple (b) black (c) white (d) red
19. 19.True or false: .card is a class selector. (a) True (b) False
20. 20.True or false: padding is the gap round content. (a) False (b) True
21. 21.📦 In the box model, which part is the text or picture? (a) border (b) content (c) padding (d) margin
22. 22.Which of these is the border? (a) the gap to other boxes (b) the text or picture (c) a solid or dotted edge (d) space outside the border
23. 23.🖌️ Which CSS property makes the text bold? (a) font-weight (b) background-color (c) text-align (d) color
24. 24.🌈 In #0000f2 the blue part is the hex number f2. What is it as a normal number?
25. 25.🎯 Which CSS selector matches this element?
    <h2 class="big" id="logo">Hello</h2> (a) h2 (b) li (c) #end (d) #big
26. 26.True or false: the border is the gap round content. (a) False (b) True
27. 27.🌈 Which hex code is yellow? (a) #00ffff (b) #ffff00 (c) #00ff00 (d) #ffffff
28. 28.🧩 Which language counts down a timer? (a) HTML (b) JavaScript (c) CSS
29. 29.🎯 What kind of selector is li? (a) an element selector (b) a class selector (c) an id selector
30. 30.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 40px wide (no margins).
31. 31.Which of these does HTML do? (a) counts down a timer (b) gives the page structure (c) changes the page live (d) changes the text size
32. 32.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) black (c) green (d) red
33. 33.🎯 Which element does the selector h2 style? (a) <h2 class="menu"> (b) <span id="top"> (c) <li> (d) <div class="menu">
34. 34.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 28px;
      }
    }
35. 35.🎯 Which CSS selector matches this element?
    <h1 class="menu" id="top">Hello</h1> (a) h2 (b) .top (c) .menu (d) #menu
36. 36.🔍 Which is the odd one out? (a) adds space around boxes (b) gives the page structure (c) sets colours and fonts (d) rounds box corners
37. 37.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 290px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 50px wide (no margins).
38. 38.⚖️ What colour is the text of this element?
    <p class="note" id="top">Hi</p>
    CSS:
    #top { color: blue; }
    p { color: black; } (a) green (b) black (c) yellow (d) blue
39. 39.✍️ In color: blue; which part is the property? (a) : (b) color (c) blue (d) ;
40. 40.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 80px wide (no margins).

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