CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 565 · 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.✍️ What is the selector in this CSS rule?
   .note {
     text-align: center;
     font-style: italic;
   } (a) .note (b) #top (c) italic (d) text-align
2. 2.🧩 Which language makes headings and lists? (a) CSS (b) HTML (c) JavaScript
3. 3.What does color do? (a) colours behind the text (b) sets the letter colour (c) makes the text bold (d) centres a heading
4. 4.⚖️ What colour is the text of this element?
   <p class="star" id="top">Hi</p>
   CSS:
   .star { color: green; }
   p { color: red; }
   #top { color: black; } (a) red (b) green (c) white (d) black
5. 5.True or false: the border is a solid or dotted edge. (a) True (b) False
6. 6.🌈 Which colour is #ff00ff? (a) bright green (b) yellow (c) magenta (d) white
7. 7.True or false: HTML makes a form box. (a) True (b) False
8. 8.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 40px;
     padding: 5px;
     border: 1px solid black;
     margin: 0px;
   }
9. 9.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
10. 10.🖌️ Which CSS property sets the letter colour? (a) text-align (b) color (c) font-size (d) font-weight
11. 11.💪 Which justify-content value packs boxes at the start? (a) flex-end (b) space-between (c) flex-start (d) center
12. 12.Which of these is margin? (a) the gap to other boxes (b) the gap round content (c) a solid or dotted edge (d) space inside the border
13. 13.Which of these does HTML do? (a) shows a pop-up message (b) gives the page structure (c) changes the text size (d) rounds box corners
14. 14.🎯 Which element does the selector #top style? (a) <h2 id="intro"> (b) <li class="red"> (c) <h2 class="top"> (d) <h2 id="top">
15. 15.True or false: #logo is an element selector. (a) False (b) True
16. 16.🎯 Can many elements share the same class? (a) No (b) Yes
17. 17.⚖️ What colour is the text of this element?
    <h2 class="box" id="end">Hi</h2>
    CSS:
    .box { color: yellow; }
    .box { color: purple; } (a) purple (b) black (c) yellow (d) red
18. 18.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Creative Sheet System (c) Computer Style Sheets (d) Cascading Style Sheets
19. 19.🎯 What kind of selector is img? (a) an id selector (b) a class selector (c) an element selector
20. 20.💪 Which flexbox property turns on flexbox? (a) justify-content (b) flex-direction (c) display: flex (d) gap
21. 21.True or false: HTML counts down a timer. (a) True (b) False
22. 22.🎯 Which CSS selector matches this element?
    <p class="big" id="end">Hello</p> (a) #big (b) .end (c) p (d) h1
23. 23.🎯 Which CSS selector matches this element?
    <li class="box" id="logo">Hello</li> (a) #box (b) #end (c) li (d) div
24. 24.🌈 Which colour of light is strongest in rgb(192, 66, 73)? (a) red (b) green (c) blue
25. 25.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the end (c) packs boxes at the start (d) equal gaps, none at ends
26. 26.True or false: margin is the gap to other boxes. (a) True (b) False
27. 27.True or false: CSS rounds box corners. (a) False (b) True
28. 28.Which of these is the content? (a) a solid or dotted edge (b) space inside the border (c) space outside the border (d) the text or picture
29. 29.✍️ In color: blue; which part is the property? (a) ; (b) : (c) blue (d) color
30. 30.Which of these is padding? (a) the line round the box (b) space outside the border (c) a solid or dotted edge (d) space inside the border
31. 31.🎯 Which CSS selector matches this element?
    <span class="star" id="main">Hello</span> (a) .main (b) p (c) span (d) .menu
32. 32.✍️ Which property is set to italic in this rule?
    h1 {
      font-style: italic;
      font-size: 20px;
    } (a) font-style (b) font-size (c) italic (d) color
33. 33.What does justify-content: space-between do? (a) puts boxes in the middle (b) packs boxes at the end (c) packs boxes at the start (d) equal gaps, none at ends
34. 34.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 30px;
      }
    } (a) No (b) Yes
35. 35.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      border: 2px solid;
      text-align: center;
    }
36. 36.What does background-color do? (a) centres a heading (b) picks the font style (c) colours behind the text (d) sets the letter colour
37. 37.🖌️ Where does the text sit on its line?
    p {
      color: yellow;
      font-size: 20px;
      text-align: left;
      background-color: orange;
    } (a) on the right (b) in the middle (c) on the left
38. 38.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      padding: 8px;
    }
39. 39.🖌️ How big is the text, in px?
    p {
      font-size: 16px;
      color: orange;
      background-color: red;
      text-align: right;
    }
40. 40.✍️ What value is given to text-align in this rule?
    h1 {
      border: 2px solid;
      text-align: center;
    } (a) center (b) text-align (c) 10px (d) yellow

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