CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 387 · 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 tag holds CSS inside the head? (a) <script> (b) <css> (c) <style> (d) <body>
2. 2.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) 800px or narrower (c) 800px or wider (d) turned off
3. 3.🎯 Which CSS selector matches this element?
   <li class="menu" id="hero">Hello</li> (a) #menu (b) div (c) li (d) .note
4. 4.🎯 Which sign starts a class selector? (a) . (b) # (c) @ (d) &
5. 5.🖌️ Which CSS property picks the font style? (a) text-align (b) font-weight (c) font-family (d) color
6. 6.📦 In the box model, which part is the gap to other boxes? (a) padding (b) border (c) content (d) margin
7. 7.🖌️ What colour is behind the letters?
   h2 {
     background-color: white;
     text-align: left;
     font-size: 12px;
     color: green;
   } (a) orange (b) green (c) white
8. 8.⚖️ What colour is the text of this element?
   <h2 class="box" id="end">Hi</h2>
   CSS:
   #end { color: yellow; }
   #end { color: purple; } (a) purple (b) red (c) green (d) yellow
9. 9.True or false: margin is the gap round content. (a) True (b) False
10. 10.🌈 Which colour is rgb(255, 255, 0)? (a) black (b) bright green (c) yellow (d) magenta
11. 11.💪 Which flexbox property sets space between boxes? (a) display: flex (b) justify-content (c) flex-direction (d) gap
12. 12.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 130px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 40px wide (no margins).
13. 13.⚖️ What colour is the text of this element?
    <h1 class="red" id="logo">Hi</h1>
    CSS:
    #logo { color: green; }
    #logo { color: red; } (a) red (b) white (c) orange (d) green
14. 14.🎯 Which CSS selector matches this element?
    <li class="red" id="top">Hello</li> (a) .box (b) .red (c) #red (d) .top
15. 15.🎯 Which CSS selector matches this element?
    <div class="note" id="hero">Hello</div> (a) .note (b) span (c) .hero (d) .big
16. 16.Which of these does JavaScript do? (a) shows a pop-up message (b) adds space around boxes (c) makes a form box (d) makes a link
17. 17.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 14px;
      }
    }
18. 18.✍️ CSS declarations go inside which brackets? (a) ( ) (b) [ ] (c) < > (d) { }
19. 19.True or false: CSS makes a link. (a) True (b) False
20. 20.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
21. 21.🧩 Which language makes a link? (a) CSS (b) JavaScript (c) HTML
22. 22.✍️ Which property is set to 10px in this rule?
    .note {
      margin: 10px;
      padding: 8px;
    } (a) padding (b) margin (c) 10px (d) font-weight
23. 23.🖌️ What colour are the letters?
    p {
      background-color: white;
      text-align: left;
      color: green;
      font-size: 32px;
    } (a) black (b) green (c) white
24. 24.⚖️ What colour is the text of this element?
    <h2 class="red" id="top">Hi</h2>
    CSS:
    h2 { color: red; }
    .red { color: black; }
    #top { color: green; } (a) red (b) green (c) blue (d) black
25. 25.🖌️ What colour is behind the letters?
    p {
      color: white;
      background-color: green;
      font-size: 24px;
      text-align: right;
    } (a) green (b) white (c) red
26. 26.True or false: the content is the gap to other boxes. (a) True (b) False
27. 27.🎯 Which element does the selector .big style? (a) <h1 class="big"> (b) <h2 class="box"> (c) <h1 id="big"> (d) <h1 class="red">
28. 28.What does justify-content: space-between do? (a) packs boxes at the start (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the end
29. 29.🌈 Which colour is #000000? (a) blue (b) bright green (c) red (d) black
30. 30.🎯 Which CSS selector matches this element?
    <span class="big" id="logo">Hello</span> (a) .red (b) #end (c) #big (d) #logo
31. 31.Which of these is the content? (a) space outside the border (b) the gap round content (c) the text or picture (d) the line round the box
32. 32.🌈 In #00f400 the green part is the hex number f4. What is it as a normal number?
33. 33.✍️ Which sign goes between a property and its value? (a) = (b) - (c) : (d) ;
34. 34.🖌️ What colour are the letters?
    h2 {
      color: white;
      background-color: blue;
      text-align: center;
      font-size: 32px;
    } (a) blue (b) yellow (c) white
35. 35.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Cascading Style Sheets (c) Creative Sheet System (d) Computer Style Sheets
36. 36.🖌️ What colour is behind the letters?
    h1 {
      background-color: yellow;
      color: red;
      font-size: 16px;
      text-align: right;
    } (a) red (b) yellow (c) black
37. 37.⚖️ What colour is the text of this element?
    <h2 class="red" id="hero">Hi</h2>
    CSS:
    .red { color: black; }
    #hero { color: blue; } (a) black (b) orange (c) blue (d) yellow
38. 38.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      border: 2px solid;
    }
39. 39.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 340px;
      justify-content: center;
    }
    Inside are 3 boxes, each 60px wide (no margins).
40. 40.🎯 Which CSS selector matches this element?
    <h2 class="star" id="end">Hello</h2> (a) .end (b) #end (c) li (d) .menu

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