CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 153 · 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 biggest number one colour can have in rgb()? (a) 100 (b) 99 (c) 1000 (d) 255
2. 2.✍️ Which sign ends each CSS declaration? (a) . (b) , (c) ; (d) :
3. 3.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 180px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 50px wide (no margins).
4. 4.✍️ How does a CSS comment start? (a) // (b) # (c) /* (d) <!--
5. 5.📦 In the box model, which part is the gap round content? (a) content (b) padding (c) margin (d) border
6. 6.🌈 Which hex code is white? (a) #ffffff (b) #00ffff (c) #00ff00 (d) #0000ff
7. 7.🖌️ Where does the text sit on its line?
   h2 {
     font-size: 20px;
     background-color: orange;
     color: black;
     text-align: left;
   } (a) in the middle (b) on the left (c) on the right
8. 8.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 260px;
     padding: 25px;
     border: 2px solid black;
     margin: 15px;
   }
9. 9.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 370px;
     justify-content: flex-start;
   }
   Inside are 4 boxes, each 80px wide (no margins).
10. 10.🌈 Which colour is rgb(0, 255, 255)? (a) black (b) white (c) bright green (d) cyan
11. 11.✍️ What is the selector in this CSS rule?
    li {
      font-style: italic;
      color: red;
    } (a) li (b) body (c) red (d) font-style
12. 12.🌈 Which colour is #000000? (a) red (b) blue (c) bright green (d) black
13. 13.🎯 What kind of selector is #end? (a) an id selector (b) a class selector (c) an element selector
14. 14.🖌️ Which CSS property picks the font style? (a) font-family (b) font-size (c) color (d) text-align
15. 15.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 60px wide (no margins).
16. 16.🔍 Which is the odd one out? (a) makes headings and lists (b) makes a link (c) changes the text size (d) puts a picture on a page
17. 17.Which of these is the content? (a) the gap to other boxes (b) the text or picture (c) space inside the border (d) the gap round content
18. 18.⚖️ What colour is the text of this element?
    <p class="big" id="intro">Hi</p>
    CSS:
    #intro { color: black; }
    .big { color: white; } (a) orange (b) white (c) purple (d) black
19. 19.🎯 How many elements on a page should have the same id? (a) any number (b) 1 (c) 2 (d) 5
20. 20.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) red (c) green (d) blue
21. 21.🌈 Which colour of light is strongest in rgb(136, 183, 60)? (a) red (b) blue (c) green
22. 22.🎯 What kind of selector is .big? (a) an id selector (b) a class selector (c) an element selector
23. 23.🖌️ What colour are the letters?
    li {
      font-size: 12px;
      color: red;
      text-align: center;
      background-color: black;
    } (a) yellow (b) black (c) red
24. 24.🎯 What kind of selector is #top? (a) an element selector (b) a class selector (c) an id selector
25. 25.⚖️ What colour is the text of this element?
    <h2 class="red" id="top">Hi</h2>
    CSS:
    h2 { color: orange; }
    #top { color: yellow; } (a) blue (b) red (c) yellow (d) orange
26. 26.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) red (c) black (d) blue
27. 27.🎯 Which element does the selector .star style? (a) <li class="menu"> (b) <li class="star"> (c) <div class="note"> (d) <li id="star">
28. 28.💪 Which flexbox property picks row or column? (a) display: flex (b) flex-direction (c) align-items (d) justify-content
29. 29.✍️ What value is given to padding in this rule?
    p {
      color: red;
      font-style: italic;
      text-align: center;
      padding: 8px;
    } (a) 8px (b) padding (c) 2px solid (d) bold
30. 30.Which of these does HTML do? (a) lays out the page (b) makes a form box (c) counts down a timer (d) sets colours and fonts
31. 31.✍️ What is the selector in this CSS rule?
    .box {
      width: 300px;
      margin: 10px;
    } (a) width (b) 10px (c) h2 (d) .box
32. 32.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 240px;
      padding: 10px;
      border: 3px solid black;
      margin: 0px;
    }
33. 33.🖌️ How big is the text, in px?
    h1 {
      text-align: left;
      color: red;
      font-size: 16px;
      background-color: blue;
    }
34. 34.🎯 What kind of selector is .menu? (a) a class selector (b) an element selector (c) an id selector
35. 35.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) turned off (c) exactly 1000px (d) 600px or wider
36. 36.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the later one (c) neither (d) the first one
37. 37.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      text-align: center;
      border: 2px solid;
      font-size: 20px;
      padding: 8px;
    }
38. 38.📱 Responsive design means a page ___. (a) fits every screen (b) never changes (c) has no pictures (d) is only for laptops
39. 39.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      font-size: 20px;
    }
40. 40.True or false: CSS counts down a timer. (a) False (b) True

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