CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 812 · 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 of these does HTML do? (a) rounds box corners (b) changes the page live (c) changes the text size (d) puts a picture on a page
2. 2.✍️ How many declarations (property: value pairs) are in this rule?
   .box {
     font-weight: bold;
     text-align: center;
     margin: 10px;
     color: red;
   }
3. 3.🖌️ What colour is behind the letters?
   h2 {
     background-color: yellow;
     font-size: 40px;
     text-align: left;
     color: white;
   } (a) red (b) white (c) yellow
4. 4.⚖️ What colour is the text of this element?
   <h2 class="box" id="logo">Hi</h2>
   CSS:
   .box { color: black; }
   .box { color: red; } (a) red (b) purple (c) black (d) green
5. 5.True or false: .note is an id selector. (a) True (b) False
6. 6.✍️ In color: blue; which part is the value? (a) ; (b) : (c) blue (d) color
7. 7.🎯 Which element does the selector p style? (a) <p class="star"> (b) <li id="hero"> (c) <h2 class="star"> (d) <h1>
8. 8.⚖️ What colour is the text of this element?
   <h1 class="box" id="end">Hi</h1>
   CSS:
   .box { color: white; }
   h1 { color: black; }
   #end { color: yellow; } (a) white (b) black (c) yellow (d) green
9. 9.💪 Which justify-content value packs boxes at the end? (a) space-between (b) flex-start (c) center (d) flex-end
10. 10.🌈 Which colour of light is strongest in rgb(60, 30, 179)? (a) green (b) red (c) blue
11. 11.🌈 Which colour of light is strongest in rgb(116, 199, 9)? (a) red (b) green (c) blue
12. 12.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
13. 13.📦 In the box model, which part is the gap round content? (a) content (b) margin (c) border (d) padding
14. 14.⚖️ What colour is the text of this element?
    <p class="note" id="intro">Hi</p>
    CSS:
    .note { color: black; }
    .note { color: white; } (a) purple (b) green (c) white (d) black
15. 15.True or false: padding is space inside the border. (a) False (b) True
16. 16.💪 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 100px wide (no margins).
17. 17.🎨 Which tag connects an outside CSS file? (a) <link> (b) <img> (c) <a> (d) <css>
18. 18.🎨 Which tag holds CSS inside the head? (a) <script> (b) <style> (c) <body> (d) <css>
19. 19.Which of these does HTML do? (a) makes a form box (b) sets colours and fonts (c) rounds box corners (d) reacts to a button click
20. 20.🌈 Which colour is rgb(255, 0, 0)? (a) red (b) yellow (c) cyan (d) bright green
21. 21.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 190px;
      padding: 30px;
      border: 1px solid black;
      margin: 20px;
    }
22. 22.🖌️ Where does the text sit on its line?
    h2 {
      background-color: red;
      font-size: 20px;
      text-align: center;
      color: orange;
    } (a) in the middle (b) on the left (c) on the right
23. 23.🎯 Which element does the selector .box style? (a) <h1 id="box"> (b) <h1 class="box"> (c) <h1 class="star"> (d) <h2 class="menu">
24. 24.💪 Which justify-content value puts boxes in the middle? (a) flex-end (b) center (c) space-between (d) flex-start
25. 25.True or false: HTML gives the page structure. (a) False (b) True
26. 26.True or false: HTML makes headings and lists. (a) False (b) True
27. 27.🖌️ What colour are the letters?
    h2 {
      text-align: right;
      color: green;
      background-color: yellow;
      font-size: 40px;
    } (a) yellow (b) green (c) white
28. 28.🖌️ Which CSS property makes letters bigger? (a) background-color (b) font-size (c) font-family (d) text-align
29. 29.What does justify-content: center do? (a) packs boxes at the start (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the end
30. 30.Which of these is padding? (a) space outside the border (b) a solid or dotted edge (c) space inside the border (d) the text or picture
31. 31.⚖️ What colour is the text of this element?
    <p class="menu" id="main">Hi</p>
    CSS:
    #main { color: yellow; }
    p { color: green; } (a) green (b) orange (c) yellow (d) red
32. 32.✍️ Which property is set to 2px solid in this rule?
    p {
      border: 2px solid;
      font-weight: bold;
      font-size: 20px;
      width: 300px;
    } (a) width (b) 2px solid (c) border (d) font-style
33. 33.🧩 Which language puts a picture on a page? (a) HTML (b) CSS (c) JavaScript
34. 34.🎨 One CSS file can style how many pages? (a) only one word (b) only one image (c) many pages (d) no pages
35. 35.🧩 Which language counts down a timer? (a) JavaScript (b) CSS (c) HTML
36. 36.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
37. 37.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 15px;
      border: 1px solid black;
      margin: 15px;
    }
38. 38.🖌️ How big is the text, in px?
    h2 {
      font-size: 40px;
      background-color: purple;
      color: blue;
      text-align: right;
    }
39. 39.Which of these is margin? (a) space inside the border (b) the gap round content (c) the line round the box (d) space outside the border
40. 40.⚖️ What colour is the text of this element?
    <h1 class="red" id="end">Hi</h1>
    CSS:
    #end { color: green; }
    #end { color: yellow; } (a) green (b) black (c) red (d) yellow

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