CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 505 · 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 colour is rgb(255, 255, 255)? (a) black (b) magenta (c) red (d) white
2. 2.✍️ What value is given to width in this rule?
   li {
     color: red;
     font-size: 20px;
     width: 300px;
   } (a) width (b) red (c) italic (d) 300px
3. 3.📱 What does a media query check? (a) the battery level (b) the page title (c) the screen width (d) the time of day
4. 4.Which of these does CSS do? (a) counts down a timer (b) makes a link (c) adds space around boxes (d) reacts to a button click
5. 5.🎯 How many elements on a page should have the same id? (a) 1 (b) 5 (c) 2 (d) any number
6. 6.⚖️ What colour is the text of this element?
   <h1 class="big" id="hero">Hi</h1>
   CSS:
   h1 { color: white; }
   h1 { color: red; } (a) red (b) yellow (c) orange (d) white
7. 7.🎯 Which element does the selector .box style? (a) <span id="box"> (b) <span class="box"> (c) <span class="star"> (d) <p class="menu">
8. 8.✍️ What value is given to border in this rule?
   .box {
     border: 2px solid;
     font-weight: bold;
   } (a) italic (b) border (c) 300px (d) 2px solid
9. 9.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) white (c) blue (d) green
10. 10.🎨 A CSS file usually ends with which extension? (a) .html (b) .js (c) .css (d) .png
11. 11.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 430px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 100px wide (no margins).
12. 12.True or false: HTML makes a link. (a) True (b) False
13. 13.🧩 Which language makes a form box? (a) HTML (b) CSS (c) JavaScript
14. 14.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the end (c) packs boxes at the start (d) equal gaps, none at ends
15. 15.🌈 Which colour is #ffff00? (a) yellow (b) white (c) bright green (d) black
16. 16.🎨 What does CSS stand for? (a) Creative Sheet System (b) Cascading Style Sheets (c) Colourful Site Styles (d) Computer Style Sheets
17. 17.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) flex-end (c) center (d) space-between
18. 18.🖌️ What colour is behind the letters?
    h1 {
      background-color: orange;
      font-size: 24px;
      color: yellow;
      text-align: center;
    } (a) yellow (b) purple (c) orange
19. 19.Which of these does HTML do? (a) changes the text size (b) lays out the page (c) changes the page live (d) makes a link
20. 20.⚖️ What colour is the text of this element?
    <h1 class="red" id="hero">Hi</h1>
    CSS:
    h1 { color: green; }
    h1 { color: blue; } (a) red (b) blue (c) green (d) orange
21. 21.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
22. 22.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 60px;
      padding: 5px;
      border: 3px solid black;
      margin: 5px;
    }
23. 23.🎯 Can many elements share the same class? (a) No (b) Yes
24. 24.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 60px;
      padding: 20px;
      border: 1px solid black;
      margin: 15px;
    }
25. 25.💪 Which flexbox property sets space between boxes? (a) gap (b) justify-content (c) flex-direction (d) align-items
26. 26.✍️ Which property is set to 20px in this rule?
    h2 {
      font-size: 20px;
      color: red;
      background-color: yellow;
    } (a) 20px (b) text-align (c) background-color (d) font-size
27. 27.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 130px;
      padding: 5px;
      border: 1px solid black;
      margin: 10px;
    }
28. 28.🎯 Which element does the selector .menu style? (a) <h2 class="note"> (b) <h2 id="menu"> (c) <h2 class="menu"> (d) <li class="big">
29. 29.🌈 Which colour is #00ffff? (a) white (b) red (c) blue (d) cyan
30. 30.Which of these is the border? (a) the line round the box (b) the text or picture (c) the gap round content (d) space outside the border
31. 31.🌈 Which colour is #ffffff? (a) white (b) blue (c) black (d) red
32. 32.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 120px;
      padding: 5px;
      border: 5px solid black;
      margin: 10px;
    }
33. 33.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the title tag (c) the br tag (d) the viewport meta tag
34. 34.💪 Which flexbox property picks row or column? (a) align-items (b) display: flex (c) justify-content (d) flex-direction
35. 35.✍️ What is the selector in this CSS rule?
    body {
      padding: 8px;
      font-style: italic;
    } (a) .box (b) body (c) padding (d) italic
36. 36.✍️ What value is given to font-size in this rule?
    .note {
      font-style: italic;
      font-size: 20px;
      background-color: yellow;
      padding: 8px;
    } (a) 20px (b) font-size (c) yellow (d) center
37. 37.🖌️ Where does the text sit on its line?
    h1 {
      color: green;
      text-align: left;
      background-color: white;
      font-size: 12px;
    } (a) on the right (b) on the left (c) in the middle
38. 38.🌈 Which colour is rgb(255, 255, 0)? (a) blue (b) yellow (c) white (d) bright green
39. 39.🌈 Which hex code is black? (a) #000000 (b) #0000ff (c) #00ffff (d) #ffff00
40. 40.🌈 Which colour of light is strongest in rgb(163, 87, 74)? (a) green (b) red (c) blue

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