CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 621 · 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 hex code is white? (a) #00ff00 (b) #ffffff (c) #ff00ff (d) #000000
2. 2.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 170px;
     padding: 20px;
     border: 1px solid black;
     margin: 5px;
   }
3. 3.What does font-weight do? (a) picks the font style (b) makes the text bold (c) colours behind the text (d) sets the letter colour
4. 4.🌈 Which colour is #ff0000? (a) black (b) magenta (c) red (d) blue
5. 5.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 200px;
     justify-content: center;
   }
   Inside are 2 boxes, each 50px wide (no margins).
6. 6.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) exactly 1000px (c) turned off (d) 600px or wider
7. 7.🌈 Which colour is rgb(255, 255, 255)? (a) bright green (b) red (c) black (d) white
8. 8.Which of these is margin? (a) the gap round content (b) the line round the box (c) the gap to other boxes (d) a solid or dotted edge
9. 9.🖌️ How big is the text, in px?
   h2 {
     color: red;
     background-color: green;
     text-align: center;
     font-size: 32px;
   }
10. 10.True or false: HTML changes the page live. (a) True (b) False
11. 11.✍️ Which property is set to bold in this rule?
    h1 {
      border: 2px solid;
      font-weight: bold;
      font-style: italic;
      width: 300px;
    } (a) bold (b) border (c) width (d) font-weight
12. 12.✍️ What value is given to font-size in this rule?
    h2 {
      background-color: yellow;
      font-size: 20px;
    } (a) yellow (b) 20px (c) center (d) font-size
13. 13.True or false: margin is space inside the border. (a) False (b) True
14. 14.🖌️ Where does the text sit on its line?
    h1 {
      background-color: black;
      color: blue;
      text-align: right;
      font-size: 40px;
    } (a) on the right (b) on the left (c) in the middle
15. 15.🖌️ Which CSS property makes the text bold? (a) background-color (b) font-size (c) font-weight (d) color
16. 16.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 12px;
      }
    }
17. 17.📱 What does a media query check? (a) the battery level (b) the screen width (c) the time of day (d) the page title
18. 18.What does justify-content: flex-end do? (a) packs boxes at the start (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the end
19. 19.What does background-color do? (a) sets the letter colour (b) picks the font style (c) colours behind the text (d) makes the text bold
20. 20.💪 Which flexbox property turns on flexbox? (a) flex-direction (b) display: flex (c) align-items (d) gap
21. 21.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) neither (c) the first one (d) the later one
22. 22.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      background-color: yellow;
    }
23. 23.Which of these does HTML do? (a) reacts to a button click (b) checks a quiz answer (c) counts down a timer (d) makes a form box
24. 24.🎯 What kind of selector is .menu? (a) an id selector (b) an element selector (c) a class selector
25. 25.✍️ Which property is set to 20px in this rule?
    h1 {
      background-color: yellow;
      font-size: 20px;
      border: 2px solid;
    } (a) background-color (b) 20px (c) text-align (d) font-size
26. 26.🎯 Which CSS selector matches this element?
    <li class="star" id="logo">Hello</li> (a) .logo (b) #end (c) li (d) #star
27. 27.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 100px;
      padding: 20px;
      border: 1px solid black;
      margin: 15px;
    }
28. 28.🌈 Which hex code is red? (a) #000000 (b) #0000ff (c) #ffff00 (d) #ff0000
29. 29.🎯 What kind of selector is .note? (a) a class selector (b) an id selector (c) an element selector
30. 30.⚖️ What colour is the text of this element?
    <h1 class="box" id="top">Hi</h1>
    CSS:
    .box { color: green; }
    .box { color: white; } (a) black (b) green (c) white (d) red
31. 31.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      width: 300px;
      border: 2px solid;
      text-align: center;
      color: red;
    }
32. 32.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 440px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 100px wide (no margins).
33. 33.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 210px;
      padding: 20px;
      border: 2px solid black;
      margin: 15px;
    }
34. 34.🌈 Hex digits go 0 to 9, then A to which letter? (a) G (b) Z (c) J (d) F
35. 35.⚖️ What colour is the text of this element?
    <h2 class="menu" id="hero">Hi</h2>
    CSS:
    .menu { color: green; }
    .menu { color: yellow; } (a) green (b) white (c) yellow (d) purple
36. 36.🌈 Which colour is #00ffff? (a) cyan (b) red (c) black (d) blue
37. 37.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 170px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 80px wide (no margins).
38. 38.🌈 Which colour is #000000? (a) yellow (b) white (c) magenta (d) black
39. 39.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 130px;
      padding: 10px;
      border: 2px solid black;
      margin: 20px;
    }
40. 40.Which of these is the content? (a) a solid or dotted edge (b) the gap to other boxes (c) the text or picture (d) space inside the border

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