CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 902 · 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.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 180px;
     justify-content: space-between;
   }
   Inside are 3 boxes, each 40px wide (no margins).
2. 2.🎨 Which tag holds CSS inside the head? (a) <script> (b) <css> (c) <body> (d) <style>
3. 3.🎯 Which element does the selector .big style? (a) <p class="box"> (b) <span id="big"> (c) <span class="big"> (d) <span class="red">
4. 4.True or false: padding is the text or picture. (a) False (b) True
5. 5.🎨 What does CSS stand for? (a) Creative Sheet System (b) Computer Style Sheets (c) Cascading Style Sheets (d) Colourful Site Styles
6. 6.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) 800px or wider (c) turned off (d) exactly 100px
7. 7.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 20px;
     }
   }
8. 8.🌈 Which hex code is red? (a) #ffffff (b) #0000ff (c) #00ffff (d) #ff0000
9. 9.🔍 Which is the odd one out? (a) changes the text size (b) changes the page live (c) sets colours and fonts (d) rounds box corners
10. 10.✍️ CSS declarations go inside which brackets? (a) ( ) (b) < > (c) { } (d) [ ]
11. 11.What does background-color do? (a) sets the letter colour (b) makes letters bigger (c) centres a heading (d) colours behind the text
12. 12.🌈 Which colour of light is strongest in rgb(21, 99, 189)? (a) red (b) blue (c) green
13. 13.⚖️ What colour is the text of this element?
    <h2 class="big" id="end">Hi</h2>
    CSS:
    #end { color: white; }
    h2 { color: yellow; }
    .big { color: red; } (a) yellow (b) white (c) red (d) green
14. 14.✍️ What is the selector in this CSS rule?
    li {
      font-style: italic;
      font-weight: bold;
      background-color: yellow;
      color: red;
    } (a) font-style (b) li (c) bold (d) body
15. 15.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) 600px or wider (c) exactly 1000px (d) 600px or narrower
16. 16.True or false: margin is space outside the border. (a) True (b) False
17. 17.True or false: margin is the gap round content. (a) False (b) True
18. 18.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) red (c) green (d) blue
19. 19.🌈 Which colour is #000000? (a) cyan (b) black (c) blue (d) white
20. 20.🎯 What kind of selector is body? (a) a class selector (b) an element selector (c) an id selector
21. 21.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
22. 22.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 28px;
      }
    }
23. 23.True or false: HTML makes a form box. (a) False (b) True
24. 24.🌈 Which colour is #00ffff? (a) cyan (b) yellow (c) black (d) magenta
25. 25.🧩 Which language makes headings and lists? (a) CSS (b) JavaScript (c) HTML
26. 26.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      color: red;
      border: 2px solid;
    }
27. 27.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the later one (c) the shorter one (d) the first one
28. 28.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 3 (b) 6 (c) 4 (d) 2
29. 29.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 8px;
      }
    }
30. 30.🖌️ Which CSS property colours behind the text? (a) color (b) font-size (c) background-color (d) font-weight
31. 31.⚖️ What colour is the text of this element?
    <h2 class="note" id="top">Hi</h2>
    CSS:
    .note { color: green; }
    .note { color: black; } (a) black (b) green (c) white (d) purple
32. 32.🌈 Which colour of light is strongest in rgb(172, 40, 6)? (a) blue (b) green (c) red
33. 33.Which of these is the content? (a) the line round the box (b) the gap to other boxes (c) a solid or dotted edge (d) the text or picture
34. 34.What does font-weight do? (a) sets the letter colour (b) picks the font style (c) colours behind the text (d) makes the text bold
35. 35.🔍 Which is the odd one out? (a) rounds box corners (b) sets colours and fonts (c) lays out the page (d) reacts to a button click
36. 36.True or false: margin is the gap to other boxes. (a) True (b) False
37. 37.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 8px;
      }
    }
38. 38.✍️ What is the selector in this CSS rule?
    h2 {
      text-align: center;
      font-size: 20px;
    } (a) h1 (b) h2 (c) text-align (d) 20px
39. 39.🖌️ How big is the text, in px?
    h2 {
      font-size: 16px;
      color: orange;
      background-color: purple;
      text-align: center;
    }
40. 40.🌈 Which colour is #00ff00? (a) red (b) white (c) bright green (d) yellow

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