CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 808 · 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.📦 In the box model, which part is space outside the border? (a) margin (b) padding (c) content (d) border
2. 2.🖌️ What colour is behind the letters?
   h2 {
     color: orange;
     text-align: right;
     background-color: blue;
     font-size: 40px;
   } (a) yellow (b) blue (c) orange
3. 3.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 20px;
     }
   }
4. 4.🌈 Which hex code is red? (a) #0000ff (b) #00ff00 (c) #ff00ff (d) #ff0000
5. 5.🎯 Which CSS selector matches this element?
   <li class="box" id="main">Hello</li> (a) #box (b) #logo (c) .star (d) li
6. 6.🎯 What kind of selector is p? (a) an element selector (b) an id selector (c) a class selector
7. 7.True or false: p is an element selector. (a) False (b) True
8. 8.🔍 Which is the odd one out? (a) rounds box corners (b) sets colours and fonts (c) changes the text size (d) makes headings and lists
9. 9.What does font-size do? (a) colours behind the text (b) picks the font style (c) makes letters bigger (d) centres a heading
10. 10.✍️ Which property is set to 2px solid in this rule?
    .box {
      padding: 8px;
      border: 2px solid;
      font-weight: bold;
      text-align: center;
    } (a) 2px solid (b) width (c) border (d) font-style
11. 11.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 210px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 50px wide (no margins).
12. 12.✍️ How does a CSS comment start? (a) /* (b) # (c) <!-- (d) //
13. 13.🖌️ How big is the text, in px?
    h1 {
      font-size: 12px;
      background-color: green;
      color: blue;
      text-align: center;
    }
14. 14.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 18px;
      }
    }
15. 15.🖌️ How big is the text, in px?
    li {
      background-color: white;
      text-align: left;
      color: yellow;
      font-size: 12px;
    }
16. 16.🖌️ Where does the text sit on its line?
    h2 {
      text-align: left;
      background-color: yellow;
      color: red;
      font-size: 36px;
    } (a) on the right (b) on the left (c) in the middle
17. 17.🎨 Which tag holds CSS inside the head? (a) <script> (b) <body> (c) <css> (d) <style>
18. 18.🎯 Which CSS selector matches this element?
    <h1 class="star" id="logo">Hello</h1> (a) #logo (b) #end (c) #star (d) h2
19. 19.True or false: HTML counts down a timer. (a) True (b) False
20. 20.🖌️ What colour are the letters?
    h1 {
      text-align: center;
      color: red;
      background-color: green;
      font-size: 32px;
    } (a) green (b) red (c) white
21. 21.🌈 Which colour is #00ffff? (a) magenta (b) cyan (c) blue (d) white
22. 22.✍️ Which property is set to center in this rule?
    body {
      text-align: center;
      background-color: yellow;
      margin: 10px;
      font-style: italic;
    } (a) text-align (b) background-color (c) center (d) margin
23. 23.🌈 Which colour is #0000ff? (a) magenta (b) white (c) red (d) blue
24. 24.🎯 Which element does the selector .big style? (a) <h2 class="red"> (b) <h2 class="big"> (c) <li class="box"> (d) <h2 id="big">
25. 25.🌈 In #00001a the blue part is the hex number 1a. What is it as a normal number?
26. 26.📱 Responsive design means a page ___. (a) is only for laptops (b) fits every screen (c) has no pictures (d) never changes
27. 27.🔍 Which is the odd one out? (a) makes headings and lists (b) makes a form box (c) puts a picture on a page (d) sets colours and fonts
28. 28.🎯 How many elements on a page should have the same id? (a) 2 (b) 5 (c) any number (d) 1
29. 29.🖌️ What colour are the letters?
    p {
      font-size: 20px;
      color: orange;
      text-align: left;
      background-color: red;
    } (a) green (b) orange (c) red
30. 30.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the later one (c) the first one (d) the shorter one
31. 31.🧩 Which language lays out the page? (a) HTML (b) JavaScript (c) CSS
32. 32.🖌️ Which CSS property colours behind the text? (a) font-size (b) background-color (c) text-align (d) color
33. 33.✍️ What value is given to background-color in this rule?
    #top {
      color: red;
      width: 300px;
      margin: 10px;
      background-color: yellow;
    } (a) background-color (b) 10px (c) yellow (d) 8px
34. 34.✍️ Which sign ends each CSS declaration? (a) ; (b) . (c) : (d) ,
35. 35.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 1000 (c) 255 (d) 99
36. 36.Which of these does HTML do? (a) lays out the page (b) checks a quiz answer (c) adds space around boxes (d) makes a link
37. 37.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: center;
    }
    Inside are 3 boxes, each 40px wide (no margins).
38. 38.🎯 Which element does the selector h2 style? (a) <div class="note"> (b) <span id="top"> (c) <h2 class="note"> (d) <li>
39. 39.True or false: the content is space inside the border. (a) True (b) False
40. 40.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 320px;
      justify-content: center;
    }
    Inside are 3 boxes, each 80px wide (no margins).

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