CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 587 · 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 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
2. 2.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 120px;
     padding: 20px;
     border: 1px solid black;
     margin: 20px;
   }
3. 3.✍️ CSS declarations go inside which brackets? (a) ( ) (b) [ ] (c) < > (d) { }
4. 4.🌈 Which hex code is red? (a) #ffffff (b) #ff00ff (c) #00ff00 (d) #ff0000
5. 5.Which of these does CSS do? (a) makes headings and lists (b) shows a pop-up message (c) adds space around boxes (d) makes a form box
6. 6.🌈 Which hex code is white? (a) #ffffff (b) #ff0000 (c) #ffff00 (d) #0000ff
7. 7.🧩 Which language checks a quiz answer? (a) HTML (b) CSS (c) JavaScript
8. 8.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 260px;
     justify-content: center;
   }
   Inside are 2 boxes, each 80px wide (no margins).
9. 9.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 180px;
     justify-content: center;
   }
   Inside are 2 boxes, each 80px wide (no margins).
10. 10.🖌️ What colour is behind the letters?
    h2 {
      color: orange;
      text-align: left;
      font-size: 20px;
      background-color: blue;
    } (a) orange (b) black (c) blue
11. 11.True or false: #end is an id selector. (a) False (b) True
12. 12.💪 Which flexbox property lines boxes up across? (a) display: flex (b) flex-direction (c) gap (d) align-items
13. 13.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 26px;
      }
    }
14. 14.What does justify-content: flex-end do? (a) equal gaps, none at ends (b) packs boxes at the start (c) packs boxes at the end (d) puts boxes in the middle
15. 15.True or false: #main is an id selector. (a) False (b) True
16. 16.📦 In the box model, which part is the gap to other boxes? (a) content (b) border (c) padding (d) margin
17. 17.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      color: red;
    }
18. 18.📦 In the box model, which part is the text or picture? (a) padding (b) content (c) margin (d) border
19. 19.🎨 What does CSS stand for? (a) Creative Sheet System (b) Colourful Site Styles (c) Computer Style Sheets (d) Cascading Style Sheets
20. 20.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
21. 21.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the later one (c) the shorter one (d) the first one
22. 22.✍️ What value is given to text-align in this rule?
    p {
      text-align: center;
      padding: 8px;
    } (a) yellow (b) text-align (c) 10px (d) center
23. 23.Which of these is margin? (a) a solid or dotted edge (b) the gap to other boxes (c) the line round the box (d) the gap round content
24. 24.⚖️ What colour is the text of this element?
    <p class="note" id="top">Hi</p>
    CSS:
    .note { color: blue; }
    p { color: green; } (a) white (b) blue (c) purple (d) green
25. 25.🖌️ Which CSS property colours behind the text? (a) font-family (b) text-align (c) background-color (d) color
26. 26.Which of these is the content? (a) a solid or dotted edge (b) the gap to other boxes (c) space inside the border (d) the text or picture
27. 27.🖌️ How big is the text, in px?
    p {
      background-color: orange;
      text-align: left;
      color: black;
      font-size: 36px;
    }
28. 28.Which of these is margin? (a) the gap round content (b) space outside the border (c) space inside the border (d) the line round the box
29. 29.Which of these does HTML do? (a) adds space around boxes (b) lays out the page (c) changes the page live (d) makes a link
30. 30.✍️ What is the selector in this CSS rule?
    h1 {
      text-align: center;
      font-weight: bold;
    } (a) p (b) text-align (c) bold (d) h1
31. 31.📱 What does a media query check? (a) the battery level (b) the screen width (c) the page title (d) the time of day
32. 32.⚖️ What colour is the text of this element?
    <h1 class="red" id="end">Hi</h1>
    CSS:
    .red { color: blue; }
    h1 { color: black; }
    #end { color: purple; } (a) yellow (b) blue (c) black (d) purple
33. 33.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) green (c) blue (d) black
34. 34.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 120px;
      padding: 5px;
      border: 1px solid black;
      margin: 20px;
    }
35. 35.Which of these is the border? (a) the gap round content (b) space outside the border (c) the text or picture (d) the line round the box
36. 36.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 470px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 80px wide (no margins).
37. 37.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 170px;
      padding: 30px;
      border: 2px solid black;
      margin: 15px;
    }
38. 38.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 140px;
      justify-content: center;
    }
    Inside are 2 boxes, each 40px wide (no margins).
39. 39.⚖️ What colour is the text of this element?
    <h2 class="red" id="intro">Hi</h2>
    CSS:
    .red { color: purple; }
    #intro { color: black; } (a) black (b) purple (c) yellow (d) white
40. 40.✍️ In color: blue; which part is the property? (a) blue (b) : (c) ; (d) color

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