CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 584 · 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 element does the selector #logo style? (a) <div id="end"> (b) <div id="logo"> (c) <div class="logo"> (d) <span class="red">
2. 2.💪 Which flexbox property picks row or column? (a) display: flex (b) align-items (c) gap (d) flex-direction
3. 3.🎯 Can many elements share the same class? (a) No (b) Yes
4. 4.⚖️ What colour is the text of this element?
   <h1 class="menu" id="end">Hi</h1>
   CSS:
   .menu { color: red; }
   .menu { color: green; } (a) red (b) yellow (c) black (d) green
5. 5.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) white (c) blue (d) green
6. 6.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 140px;
     padding: 30px;
     border: 4px solid black;
     margin: 15px;
   }
7. 7.What does justify-content: center do? (a) puts boxes in the middle (b) packs boxes at the end (c) packs boxes at the start (d) equal gaps, none at ends
8. 8.True or false: body is an element selector. (a) True (b) False
9. 9.🌈 Which colour is #ff00ff? (a) cyan (b) black (c) yellow (d) magenta
10. 10.🎯 How many elements on a page should have the same id? (a) 5 (b) any number (c) 1 (d) 2
11. 11.💪 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).
12. 12.🔍 Which is the odd one out? (a) changes the page live (b) makes a link (c) gives the page structure (d) makes a form box
13. 13.⚖️ What colour is the text of this element?
    <p class="star" id="intro">Hi</p>
    CSS:
    p { color: red; }
    #intro { color: blue; }
    .star { color: orange; } (a) red (b) green (c) blue (d) orange
14. 14.✍️ CSS declarations go inside which brackets? (a) < > (b) { } (c) ( ) (d) [ ]
15. 15.🔍 Which is the odd one out? (a) makes a form box (b) gives the page structure (c) makes headings and lists (d) sets colours and fonts
16. 16.🌈 In #220000 the red part is the hex number 22. What is it as a normal number?
17. 17.🖌️ Where does the text sit on its line?
    h2 {
      font-size: 32px;
      background-color: blue;
      text-align: center;
      color: green;
    } (a) on the right (b) on the left (c) in the middle
18. 18.🎯 Which sign starts a class selector? (a) @ (b) # (c) & (d) .
19. 19.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the br tag (c) the title tag (d) the hr tag
20. 20.✍️ How does a CSS comment start? (a) // (b) /* (c) # (d) <!--
21. 21.Which of these is margin? (a) space inside the border (b) the text or picture (c) space outside the border (d) the gap round content
22. 22.🖌️ Where does the text sit on its line?
    li {
      text-align: right;
      background-color: blue;
      color: red;
      font-size: 12px;
    } (a) on the left (b) in the middle (c) on the right
23. 23.🌈 Which colour is rgb(255, 255, 0)? (a) white (b) yellow (c) bright green (d) cyan
24. 24.📦 In the box model, which part is the line round the box? (a) padding (b) content (c) margin (d) border
25. 25.✍️ Which sign ends each CSS declaration? (a) . (b) , (c) : (d) ;
26. 26.✍️ Which property is set to center in this rule?
    body {
      font-size: 20px;
      text-align: center;
    } (a) background-color (b) center (c) margin (d) text-align
27. 27.💪 Which flexbox property sets space between boxes? (a) gap (b) align-items (c) flex-direction (d) display: flex
28. 28.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
29. 29.Which of these is the border? (a) the text or picture (b) the gap to other boxes (c) the line round the box (d) space inside the border
30. 30.🌈 Hex digits go 0 to 9, then A to which letter? (a) G (b) Z (c) J (d) F
31. 31.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 60px;
      padding: 20px;
      border: 3px solid black;
      margin: 10px;
    }
32. 32.🌈 Which colour is #00ffff? (a) black (b) white (c) cyan (d) bright green
33. 33.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the later one (c) the shorter one (d) neither
34. 34.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 16px;
      }
    }
35. 35.⚖️ What colour is the text of this element?
    <h1 class="note" id="hero">Hi</h1>
    CSS:
    h1 { color: blue; }
    h1 { color: orange; } (a) black (b) yellow (c) blue (d) orange
36. 36.✍️ What value is given to background-color in this rule?
    #top {
      width: 300px;
      font-size: 20px;
      background-color: yellow;
      text-align: center;
    } (a) background-color (b) 10px (c) yellow (d) 8px
37. 37.Which of these is the content? (a) a solid or dotted edge (b) the text or picture (c) space inside the border (d) the gap to other boxes
38. 38.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }
39. 39.⚖️ What colour is the text of this element?
    <h2 class="menu" id="main">Hi</h2>
    CSS:
    .menu { color: red; }
    .menu { color: black; } (a) yellow (b) white (c) black (d) red
40. 40.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 440px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 100px wide (no margins).

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