CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 36 · 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 colour is the text of this element?
   <h2 class="note" id="hero">Hi</h2>
   CSS:
   #hero { color: blue; }
   #hero { color: yellow; } (a) yellow (b) blue (c) green (d) white
2. 2.📦 In the box model, which part is the line round the box? (a) margin (b) border (c) content (d) padding
3. 3.⚖️ 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
4. 4.💪 Which flexbox property sets space between boxes? (a) align-items (b) flex-direction (c) gap (d) justify-content
5. 5.🧩 Which language makes a link? (a) CSS (b) HTML (c) JavaScript
6. 6.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 50px;
     padding: 25px;
     border: 2px solid black;
     margin: 5px;
   }
7. 7.What does color do? (a) picks the font style (b) makes letters bigger (c) makes the text bold (d) sets the letter colour
8. 8.🌈 Which colour is #ffff00? (a) black (b) blue (c) yellow (d) cyan
9. 9.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 260px;
     justify-content: center;
   }
   Inside are 3 boxes, each 80px wide (no margins).
10. 10.🎯 Which element does the selector div style? (a) <div class="big"> (b) <p class="big"> (c) <h1 id="top"> (d) <span>
11. 11.🔍 Which is the odd one out? (a) makes headings and lists (b) lays out the page (c) gives the page structure (d) puts a picture on a page
12. 12.True or false: margin is the gap to other boxes. (a) True (b) False
13. 13.💪 Which flexbox property turns on flexbox? (a) flex-direction (b) display: flex (c) align-items (d) justify-content
14. 14.🌈 Which colour is rgb(255, 255, 255)? (a) black (b) red (c) cyan (d) white
15. 15.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      width: 300px;
      font-weight: bold;
      font-style: italic;
    }
16. 16.📦 In the box model, which part is the text or picture? (a) border (b) content (c) padding (d) margin
17. 17.✍️ What is the selector in this CSS rule?
    h2 {
      font-weight: bold;
      text-align: center;
      width: 300px;
      border: 2px solid;
    } (a) center (b) font-weight (c) h1 (d) h2
18. 18.🎯 Which CSS selector matches this element?
    <span class="red" id="main">Hello</span> (a) #red (b) .box (c) .red (d) #logo
19. 19.🌈 Which colour is rgb(0, 0, 0)? (a) cyan (b) blue (c) red (d) black
20. 20.✍️ Which property is set to red in this rule?
    h2 {
      color: red;
      margin: 10px;
    } (a) font-size (b) text-align (c) red (d) color
21. 21.True or false: body is a class selector. (a) True (b) False
22. 22.⚖️ What colour is the text of this element?
    <p class="box" id="top">Hi</p>
    CSS:
    p { color: red; }
    p { color: purple; } (a) orange (b) purple (c) blue (d) red
23. 23.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
24. 24.🌈 In #0000ba the blue part is the hex number ba. What is it as a normal number?
25. 25.⚖️ What colour is the text of this element?
    <p class="red" id="top">Hi</p>
    CSS:
    .red { color: yellow; }
    p { color: white; } (a) purple (b) yellow (c) black (d) white
26. 26.🌈 Which hex code is red? (a) #ffff00 (b) #00ff00 (c) #ff0000 (d) #00ffff
27. 27.🌈 Which hex code is white? (a) #ff0000 (b) #ffffff (c) #00ff00 (d) #0000ff
28. 28.🎨 What does CSS stand for? (a) Creative Sheet System (b) Computer Style Sheets (c) Cascading Style Sheets (d) Colourful Site Styles
29. 29.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) center (c) space-between (d) flex-end
30. 30.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 280px;
      justify-content: center;
    }
    Inside are 4 boxes, each 60px wide (no margins).
31. 31.Which of these is the content? (a) space inside the border (b) the gap to other boxes (c) the gap round content (d) the text or picture
32. 32.True or false: li is a class selector. (a) True (b) False
33. 33.🖌️ Which CSS property centres a heading? (a) font-size (b) font-family (c) text-align (d) background-color
34. 34.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 32px;
      }
    } (a) No (b) Yes
35. 35.True or false: .menu is an id selector. (a) False (b) True
36. 36.📦 In the box model, which part is the gap to other boxes? (a) content (b) margin (c) padding (d) border
37. 37.🖌️ Which CSS property picks the font style? (a) font-weight (b) font-family (c) font-size (d) color
38. 38.✍️ What value is given to font-size in this rule?
    li {
      margin: 10px;
      font-size: 20px;
      font-weight: bold;
      border: 2px solid;
    } (a) font-size (b) yellow (c) 20px (d) center
39. 39.True or false: padding is the gap to other boxes. (a) False (b) True
40. 40.🌈 Which colour is #ff0000? (a) black (b) magenta (c) blue (d) red

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