CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 876 · 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) lays out the page (b) changes the text size (c) checks a quiz answer (d) makes a link
2. 2.✍️ What value is given to color in this rule?
   li {
     background-color: yellow;
     color: red;
   } (a) color (b) red (c) center (d) 20px
3. 3.🖌️ What colour is behind the letters?
   li {
     font-size: 28px;
     text-align: right;
     background-color: black;
     color: yellow;
   } (a) yellow (b) purple (c) black
4. 4.✍️ What is the selector in this CSS rule?
   body {
     margin: 10px;
     font-size: 20px;
   } (a) body (b) .box (c) 20px (d) margin
5. 5.💪 Which justify-content value packs boxes at the end? (a) space-between (b) flex-start (c) center (d) flex-end
6. 6.🖌️ Where does the text sit on its line?
   li {
     font-size: 16px;
     text-align: center;
     color: yellow;
     background-color: white;
   } (a) on the left (b) in the middle (c) on the right
7. 7.✍️ How many declarations (property: value pairs) are in this rule?
   body {
     font-weight: bold;
     border: 2px solid;
   }
8. 8.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 440px;
     justify-content: space-between;
   }
   Inside are 3 boxes, each 100px wide (no margins).
9. 9.🔍 Which is the odd one out? (a) makes headings and lists (b) rounds box corners (c) changes the text size (d) adds space around boxes
10. 10.Which of these does CSS do? (a) lays out the page (b) makes a link (c) counts down a timer (d) checks a quiz answer
11. 11.True or false: margin is space inside the border. (a) True (b) False
12. 12.True or false: .star is a class selector. (a) False (b) True
13. 13.🌈 Which colour is rgb(255, 255, 0)? (a) red (b) yellow (c) bright green (d) black
14. 14.🌈 Hex digits go 0 to 9, then A to which letter? (a) G (b) Z (c) F (d) J
15. 15.🌈 Which hex code is blue? (a) #ff0000 (b) #0000ff (c) #ffff00 (d) #000000
16. 16.✍️ What value is given to border in this rule?
    h1 {
      background-color: yellow;
      margin: 10px;
      font-style: italic;
      border: 2px solid;
    } (a) 300px (b) italic (c) border (d) 2px solid
17. 17.🖌️ How big is the text, in px?
    h2 {
      background-color: red;
      font-size: 32px;
      text-align: left;
      color: yellow;
    }
18. 18.🔍 Which is the odd one out? (a) changes the page live (b) checks a quiz answer (c) rounds box corners (d) reacts to a button click
19. 19.🎯 Which element does the selector #logo style? (a) <li id="logo"> (b) <li id="end"> (c) <div class="big"> (d) <li class="logo">
20. 20.🎨 Which tag connects an outside CSS file? (a) <img> (b) <a> (c) <link> (d) <css>
21. 21.💪 Which flexbox property spaces boxes along a row? (a) gap (b) display: flex (c) justify-content (d) align-items
22. 22.🎯 What kind of selector is h1? (a) an id selector (b) a class selector (c) an element selector
23. 23.✍️ What value is given to border in this rule?
    h1 {
      width: 300px;
      border: 2px solid;
    } (a) 300px (b) border (c) 2px solid (d) italic
24. 24.✍️ What is the selector in this CSS rule?
    body {
      width: 300px;
      margin: 10px;
    } (a) width (b) 10px (c) body (d) .box
25. 25.🧩 Which language lays out the page? (a) JavaScript (b) HTML (c) CSS
26. 26.🌈 Which colour is #ffff00? (a) magenta (b) yellow (c) red (d) blue
27. 27.🎨 Which tag holds CSS inside the head? (a) <body> (b) <style> (c) <script> (d) <css>
28. 28.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 300px;
      justify-content: center;
    }
    Inside are 2 boxes, each 100px wide (no margins).
29. 29.🔍 Which is the odd one out? (a) gives the page structure (b) makes a form box (c) makes headings and lists (d) adds space around boxes
30. 30.🖌️ How big is the text, in px?
    h1 {
      font-size: 32px;
      color: white;
      text-align: center;
      background-color: green;
    }
31. 31.🖌️ Where does the text sit on its line?
    p {
      text-align: left;
      background-color: yellow;
      color: orange;
      font-size: 16px;
    } (a) in the middle (b) on the right (c) on the left
32. 32.True or false: CSS rounds box corners. (a) True (b) False
33. 33.🎯 Which element does the selector h2 style? (a) <h2 class="star"> (b) <li> (c) <div class="star"> (d) <span id="end">
34. 34.🖌️ What colour are the letters?
    h2 {
      color: black;
      background-color: orange;
      text-align: center;
      font-size: 20px;
    } (a) blue (b) black (c) orange
35. 35.True or false: the content is a solid or dotted edge. (a) True (b) False
36. 36.⚖️ What colour is the text of this element?
    <p class="menu" id="main">Hi</p>
    CSS:
    p { color: purple; }
    .menu { color: black; } (a) purple (b) black (c) red (d) yellow
37. 37.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
38. 38.🎯 How many elements on a page should have the same id? (a) 1 (b) 5 (c) 2 (d) any number
39. 39.Which of these is padding? (a) the line round the box (b) the text or picture (c) space outside the border (d) the gap round content
40. 40.True or false: #hero is a class selector. (a) False (b) True

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