CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 59 · 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 is the odd one out? (a) shows a pop-up message (b) puts a picture on a page (c) makes headings and lists (d) makes a link
2. 2.✍️ CSS declarations go inside which brackets? (a) < > (b) ( ) (c) { } (d) [ ]
3. 3.What does font-family do? (a) colours behind the text (b) makes letters bigger (c) picks the font style (d) sets the letter colour
4. 4.📱 The screen is 1366px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 26px;
     }
   } (a) Yes (b) No
5. 5.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 16px;
     }
   }
6. 6.✍️ Which property is set to 8px in this rule?
   h2 {
     font-weight: bold;
     width: 300px;
     border: 2px solid;
     padding: 8px;
   } (a) border (b) 8px (c) padding (d) font-weight
7. 7.🔍 Which is the odd one out? (a) reacts to a button click (b) shows a pop-up message (c) sets colours and fonts (d) counts down a timer
8. 8.⚖️ Which selector is the strongest? (a) a class selector (b) an element selector (c) an id selector
9. 9.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 200px;
     padding: 30px;
     border: 5px solid black;
     margin: 0px;
   }
10. 10.📦 In the box model, which part is a solid or dotted edge? (a) margin (b) padding (c) border (d) content
11. 11.⚖️ What colour is the text of this element?
    <h1 class="note" id="end">Hi</h1>
    CSS:
    #end { color: red; }
    h1 { color: blue; }
    .note { color: purple; } (a) yellow (b) purple (c) red (d) blue
12. 12.✍️ What is the selector in this CSS rule?
    body {
      text-align: center;
      width: 300px;
      margin: 10px;
    } (a) body (b) 300px (c) text-align (d) .box
13. 13.🖌️ Which CSS property sets the letter colour? (a) text-align (b) color (c) font-weight (d) background-color
14. 14.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 240px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 80px wide (no margins).
15. 15.💪 Which flexbox property lines boxes up across? (a) gap (b) justify-content (c) flex-direction (d) align-items
16. 16.🖌️ Where does the text sit on its line?
    h1 {
      background-color: red;
      color: black;
      font-size: 20px;
      text-align: center;
    } (a) in the middle (b) on the right (c) on the left
17. 17.🎯 What kind of selector is .big? (a) an id selector (b) an element selector (c) a class selector
18. 18.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the later one (c) the shorter one (d) neither
19. 19.🎯 Which CSS selector matches this element?
    <h2 class="menu" id="intro">Hello</h2> (a) #menu (b) .intro (c) #intro (d) .note
20. 20.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      font-size: 20px;
      width: 300px;
      font-weight: bold;
    }
21. 21.🌈 Which colour is #00ff00? (a) magenta (b) white (c) red (d) bright green
22. 22.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 270px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 80px wide (no margins).
23. 23.Which of these is the content? (a) the text or picture (b) the line round the box (c) the gap round content (d) the gap to other boxes
24. 24.🧩 Which language changes the text size? (a) HTML (b) CSS (c) JavaScript
25. 25.⚖️ What colour is the text of this element?
    <h1 class="note" id="main">Hi</h1>
    CSS:
    #main { color: green; }
    #main { color: yellow; } (a) yellow (b) green (c) blue (d) purple
26. 26.✍️ What value is given to font-size in this rule?
    body {
      font-size: 20px;
      color: red;
      font-style: italic;
      font-weight: bold;
    } (a) yellow (b) 20px (c) center (d) font-size
27. 27.🌈 Which hex code is yellow? (a) #00ffff (b) #00ff00 (c) #ff00ff (d) #ffff00
28. 28.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 120px;
      padding: 20px;
      border: 1px solid black;
      margin: 0px;
    }
29. 29.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      background-color: yellow;
      width: 300px;
      color: red;
    }
30. 30.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) 800px or narrower (c) exactly 100px (d) 800px or wider
31. 31.🎯 What kind of selector is #logo? (a) an element selector (b) a class selector (c) an id selector
32. 32.✍️ What value is given to background-color in this rule?
    .note {
      padding: 8px;
      background-color: yellow;
    } (a) 10px (b) yellow (c) background-color (d) 8px
33. 33.🖌️ What colour is behind the letters?
    li {
      background-color: yellow;
      color: red;
      text-align: right;
      font-size: 16px;
    } (a) red (b) yellow (c) black
34. 34.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 80px wide (no margins).
35. 35.📦 In the box model, which part is the gap to other boxes? (a) content (b) border (c) padding (d) margin
36. 36.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 240px;
      justify-content: center;
    }
    Inside are 2 boxes, each 40px wide (no margins).
37. 37.✍️ How does a CSS comment start? (a) /* (b) // (c) <!-- (d) #
38. 38.🖌️ What colour is behind the letters?
    p {
      background-color: orange;
      font-size: 24px;
      text-align: right;
      color: yellow;
    } (a) white (b) orange (c) yellow
39. 39.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 420px;
      justify-content: center;
    }
    Inside are 4 boxes, each 100px wide (no margins).
40. 40.✍️ In color: blue; which part is the value? (a) color (b) blue (c) : (d) ;

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