CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 861 · 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.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 320px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 100px wide (no margins).
2. 2.⚖️ What colour is the text of this element?
   <h2 class="menu" id="top">Hi</h2>
   CSS:
   h2 { color: black; }
   h2 { color: orange; } (a) yellow (b) black (c) orange (d) blue
3. 3.🧩 Which language shows a pop-up message? (a) CSS (b) JavaScript (c) HTML
4. 4.True or false: JavaScript makes headings and lists. (a) True (b) False
5. 5.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
6. 6.True or false: .menu is a class selector. (a) False (b) True
7. 7.What does text-align do? (a) picks the font style (b) colours behind the text (c) centres a heading (d) makes letters bigger
8. 8.Which of these is the content? (a) a solid or dotted edge (b) the text or picture (c) the gap to other boxes (d) space inside the border
9. 9.🎯 Which element does the selector #top style? (a) <h1 class="big"> (b) <p id="top"> (c) <p id="intro"> (d) <p class="top">
10. 10.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) 600px or narrower (c) exactly 1000px (d) turned off
11. 11.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      background-color: yellow;
      color: red;
    }
12. 12.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 8px;
      }
    } (a) No (b) Yes
13. 13.🎯 Which CSS selector matches this element?
    <li class="box" id="intro">Hello</li> (a) .star (b) div (c) #box (d) #intro
14. 14.⚖️ What colour is the text of this element?
    <h1 class="red" id="hero">Hi</h1>
    CSS:
    #hero { color: purple; }
    h1 { color: yellow; } (a) white (b) yellow (c) orange (d) purple
15. 15.🖌️ Which CSS property colours behind the text? (a) font-size (b) background-color (c) font-weight (d) color
16. 16.Which of these is the border? (a) the gap to other boxes (b) space outside the border (c) the line round the box (d) the text or picture
17. 17.🖌️ Which CSS property picks the font style? (a) text-align (b) font-family (c) font-size (d) font-weight
18. 18.Which of these does HTML do? (a) changes the text size (b) checks a quiz answer (c) gives the page structure (d) adds space around boxes
19. 19.🌈 Which colour of light is strongest in rgb(116, 78, 233)? (a) green (b) blue (c) red
20. 20.📱 Which tag helps phones show a page at the right size? (a) the br tag (b) the title tag (c) the hr tag (d) the viewport meta tag
21. 21.🌈 In #00001b the blue part is the hex number 1b. What is it as a normal number?
22. 22.🖌️ What colour is behind the letters?
    p {
      color: yellow;
      font-size: 20px;
      background-color: purple;
      text-align: left;
    } (a) purple (b) yellow (c) black
23. 23.⚖️ What colour is the text of this element?
    <h2 class="big" id="intro">Hi</h2>
    CSS:
    #intro { color: purple; }
    #intro { color: green; } (a) black (b) red (c) green (d) purple
24. 24.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 28px;
      }
    } (a) Yes (b) No
25. 25.✍️ Which property is set to 20px in this rule?
    li {
      background-color: yellow;
      font-size: 20px;
    } (a) font-size (b) text-align (c) background-color (d) 20px
26. 26.🖌️ What colour is behind the letters?
    li {
      font-size: 36px;
      color: black;
      text-align: left;
      background-color: white;
    } (a) yellow (b) black (c) white
27. 27.✍️ Which sign ends each CSS declaration? (a) , (b) ; (c) : (d) .
28. 28.✍️ What value is given to width in this rule?
    h1 {
      padding: 8px;
      border: 2px solid;
      font-style: italic;
      width: 300px;
    } (a) width (b) italic (c) 300px (d) red
29. 29.⚖️ What colour is the text of this element?
    <h1 class="box" id="top">Hi</h1>
    CSS:
    #top { color: green; }
    h1 { color: blue; } (a) blue (b) black (c) yellow (d) green
30. 30.💪 Which justify-content value puts boxes in the middle? (a) space-between (b) flex-end (c) flex-start (d) center
31. 31.Which of these does JavaScript do? (a) counts down a timer (b) makes a form box (c) makes a link (d) puts a picture on a page
32. 32.What does justify-content: center do? (a) packs boxes at the end (b) packs boxes at the start (c) puts boxes in the middle (d) equal gaps, none at ends
33. 33.🖌️ How big is the text, in px?
    h1 {
      text-align: center;
      background-color: black;
      font-size: 32px;
      color: orange;
    }
34. 34.✍️ What value is given to text-align in this rule?
    .note {
      font-weight: bold;
      border: 2px solid;
      text-align: center;
    } (a) yellow (b) 10px (c) center (d) text-align
35. 35.True or false: #logo is an id selector. (a) True (b) False
36. 36.🔍 Which is the odd one out? (a) makes a form box (b) changes the page live (c) checks a quiz answer (d) reacts to a button click
37. 37.True or false: padding is a solid or dotted edge. (a) True (b) False
38. 38.True or false: .star is an id selector. (a) False (b) True
39. 39.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      text-align: center;
    }
40. 40.✍️ In color: blue; which part is the value? (a) color (b) ; (c) blue (d) :

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