CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 648 · 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.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 200px;
     padding: 5px;
     border: 2px solid black;
     margin: 0px;
   }
2. 2.🖌️ What colour are the letters?
   li {
     text-align: left;
     font-size: 16px;
     color: orange;
     background-color: white;
   } (a) orange (b) purple (c) white
3. 3.🌈 Which colour is rgb(255, 255, 255)? (a) red (b) blue (c) white (d) cyan
4. 4.Which of these does JavaScript do? (a) gives the page structure (b) rounds box corners (c) makes a form box (d) changes the page live
5. 5.⚖️ What colour is the text of this element?
   <h1 class="star" id="main">Hi</h1>
   CSS:
   .star { color: orange; }
   #main { color: black; }
   h1 { color: blue; } (a) blue (b) black (c) white (d) orange
6. 6.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector
7. 7.Which of these does CSS do? (a) puts a picture on a page (b) gives the page structure (c) changes the page live (d) adds space around boxes
8. 8.Which of these does JavaScript do? (a) sets colours and fonts (b) changes the text size (c) shows a pop-up message (d) makes headings and lists
9. 9.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Creative Sheet System (c) Computer Style Sheets (d) Cascading Style Sheets
10. 10.🧩 Which language rounds box corners? (a) CSS (b) JavaScript (c) HTML
11. 11.🖌️ What colour is behind the letters?
    h2 {
      text-align: right;
      background-color: orange;
      color: purple;
      font-size: 36px;
    } (a) black (b) orange (c) purple
12. 12.🖌️ Which CSS property sets the letter colour? (a) text-align (b) color (c) background-color (d) font-weight
13. 13.True or false: JavaScript changes the page live. (a) False (b) True
14. 14.📦 In the box model, which part is space outside the border? (a) border (b) padding (c) content (d) margin
15. 15.📦 In the box model, which part is the line round the box? (a) content (b) padding (c) margin (d) border
16. 16.✍️ Which sign goes between a property and its value? (a) = (b) : (c) - (d) ;
17. 17.💪 Which flexbox property lines boxes up across? (a) flex-direction (b) display: flex (c) justify-content (d) align-items
18. 18.True or false: margin is space inside the border. (a) True (b) False
19. 19.🎨 Which tag connects an outside CSS file? (a) <link> (b) <img> (c) <css> (d) <a>
20. 20.🖌️ What colour are the letters?
    h1 {
      color: red;
      font-size: 12px;
      text-align: left;
      background-color: black;
    } (a) red (b) black (c) green
21. 21.True or false: the border is the gap round content. (a) False (b) True
22. 22.💪 Which justify-content value packs boxes at the end? (a) space-between (b) flex-start (c) center (d) flex-end
23. 23.🌈 Which colour is #ffff00? (a) blue (b) black (c) white (d) yellow
24. 24.🌈 Which colour of light is strongest in rgb(180, 140, 15)? (a) green (b) blue (c) red
25. 25.True or false: p is an id selector. (a) False (b) True
26. 26.🧩 Which language adds space around boxes? (a) CSS (b) JavaScript (c) HTML
27. 27.🌈 Which colour is rgb(0, 255, 0)? (a) bright green (b) cyan (c) blue (d) white
28. 28.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 24px;
      }
    }
29. 29.True or false: .menu is an element selector. (a) True (b) False
30. 30.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 460px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 100px wide (no margins).
31. 31.True or false: #hero is an id selector. (a) False (b) True
32. 32.🔍 Which is the odd one out? (a) shows a pop-up message (b) counts down a timer (c) checks a quiz answer (d) makes headings and lists
33. 33.🧩 Which language makes a form box? (a) CSS (b) HTML (c) JavaScript
34. 34.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 170px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 60px wide (no margins).
35. 35.🧩 Which language makes headings and lists? (a) JavaScript (b) HTML (c) CSS
36. 36.✍️ Which sign ends each CSS declaration? (a) : (b) ; (c) . (d) ,
37. 37.📦 In the box model, which part is the gap to other boxes? (a) padding (b) content (c) margin (d) border
38. 38.📱 Responsive design means a page ___. (a) fits every screen (b) has no pictures (c) never changes (d) is only for laptops
39. 39.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 160px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 50px wide (no margins).
40. 40.💪 Which flexbox property turns on flexbox? (a) gap (b) flex-direction (c) align-items (d) display: flex

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