CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 715 · 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.True or false: HTML puts a picture on a page. (a) False (b) True
2. 2.True or false: margin is space inside the border. (a) False (b) True
3. 3.🌈 Which colour is rgb(0, 255, 0)? (a) magenta (b) bright green (c) blue (d) yellow
4. 4.🔍 Which is the odd one out? (a) makes a form box (b) counts down a timer (c) reacts to a button click (d) checks a quiz answer
5. 5.🎯 Which element does the selector div style? (a) <h1 id="hero"> (b) <div class="note"> (c) <span> (d) <p class="note">
6. 6.What does color do? (a) sets the letter colour (b) colours behind the text (c) picks the font style (d) centres a heading
7. 7.What does text-align do? (a) makes the text bold (b) picks the font style (c) centres a heading (d) sets the letter colour
8. 8.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 150px;
     padding: 30px;
     border: 4px solid black;
     margin: 0px;
   }
9. 9.🌈 In #980000 the red part is the hex number 98. What is it as a normal number?
10. 10.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 150px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 40px wide (no margins).
11. 11.🖌️ Which CSS property sets the letter colour? (a) font-size (b) font-family (c) color (d) font-weight
12. 12.🎯 Which CSS selector matches this element?
    <span class="menu" id="hero">Hello</span> (a) #top (b) #menu (c) .menu (d) p
13. 13.🔍 Which is the odd one out? (a) makes headings and lists (b) makes a link (c) makes a form box (d) adds space around boxes
14. 14.What does justify-content: center do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the start (d) packs boxes at the end
15. 15.✍️ Which property is set to bold in this rule?
    body {
      font-size: 20px;
      font-weight: bold;
    } (a) width (b) font-weight (c) border (d) bold
16. 16.✍️ What value is given to text-align in this rule?
    body {
      text-align: center;
      margin: 10px;
    } (a) yellow (b) 10px (c) text-align (d) center
17. 17.🎯 Which element does the selector #top style? (a) <span id="top"> (b) <span class="top"> (c) <p class="note"> (d) <span id="intro">
18. 18.✍️ What is the selector in this CSS rule?
    h2 {
      font-size: 20px;
      color: red;
    } (a) h2 (b) h1 (c) red (d) font-size
19. 19.Which of these does JavaScript do? (a) lays out the page (b) rounds box corners (c) reacts to a button click (d) makes a link
20. 20.Which of these does JavaScript do? (a) sets colours and fonts (b) gives the page structure (c) checks a quiz answer (d) makes headings and lists
21. 21.Which of these is the content? (a) the text or picture (b) the line round the box (c) a solid or dotted edge (d) the gap to other boxes
22. 22.🎯 Which CSS selector matches this element?
    <h2 class="note" id="top">Hello</h2> (a) #top (b) li (c) #note (d) #intro
23. 23.📦 In the box model, which part is the gap to other boxes? (a) border (b) margin (c) padding (d) content
24. 24.🎨 Which attribute adds CSS inside one tag? (a) style (b) src (c) alt (d) href
25. 25.🌈 Which colour is #ff00ff? (a) yellow (b) magenta (c) blue (d) black
26. 26.What does font-family do? (a) makes letters bigger (b) picks the font style (c) colours behind the text (d) sets the letter colour
27. 27.💪 Which flexbox property turns on flexbox? (a) flex-direction (b) display: flex (c) gap (d) justify-content
28. 28.✍️ What is the selector in this CSS rule?
    .note {
      color: red;
      font-style: italic;
      width: 300px;
    } (a) #top (b) color (c) italic (d) .note
29. 29.✍️ What value is given to font-weight in this rule?
    body {
      font-style: italic;
      border: 2px solid;
      text-align: center;
      font-weight: bold;
    } (a) 300px (b) bold (c) font-weight (d) 2px solid
30. 30.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      font-style: italic;
      font-weight: bold;
      border: 2px solid;
      margin: 10px;
    }
31. 31.🎯 How many elements on a page should have the same id? (a) 2 (b) 1 (c) any number (d) 5
32. 32.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 2 boxes, each 80px wide (no margins).
33. 33.🎯 Which element does the selector p style? (a) <p class="note"> (b) <h2 class="note"> (c) <li id="intro"> (d) <h1>
34. 34.✍️ Which sign goes between a property and its value? (a) - (b) : (c) ; (d) =
35. 35.🖌️ What colour are the letters?
    h2 {
      background-color: black;
      text-align: right;
      font-size: 32px;
      color: yellow;
    } (a) yellow (b) white (c) black
36. 36.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    }
37. 37.⚖️ What colour is the text of this element?
    <p class="menu" id="top">Hi</p>
    CSS:
    #top { color: purple; }
    p { color: blue; } (a) purple (b) blue (c) black (d) white
38. 38.✍️ What value is given to font-style in this rule?
    li {
      font-weight: bold;
      font-size: 20px;
      font-style: italic;
    } (a) red (b) italic (c) font-style (d) 20px
39. 39.⚖️ What colour is the text of this element?
    <p class="note" id="logo">Hi</p>
    CSS:
    .note { color: white; }
    p { color: red; }
    #logo { color: blue; } (a) blue (b) red (c) yellow (d) white
40. 40.Which of these is padding? (a) the line round the box (b) space inside the border (c) the gap to other boxes (d) a solid or dotted edge

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