CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 705 · 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 justify-content value packs boxes at the start? (a) flex-start (b) flex-end (c) space-between (d) center
2. 2.✍️ How does a CSS comment start? (a) // (b) # (c) <!-- (d) /*
3. 3.🎯 What kind of selector is #hero? (a) an id selector (b) an element selector (c) a class selector
4. 4.✍️ Which sign goes between a property and its value? (a) - (b) = (c) : (d) ;
5. 5.🎨 Which tag holds CSS inside the head? (a) <css> (b) <body> (c) <style> (d) <script>
6. 6.🔍 Which is the odd one out? (a) changes the text size (b) adds space around boxes (c) makes a form box (d) rounds box corners
7. 7.🖌️ What colour are the letters?
   p {
     background-color: red;
     color: white;
     font-size: 36px;
     text-align: left;
   } (a) red (b) blue (c) white
8. 8.⚖️ What colour is the text of this element?
   <h1 class="red" id="intro">Hi</h1>
   CSS:
   .red { color: purple; }
   .red { color: orange; } (a) white (b) green (c) orange (d) purple
9. 9.Which of these is the border? (a) space outside the border (b) the line round the box (c) the gap round content (d) the gap to other boxes
10. 10.🌈 In #ac0000 the red part is the hex number ac. What is it as a normal number?
11. 11.🎯 How many elements on a page should have the same id? (a) 5 (b) 1 (c) any number (d) 2
12. 12.🎯 What kind of selector is img? (a) an id selector (b) a class selector (c) an element selector
13. 13.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    }
14. 14.⚖️ What colour is the text of this element?
    <h2 class="big" id="top">Hi</h2>
    CSS:
    h2 { color: orange; }
    h2 { color: yellow; } (a) orange (b) blue (c) yellow (d) black
15. 15.Which of these is the content? (a) the line round the box (b) a solid or dotted edge (c) the text or picture (d) the gap round content
16. 16.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
      border: 2px solid;
    }
17. 17.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      text-align: center;
    }
18. 18.True or false: .note is an element selector. (a) True (b) False
19. 19.🔍 Which is the odd one out? (a) shows a pop-up message (b) makes a form box (c) puts a picture on a page (d) makes headings and lists
20. 20.True or false: CSS checks a quiz answer. (a) False (b) True
21. 21.✍️ In color: blue; which part is the value? (a) color (b) ; (c) : (d) blue
22. 22.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 60px;
      padding: 20px;
      border: 4px solid black;
      margin: 0px;
    }
23. 23.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Cascading Style Sheets (c) Colourful Site Styles (d) Creative Sheet System
24. 24.🎯 What kind of selector is .card? (a) an element selector (b) a class selector (c) an id selector
25. 25.🖌️ What colour is behind the letters?
    h1 {
      background-color: yellow;
      text-align: left;
      font-size: 24px;
      color: orange;
    } (a) orange (b) red (c) yellow
26. 26.Which of these does CSS do? (a) lays out the page (b) counts down a timer (c) changes the page live (d) makes a link
27. 27.Which of these does HTML do? (a) rounds box corners (b) puts a picture on a page (c) changes the text size (d) shows a pop-up message
28. 28.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      color: red;
      font-style: italic;
    }
29. 29.🔍 Which is the odd one out? (a) sets colours and fonts (b) puts a picture on a page (c) adds space around boxes (d) lays out the page
30. 30.🌈 Which hex code is bright green? (a) #00ffff (b) #0000ff (c) #ffff00 (d) #00ff00
31. 31.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
32. 32.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 24px;
      }
    }
33. 33.🎯 Which sign starts an id selector? (a) @ (b) . (c) # (d) &
34. 34.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 420px;
      justify-content: center;
    }
    Inside are 4 boxes, each 80px wide (no margins).
35. 35.🖌️ How big is the text, in px?
    h1 {
      font-size: 20px;
      text-align: left;
      color: green;
      background-color: yellow;
    }
36. 36.🎯 Which CSS selector matches this element?
    <p class="star" id="end">Hello</p> (a) #end (b) .menu (c) .end (d) #hero
37. 37.✍️ What value is given to color in this rule?
    #top {
      background-color: yellow;
      color: red;
    } (a) red (b) 20px (c) center (d) color
38. 38.🎨 A CSS file usually ends with which extension? (a) .png (b) .js (c) .html (d) .css
39. 39.🖌️ What colour are the letters?
    h1 {
      color: blue;
      background-color: white;
      font-size: 40px;
      text-align: left;
    } (a) orange (b) white (c) blue
40. 40.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 280px;
      padding: 30px;
      border: 1px solid black;
      margin: 0px;
    }

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