CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 160 · 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 hex code is yellow? (a) #000000 (b) #ffff00 (c) #ffffff (d) #00ffff
2. 2.✍️ In color: blue; which part is the value? (a) ; (b) color (c) : (d) blue
3. 3.True or false: JavaScript shows a pop-up message. (a) True (b) False
4. 4.True or false: .note is a class selector. (a) True (b) False
5. 5.What does justify-content: flex-end do? (a) packs boxes at the start (b) puts boxes in the middle (c) packs boxes at the end (d) equal gaps, none at ends
6. 6.⚖️ What colour is the text of this element?
   <h2 class="red" id="intro">Hi</h2>
   CSS:
   h2 { color: yellow; }
   h2 { color: orange; } (a) white (b) blue (c) yellow (d) orange
7. 7.Which of these does JavaScript do? (a) changes the text size (b) changes the page live (c) lays out the page (d) makes headings and lists
8. 8.🎯 Can many elements share the same class? (a) No (b) Yes
9. 9.🖌️ Which CSS property sets the letter colour? (a) text-align (b) font-family (c) font-weight (d) color
10. 10.🎯 What kind of selector is li? (a) a class selector (b) an element selector (c) an id selector
11. 11.🔍 Which is the odd one out? (a) reacts to a button click (b) checks a quiz answer (c) makes headings and lists (d) changes the page live
12. 12.⚖️ What colour is the text of this element?
    <p class="big" id="logo">Hi</p>
    CSS:
    .big { color: blue; }
    .big { color: black; } (a) black (b) yellow (c) orange (d) blue
13. 13.True or false: HTML sets colours and fonts. (a) True (b) False
14. 14.True or false: CSS makes a form box. (a) True (b) False
15. 15.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) the shorter one (c) the first one (d) neither
16. 16.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 200px;
      padding: 15px;
      border: 3px solid black;
      margin: 0px;
    }
17. 17.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 12px;
      }
    } (a) No (b) Yes
18. 18.🖌️ Where does the text sit on its line?
    h1 {
      background-color: green;
      text-align: left;
      font-size: 12px;
      color: black;
    } (a) on the right (b) in the middle (c) on the left
19. 19.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      color: red;
      width: 300px;
      background-color: yellow;
    }
20. 20.Which of these does HTML do? (a) adds space around boxes (b) shows a pop-up message (c) makes a form box (d) rounds box corners
21. 21.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      width: 300px;
    }
22. 22.🖌️ Which CSS property colours behind the text? (a) font-size (b) font-weight (c) background-color (d) font-family
23. 23.🎯 Which element does the selector h1 style? (a) <h2> (b) <li class="star"> (c) <div id="hero"> (d) <h1 class="star">
24. 24.True or false: HTML adds space around boxes. (a) True (b) False
25. 25.⚖️ What colour is the text of this element?
    <p class="red" id="end">Hi</p>
    CSS:
    p { color: green; }
    #end { color: orange; }
    .red { color: yellow; } (a) orange (b) green (c) yellow (d) purple
26. 26.✍️ How does a CSS comment start? (a) /* (b) // (c) <!-- (d) #
27. 27.🎨 A CSS file usually ends with which extension? (a) .css (b) .png (c) .js (d) .html
28. 28.🧩 Which language changes the text size? (a) CSS (b) JavaScript (c) HTML
29. 29.📦 In the box model, which part is a solid or dotted edge? (a) content (b) border (c) padding (d) margin
30. 30.True or false: HTML changes the text size. (a) False (b) True
31. 31.True or false: margin is the gap round content. (a) True (b) False
32. 32.Which of these does HTML do? (a) rounds box corners (b) lays out the page (c) changes the page live (d) gives the page structure
33. 33.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
34. 34.🎨 Which tag holds CSS inside the head? (a) <css> (b) <script> (c) <body> (d) <style>
35. 35.🌈 Which colour of light is strongest in rgb(62, 254, 115)? (a) blue (b) green (c) red
36. 36.🎯 What kind of selector is p? (a) an id selector (b) an element selector (c) a class selector
37. 37.⚖️ What colour is the text of this element?
    <h2 class="big" id="end">Hi</h2>
    CSS:
    .big { color: blue; }
    .big { color: purple; } (a) purple (b) green (c) blue (d) red
38. 38.🌈 In #500000 the red part is the hex number 50. What is it as a normal number?
39. 39.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Colourful Site Styles (c) Creative Sheet System (d) Cascading Style Sheets
40. 40.💪 Which flexbox property picks row or column? (a) gap (b) align-items (c) display: flex (d) flex-direction

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