CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 884 · 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 sign ends each CSS declaration? (a) , (b) ; (c) : (d) .
2. 2.🌈 In #00005a the blue part is the hex number 5a. What is it as a normal number?
3. 3.True or false: #hero is a class selector. (a) True (b) False
4. 4.🖌️ Where does the text sit on its line?
   h1 {
     font-size: 24px;
     color: red;
     text-align: center;
     background-color: green;
   } (a) on the left (b) on the right (c) in the middle
5. 5.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 100px;
     justify-content: flex-end;
   }
   Inside are 2 boxes, each 40px wide (no margins).
6. 6.⚖️ What colour is the text of this element?
   <h2 class="red" id="end">Hi</h2>
   CSS:
   .red { color: blue; }
   h2 { color: black; } (a) blue (b) black (c) white (d) purple
7. 7.🌈 Which colour of light is strongest in rgb(52, 110, 157)? (a) red (b) blue (c) green
8. 8.📱 The screen is 1366px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 12px;
     }
   } (a) No (b) Yes
9. 9.⚖️ What colour is the text of this element?
   <h1 class="note" id="hero">Hi</h1>
   CSS:
   .note { color: green; }
   #hero { color: orange; }
   h1 { color: purple; } (a) green (b) orange (c) black (d) purple
10. 10.⚖️ What colour is the text of this element?
    <h1 class="menu" id="main">Hi</h1>
    CSS:
    .menu { color: yellow; }
    .menu { color: black; } (a) yellow (b) blue (c) black (d) orange
11. 11.Which of these does HTML do? (a) changes the page live (b) puts a picture on a page (c) counts down a timer (d) checks a quiz answer
12. 12.🎯 Which CSS selector matches this element?
    <h2 class="red" id="end">Hello</h2> (a) li (b) .box (c) #end (d) #red
13. 13.What does font-size do? (a) makes letters bigger (b) centres a heading (c) makes the text bold (d) colours behind the text
14. 14.✍️ How does a CSS comment start? (a) /* (b) // (c) <!-- (d) #
15. 15.💪 Which justify-content value equal gaps, none at ends? (a) space-between (b) flex-end (c) center (d) flex-start
16. 16.🌈 Which hex code is white? (a) #0000ff (b) #ff0000 (c) #ffffff (d) #000000
17. 17.✍️ What is the selector in this CSS rule?
    .note {
      text-align: center;
      font-size: 20px;
      width: 300px;
    } (a) #top (b) .note (c) 20px (d) text-align
18. 18.🎨 Which attribute adds CSS inside one tag? (a) style (b) href (c) alt (d) src
19. 19.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) turned off (c) 600px or wider (d) exactly 1000px
20. 20.🎯 Which CSS selector matches this element?
    <div class="note" id="logo">Hello</div> (a) .logo (b) #note (c) span (d) .note
21. 21.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
22. 22.🎯 Which element does the selector .star style? (a) <span class="note"> (b) <div class="menu"> (c) <div class="star"> (d) <div id="star">
23. 23.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 80px;
      padding: 15px;
      border: 5px solid black;
      margin: 0px;
    }
24. 24.Which of these is the content? (a) the line round the box (b) the gap round content (c) space outside the border (d) the text or picture
25. 25.True or false: .menu is an element selector. (a) True (b) False
26. 26.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: center;
    }
    Inside are 2 boxes, each 40px wide (no margins).
27. 27.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 250px;
      padding: 30px;
      border: 5px solid black;
      margin: 0px;
    }
28. 28.🎯 What kind of selector is #top? (a) an id selector (b) an element selector (c) a class selector
29. 29.🧩 Which language makes headings and lists? (a) HTML (b) JavaScript (c) CSS
30. 30.🖌️ What colour are the letters?
    p {
      background-color: black;
      color: purple;
      text-align: center;
      font-size: 28px;
    } (a) black (b) blue (c) purple
31. 31.True or false: HTML shows a pop-up message. (a) False (b) True
32. 32.True or false: JavaScript sets colours and fonts. (a) True (b) False
33. 33.🔍 Which is the odd one out? (a) checks a quiz answer (b) counts down a timer (c) makes a link (d) changes the page live
34. 34.🎯 What kind of selector is p? (a) an id selector (b) an element selector (c) a class selector
35. 35.🌈 Which hex code is blue? (a) #0000ff (b) #00ffff (c) #ffffff (d) #000000
36. 36.🌈 Which colour is #ffff00? (a) yellow (b) blue (c) red (d) white
37. 37.✍️ What value is given to border in this rule?
    #top {
      color: red;
      border: 2px solid;
      font-style: italic;
    } (a) 300px (b) italic (c) 2px solid (d) border
38. 38.🖌️ Where does the text sit on its line?
    p {
      background-color: orange;
      text-align: right;
      color: green;
      font-size: 16px;
    } (a) on the right (b) in the middle (c) on the left
39. 39.✍️ What is the selector in this CSS rule?
    body {
      border: 2px solid;
      margin: 10px;
      text-align: center;
    } (a) body (b) border (c) .box (d) 10px
40. 40.🖌️ What colour are the letters?
    h1 {
      font-size: 32px;
      background-color: green;
      text-align: left;
      color: orange;
    } (a) orange (b) green (c) yellow

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