CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 55 · 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 many declarations (property: value pairs) are in this rule?
   p {
     font-size: 20px;
     font-style: italic;
     text-align: center;
     border: 2px solid;
   }
2. 2.Which of these does CSS do? (a) gives the page structure (b) makes a link (c) shows a pop-up message (d) rounds box corners
3. 3.Which of these is the content? (a) the gap to other boxes (b) space outside the border (c) the text or picture (d) the line round the box
4. 4.✍️ Which sign goes between a property and its value? (a) - (b) : (c) ; (d) =
5. 5.🌈 Which colour is rgb(255, 0, 0)? (a) blue (b) cyan (c) bright green (d) red
6. 6.🌈 In #810000 the red part is the hex number 81. What is it as a normal number?
7. 7.🧩 Which language shows a pop-up message? (a) CSS (b) HTML (c) JavaScript
8. 8.🎯 What kind of selector is #hero? (a) an id selector (b) a class selector (c) an element selector
9. 9.🌈 Which colour is rgb(0, 255, 0)? (a) magenta (b) red (c) bright green (d) white
10. 10.True or false: CSS checks a quiz answer. (a) True (b) False
11. 11.True or false: JavaScript changes the text size. (a) False (b) True
12. 12.✍️ In color: blue; which part is the property? (a) color (b) blue (c) ; (d) :
13. 13.🖌️ Where does the text sit on its line?
    h2 {
      font-size: 36px;
      background-color: orange;
      text-align: left;
      color: black;
    } (a) in the middle (b) on the left (c) on the right
14. 14.🧩 Which language makes headings and lists? (a) CSS (b) JavaScript (c) HTML
15. 15.💪 Which justify-content value equal gaps, none at ends? (a) space-between (b) flex-start (c) center (d) flex-end
16. 16.📦 In the box model, which part is the line round the box? (a) content (b) padding (c) margin (d) border
17. 17.Which of these does JavaScript do? (a) changes the page live (b) makes a form box (c) rounds box corners (d) changes the text size
18. 18.🎯 What kind of selector is .menu? (a) a class selector (b) an id selector (c) an element selector
19. 19.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
20. 20.🖌️ Which CSS property colours behind the text? (a) background-color (b) text-align (c) font-family (d) font-size
21. 21.✍️ What value is given to margin in this rule?
    #top {
      text-align: center;
      margin: 10px;
      font-style: italic;
    } (a) margin (b) 10px (c) bold (d) 8px
22. 22.True or false: JavaScript reacts to a button click. (a) False (b) True
23. 23.✍️ What value is given to border in this rule?
    h1 {
      background-color: yellow;
      text-align: center;
      border: 2px solid;
      font-weight: bold;
    } (a) 2px solid (b) 300px (c) border (d) italic
24. 24.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector
25. 25.What does background-color do? (a) centres a heading (b) colours behind the text (c) sets the letter colour (d) makes the text bold
26. 26.🌈 Which colour of light is strongest in rgb(179, 106, 66)? (a) blue (b) green (c) red
27. 27.True or false: JavaScript puts a picture on a page. (a) True (b) False
28. 28.Which of these does CSS do? (a) shows a pop-up message (b) changes the page live (c) adds space around boxes (d) gives the page structure
29. 29.🧩 Which language changes the page live? (a) JavaScript (b) CSS (c) HTML
30. 30.🧩 Which language rounds box corners? (a) JavaScript (b) CSS (c) HTML
31. 31.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 60px;
      padding: 20px;
      border: 3px solid black;
      margin: 20px;
    }
32. 32.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 100px;
      padding: 15px;
      border: 4px solid black;
      margin: 20px;
    }
33. 33.What does justify-content: space-between do? (a) packs boxes at the start (b) packs boxes at the end (c) puts boxes in the middle (d) equal gaps, none at ends
34. 34.🌈 Which colour of light is strongest in rgb(160, 27, 2)? (a) blue (b) red (c) green
35. 35.✍️ Which sign ends each CSS declaration? (a) ; (b) : (c) . (d) ,
36. 36.⚖️ What colour is the text of this element?
    <h1 class="menu" id="logo">Hi</h1>
    CSS:
    #logo { color: orange; }
    #logo { color: white; } (a) yellow (b) orange (c) green (d) white
37. 37.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 300px;
      justify-content: center;
    }
    Inside are 3 boxes, each 80px wide (no margins).
38. 38.What does justify-content: flex-start do? (a) packs boxes at the end (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the start
39. 39.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) neither (c) the shorter one (d) the first one
40. 40.📦 In the box model, which part is space inside the border? (a) margin (b) padding (c) border (d) content

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