CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 374 · 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) <style> (c) <body> (d) <css>
2. 2.🌈 Which colour is rgb(255, 255, 0)? (a) cyan (b) yellow (c) bright green (d) magenta
3. 3.What does color do? (a) makes letters bigger (b) sets the letter colour (c) makes the text bold (d) colours behind the text
4. 4.📱 The screen is 375px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 22px;
     }
   } (a) No (b) Yes
5. 5.True or false: .big is an element selector. (a) False (b) True
6. 6.Which of these does HTML do? (a) rounds box corners (b) sets colours and fonts (c) makes headings and lists (d) lays out the page
7. 7.🌈 Which colour is rgb(0, 255, 0)? (a) bright green (b) magenta (c) red (d) blue
8. 8.🖌️ Where does the text sit on its line?
   h1 {
     text-align: right;
     background-color: red;
     color: yellow;
     font-size: 20px;
   } (a) in the middle (b) on the right (c) on the left
9. 9.🖌️ Which CSS property sets the letter colour? (a) color (b) font-family (c) font-size (d) background-color
10. 10.True or false: JavaScript changes the page live. (a) False (b) True
11. 11.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 200px;
      justify-content: center;
    }
    Inside are 2 boxes, each 60px wide (no margins).
12. 12.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 110px;
      padding: 5px;
      border: 2px solid black;
      margin: 5px;
    }
13. 13.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      font-style: italic;
      width: 300px;
      color: red;
      background-color: yellow;
    }
14. 14.🌈 Which colour of light is strongest in rgb(18, 207, 94)? (a) red (b) blue (c) green
15. 15.🔍 Which is the odd one out? (a) gives the page structure (b) makes a link (c) makes headings and lists (d) adds space around boxes
16. 16.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
17. 17.🔍 Which is the odd one out? (a) makes headings and lists (b) puts a picture on a page (c) gives the page structure (d) lays out the page
18. 18.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the first one (c) the later one (d) neither
19. 19.What does justify-content: flex-start do? (a) packs boxes at the end (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the start
20. 20.Which of these is padding? (a) space outside the border (b) the line round the box (c) the text or picture (d) space inside the border
21. 21.📱 Which tag helps phones show a page at the right size? (a) the br tag (b) the viewport meta tag (c) the hr tag (d) the title tag
22. 22.🖌️ Which CSS property centres a heading? (a) font-weight (b) font-family (c) background-color (d) text-align
23. 23.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      width: 300px;
    }
24. 24.✍️ What is the selector in this CSS rule?
    h1 {
      font-style: italic;
      margin: 10px;
      border: 2px solid;
    } (a) font-style (b) p (c) 10px (d) h1
25. 25.Which of these is margin? (a) a solid or dotted edge (b) the gap to other boxes (c) space inside the border (d) the line round the box
26. 26.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
27. 27.💪 Which flexbox property sets space between boxes? (a) justify-content (b) gap (c) align-items (d) flex-direction
28. 28.What does text-align do? (a) colours behind the text (b) centres a heading (c) sets the letter colour (d) makes letters bigger
29. 29.⚖️ What colour is the text of this element?
    <h1 class="red" id="intro">Hi</h1>
    CSS:
    #intro { color: green; }
    #intro { color: yellow; } (a) purple (b) green (c) yellow (d) orange
30. 30.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 220px;
      padding: 25px;
      border: 1px solid black;
      margin: 5px;
    }
31. 31.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      border: 2px solid;
    }
32. 32.🖌️ What colour is behind the letters?
    p {
      font-size: 20px;
      text-align: center;
      color: orange;
      background-color: black;
    } (a) white (b) black (c) orange
33. 33.🖌️ Which CSS property picks the font style? (a) color (b) font-family (c) text-align (d) font-size
34. 34.🧩 Which language sets colours and fonts? (a) CSS (b) HTML (c) JavaScript
35. 35.💪 Which justify-content value packs boxes at the end? (a) space-between (b) flex-end (c) flex-start (d) center
36. 36.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) 600px or wider (c) exactly 1000px (d) 600px or narrower
37. 37.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 80px;
      padding: 30px;
      border: 1px solid black;
      margin: 20px;
    }
38. 38.✍️ Which sign ends each CSS declaration? (a) , (b) : (c) . (d) ;
39. 39.🎯 Which element does the selector .box style? (a) <li id="box"> (b) <li class="star"> (c) <li class="box"> (d) <div class="menu">
40. 40.True or false: padding is the gap round content. (a) False (b) True

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