CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 119 · 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.✍️ What is the selector in this CSS rule?
   body {
     padding: 8px;
     font-style: italic;
   } (a) italic (b) padding (c) .box (d) body
2. 2.📱 min-width: 800px applies when the screen is ___. (a) turned off (b) exactly 100px (c) 800px or wider (d) 800px or narrower
3. 3.🖌️ Which CSS property makes the text bold? (a) color (b) font-family (c) background-color (d) font-weight
4. 4.✍️ What value is given to border in this rule?
   .note {
     border: 2px solid;
     background-color: yellow;
     color: red;
   } (a) 300px (b) italic (c) border (d) 2px solid
5. 5.🎨 Which tag connects an outside CSS file? (a) <link> (b) <css> (c) <img> (d) <a>
6. 6.⚖️ What colour is the text of this element?
   <p class="big" id="top">Hi</p>
   CSS:
   #top { color: blue; }
   p { color: black; }
   .big { color: purple; } (a) black (b) orange (c) purple (d) blue
7. 7.🎯 Which CSS selector matches this element?
   <span class="star" id="end">Hello</span> (a) #star (b) span (c) p (d) #hero
8. 8.🌈 What is the biggest number one colour can have in rgb()? (a) 99 (b) 100 (c) 1000 (d) 255
9. 9.Which of these is padding? (a) the line round the box (b) the gap to other boxes (c) space inside the border (d) space outside the border
10. 10.🌈 Which colour is rgb(0, 0, 255)? (a) red (b) yellow (c) blue (d) white
11. 11.🎨 Which tag holds CSS inside the head? (a) <style> (b) <body> (c) <css> (d) <script>
12. 12.📦 In the box model, which part is space inside the border? (a) border (b) content (c) padding (d) margin
13. 13.✍️ CSS declarations go inside which brackets? (a) ( ) (b) [ ] (c) < > (d) { }
14. 14.True or false: #logo is an id selector. (a) False (b) True
15. 15.True or false: the content is the gap round content. (a) True (b) False
16. 16.🌈 Which colour is rgb(0, 255, 0)? (a) blue (b) yellow (c) magenta (d) bright green
17. 17.🖌️ What colour is behind the letters?
    h1 {
      text-align: left;
      background-color: yellow;
      font-size: 20px;
      color: red;
    } (a) black (b) yellow (c) red
18. 18.True or false: #main is an id selector. (a) True (b) False
19. 19.📱 Which tag helps phones show a page at the right size? (a) the br tag (b) the hr tag (c) the viewport meta tag (d) the title tag
20. 20.🎯 Which CSS selector matches this element?
    <div class="star" id="intro">Hello</div> (a) .intro (b) .menu (c) #intro (d) #star
21. 21.🖌️ Which CSS property makes letters bigger? (a) font-size (b) background-color (c) font-weight (d) text-align
22. 22.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 90px;
      padding: 10px;
      border: 5px solid black;
      margin: 20px;
    }
23. 23.🌈 Which colour is rgb(255, 0, 255)? (a) red (b) cyan (c) blue (d) magenta
24. 24.🎨 One CSS file can style how many pages? (a) only one image (b) many pages (c) only one word (d) no pages
25. 25.💪 Which flexbox property turns on flexbox? (a) display: flex (b) justify-content (c) gap (d) flex-direction
26. 26.✍️ What is the selector in this CSS rule?
    .box {
      color: red;
      width: 300px;
      font-style: italic;
    } (a) h2 (b) 300px (c) color (d) .box
27. 27.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 130px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 40px wide (no margins).
28. 28.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 70px;
      padding: 10px;
      border: 3px solid black;
      margin: 20px;
    }
29. 29.⚖️ What colour is the text of this element?
    <p class="note" id="logo">Hi</p>
    CSS:
    p { color: purple; }
    .note { color: orange; }
    #logo { color: black; } (a) purple (b) orange (c) black (d) white
30. 30.✍️ What value is given to margin in this rule?
    .note {
      font-size: 20px;
      color: red;
      margin: 10px;
    } (a) 10px (b) margin (c) bold (d) 8px
31. 31.🖌️ What colour are the letters?
    h1 {
      background-color: red;
      color: orange;
      text-align: right;
      font-size: 32px;
    } (a) orange (b) white (c) red
32. 32.🖌️ Where does the text sit on its line?
    p {
      color: blue;
      font-size: 40px;
      background-color: green;
      text-align: center;
    } (a) on the left (b) in the middle (c) on the right
33. 33.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 280px;
      justify-content: center;
    }
    Inside are 3 boxes, each 40px wide (no margins).
34. 34.🖌️ What colour is behind the letters?
    li {
      text-align: center;
      color: green;
      background-color: red;
      font-size: 32px;
    } (a) red (b) green (c) white
35. 35.True or false: JavaScript adds space around boxes. (a) False (b) True
36. 36.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      color: red;
    }
37. 37.What does font-size do? (a) picks the font style (b) sets the letter colour (c) makes letters bigger (d) colours behind the text
38. 38.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      font-style: italic;
      width: 300px;
      color: red;
    }
39. 39.✍️ Which property is set to red in this rule?
    #top {
      text-align: center;
      color: red;
    } (a) font-size (b) red (c) text-align (d) color
40. 40.🖌️ Where does the text sit on its line?
    h2 {
      font-size: 12px;
      color: red;
      text-align: center;
      background-color: white;
    } (a) in the middle (b) on the left (c) on the right

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