CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 651 · 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.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the shorter one (c) neither (d) the later one
2. 2.What does font-family do? (a) sets the letter colour (b) makes letters bigger (c) picks the font style (d) colours behind the text
3. 3.📱 The screen is 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 14px;
     }
   } (a) Yes (b) No
4. 4.🖌️ Which CSS property centres a heading? (a) text-align (b) background-color (c) font-weight (d) font-size
5. 5.🌈 Which hex code is red? (a) #ffff00 (b) #00ffff (c) #00ff00 (d) #ff0000
6. 6.True or false: HTML makes headings and lists. (a) True (b) False
7. 7.🧩 Which language makes a form box? (a) JavaScript (b) CSS (c) HTML
8. 8.⚖️ What colour is the text of this element?
   <h1 class="big" id="hero">Hi</h1>
   CSS:
   .big { color: white; }
   h1 { color: red; }
   #hero { color: blue; } (a) red (b) white (c) blue (d) yellow
9. 9.Which of these does HTML do? (a) sets colours and fonts (b) lays out the page (c) makes a link (d) counts down a timer
10. 10.✍️ Which property is set to italic in this rule?
    h1 {
      font-style: italic;
      border: 2px solid;
    } (a) font-style (b) font-size (c) italic (d) color
11. 11.⚖️ What colour is the text of this element?
    <h2 class="menu" id="intro">Hi</h2>
    CSS:
    h2 { color: yellow; }
    h2 { color: green; } (a) yellow (b) green (c) red (d) black
12. 12.✍️ What is the selector in this CSS rule?
    li {
      width: 300px;
      text-align: center;
      color: red;
      font-size: 20px;
    } (a) width (b) center (c) li (d) body
13. 13.🎯 Which CSS selector matches this element?
    <p class="red" id="main">Hello</p> (a) #red (b) #logo (c) #main (d) h1
14. 14.🧩 Which language reacts to a button click? (a) HTML (b) JavaScript (c) CSS
15. 15.🎯 Which sign starts a class selector? (a) @ (b) # (c) . (d) &
16. 16.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 22px;
      }
    }
17. 17.🌈 Which colour is rgb(255, 0, 0)? (a) white (b) cyan (c) red (d) yellow
18. 18.🎯 Which CSS selector matches this element?
    <h2 class="big" id="hero">Hello</h2> (a) #big (b) .hero (c) .red (d) #hero
19. 19.🌈 Which colour is #00ff00? (a) yellow (b) white (c) blue (d) bright green
20. 20.⚖️ What colour is the text of this element?
    <p class="menu" id="hero">Hi</p>
    CSS:
    .menu { color: green; }
    .menu { color: purple; } (a) purple (b) green (c) white (d) black
21. 21.🖌️ How big is the text, in px?
    p {
      text-align: center;
      background-color: green;
      color: orange;
      font-size: 28px;
    }
22. 22.✍️ What is the selector in this CSS rule?
    li {
      background-color: yellow;
      text-align: center;
      width: 300px;
      color: red;
    } (a) li (b) center (c) body (d) background-color
23. 23.🌈 Which colour is #000000? (a) black (b) cyan (c) blue (d) white
24. 24.🎯 Which CSS selector matches this element?
    <h1 class="big" id="top">Hello</h1> (a) #intro (b) .top (c) #big (d) .big
25. 25.💪 Which flexbox property picks row or column? (a) gap (b) flex-direction (c) align-items (d) justify-content
26. 26.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 520px;
      justify-content: center;
    }
    Inside are 4 boxes, each 100px wide (no margins).
27. 27.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 4 (b) 3 (c) 6 (d) 2
28. 28.True or false: img is an element selector. (a) False (b) True
29. 29.🧩 Which language makes a link? (a) JavaScript (b) CSS (c) HTML
30. 30.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 170px;
      padding: 20px;
      border: 2px solid black;
      margin: 10px;
    }
31. 31.✍️ CSS declarations go inside which brackets? (a) { } (b) [ ] (c) ( ) (d) < >
32. 32.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 160px;
      padding: 10px;
      border: 2px solid black;
      margin: 20px;
    }
33. 33.🎨 Which attribute adds CSS inside one tag? (a) href (b) style (c) alt (d) src
34. 34.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
35. 35.⚖️ What colour is the text of this element?
    <h2 class="big" id="hero">Hi</h2>
    CSS:
    .big { color: black; }
    h2 { color: red; } (a) red (b) blue (c) green (d) black
36. 36.⚖️ What colour is the text of this element?
    <p class="star" id="top">Hi</p>
    CSS:
    #top { color: blue; }
    #top { color: purple; } (a) purple (b) orange (c) blue (d) white
37. 37.🎨 Which tag holds CSS inside the head? (a) <body> (b) <script> (c) <style> (d) <css>
38. 38.Which of these does JavaScript do? (a) gives the page structure (b) rounds box corners (c) makes a link (d) reacts to a button click
39. 39.📦 In the box model, which part is the text or picture? (a) border (b) padding (c) content (d) margin
40. 40.⚖️ What colour is the text of this element?
    <p class="big" id="top">Hi</p>
    CSS:
    #top { color: yellow; }
    p { color: black; } (a) red (b) black (c) yellow (d) orange

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