CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 6 · 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.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 14px;
     }
   } (a) Yes (b) No
2. 2.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) 600px or wider (c) turned off (d) exactly 1000px
3. 3.🔍 Which is the odd one out? (a) gives the page structure (b) makes a link (c) makes headings and lists (d) adds space around boxes
4. 4.🎯 Which element does the selector .star style? (a) <div id="star"> (b) <span class="note"> (c) <div class="star"> (d) <div class="menu">
5. 5.🌈 Which colour is #ff00ff? (a) cyan (b) magenta (c) black (d) red
6. 6.🔍 Which is the odd one out? (a) reacts to a button click (b) counts down a timer (c) rounds box corners (d) shows a pop-up message
7. 7.🎯 Which CSS selector matches this element?
   <h1 class="star" id="end">Hello</h1> (a) h2 (b) .end (c) .star (d) #star
8. 8.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 180px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 50px wide (no margins).
9. 9.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) exactly 100px (c) turned off (d) 800px or narrower
10. 10.🖌️ Where does the text sit on its line?
    li {
      text-align: center;
      background-color: red;
      font-size: 24px;
      color: white;
    } (a) on the left (b) in the middle (c) on the right
11. 11.⚖️ What colour is the text of this element?
    <h1 class="red" id="hero">Hi</h1>
    CSS:
    .red { color: green; }
    h1 { color: orange; } (a) white (b) red (c) orange (d) green
12. 12.Which of these is padding? (a) the line round the box (b) the gap to other boxes (c) the text or picture (d) space inside the border
13. 13.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) neither (d) the later one
14. 14.🎯 How many elements on a page should have the same id? (a) 1 (b) 2 (c) any number (d) 5
15. 15.🎯 Which element does the selector h2 style? (a) <span id="logo"> (b) <li> (c) <div class="note"> (d) <h2 class="note">
16. 16.Which of these is margin? (a) the text or picture (b) the line round the box (c) a solid or dotted edge (d) the gap to other boxes
17. 17.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 260px;
      justify-content: center;
    }
    Inside are 4 boxes, each 40px wide (no margins).
18. 18.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 170px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 50px wide (no margins).
19. 19.🖌️ Which CSS property picks the font style? (a) font-family (b) font-size (c) font-weight (d) color
20. 20.🎯 Which CSS selector matches this element?
    <p class="big" id="top">Hello</p> (a) #big (b) #intro (c) #top (d) .red
21. 21.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    }
22. 22.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 50px wide (no margins).
23. 23.True or false: margin is space inside the border. (a) False (b) True
24. 24.🖌️ Where does the text sit on its line?
    li {
      color: white;
      font-size: 36px;
      text-align: center;
      background-color: purple;
    } (a) on the right (b) on the left (c) in the middle
25. 25.✍️ Which property is set to bold in this rule?
    h1 {
      margin: 10px;
      font-weight: bold;
      font-style: italic;
      border: 2px solid;
    } (a) border (b) font-weight (c) bold (d) width
26. 26.🖌️ Where does the text sit on its line?
    li {
      text-align: center;
      color: blue;
      font-size: 24px;
      background-color: black;
    } (a) on the left (b) on the right (c) in the middle
27. 27.Which of these does HTML do? (a) checks a quiz answer (b) shows a pop-up message (c) makes a link (d) adds space around boxes
28. 28.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    } (a) Yes (b) No
29. 29.✍️ CSS declarations go inside which brackets? (a) < > (b) [ ] (c) ( ) (d) { }
30. 30.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector
31. 31.🌈 What is the biggest number one colour can have in rgb()? (a) 99 (b) 1000 (c) 255 (d) 100
32. 32.🌈 Which colour is #ffff00? (a) bright green (b) red (c) black (d) yellow
33. 33.⚖️ What colour is the text of this element?
    <p class="note" id="end">Hi</p>
    CSS:
    .note { color: blue; }
    p { color: black; } (a) purple (b) blue (c) black (d) white
34. 34.✍️ Which property is set to 20px in this rule?
    p {
      background-color: yellow;
      font-size: 20px;
      margin: 10px;
    } (a) background-color (b) font-size (c) text-align (d) 20px
35. 35.🔍 Which is the odd one out? (a) puts a picture on a page (b) makes headings and lists (c) makes a link (d) reacts to a button click
36. 36.🌈 Which colour is rgb(0, 0, 255)? (a) bright green (b) yellow (c) blue (d) white
37. 37.🌈 Which hex code is blue? (a) #ff0000 (b) #ffffff (c) #0000ff (d) #ffff00
38. 38.🖌️ What colour is behind the letters?
    li {
      text-align: center;
      color: yellow;
      background-color: red;
      font-size: 40px;
    } (a) black (b) yellow (c) red
39. 39.✍️ What is the selector in this CSS rule?
    .note {
      margin: 10px;
      font-style: italic;
      padding: 8px;
      font-size: 20px;
    } (a) #top (b) margin (c) italic (d) .note
40. 40.✍️ In color: blue; which part is the value? (a) blue (b) : (c) color (d) ;

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