CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 379 · 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.✍️ How many declarations (property: value pairs) are in this rule?
   p {
     width: 300px;
     margin: 10px;
     color: red;
   }
2. 2.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 18px;
     }
   }
3. 3.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the viewport meta tag (c) the br tag (d) the title tag
4. 4.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 400px;
     justify-content: center;
   }
   Inside are 3 boxes, each 100px wide (no margins).
5. 5.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) neither (c) the later one (d) the first one
6. 6.🧩 Which language checks a quiz answer? (a) CSS (b) JavaScript (c) HTML
7. 7.🌈 Which colour is #000000? (a) bright green (b) red (c) black (d) cyan
8. 8.🖌️ What colour are the letters?
   li {
     text-align: left;
     font-size: 12px;
     background-color: orange;
     color: green;
   } (a) orange (b) green (c) yellow
9. 9.🌈 Which colour of light is strongest in rgb(112, 157, 62)? (a) blue (b) red (c) green
10. 10.Which of these does HTML do? (a) adds space around boxes (b) rounds box corners (c) makes a form box (d) changes the text size
11. 11.🔍 Which is the odd one out? (a) makes headings and lists (b) sets colours and fonts (c) rounds box corners (d) changes the text size
12. 12.🌈 Which colour is rgb(0, 255, 0)? (a) red (b) white (c) black (d) bright green
13. 13.What does text-align do? (a) colours behind the text (b) centres a heading (c) makes the text bold (d) sets the letter colour
14. 14.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 40px wide (no margins).
15. 15.⚖️ What colour is the text of this element?
    <h2 class="big" id="intro">Hi</h2>
    CSS:
    #intro { color: blue; }
    #intro { color: orange; } (a) blue (b) orange (c) white (d) black
16. 16.📦 In the box model, which part is the gap to other boxes? (a) padding (b) content (c) border (d) margin
17. 17.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 260px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 80px wide (no margins).
18. 18.🧩 Which language rounds box corners? (a) JavaScript (b) HTML (c) CSS
19. 19.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 220px;
      padding: 5px;
      border: 1px solid black;
      margin: 10px;
    }
20. 20.⚖️ What colour is the text of this element?
    <h2 class="star" id="top">Hi</h2>
    CSS:
    #top { color: red; }
    #top { color: black; } (a) green (b) yellow (c) black (d) red
21. 21.🧩 Which language makes a link? (a) CSS (b) HTML (c) JavaScript
22. 22.True or false: HTML makes a link. (a) False (b) True
23. 23.Which of these does CSS do? (a) checks a quiz answer (b) sets colours and fonts (c) makes a link (d) gives the page structure
24. 24.Which of these is the content? (a) space outside the border (b) the gap to other boxes (c) the text or picture (d) the gap round content
25. 25.⚖️ What colour is the text of this element?
    <h1 class="star" id="end">Hi</h1>
    CSS:
    #end { color: white; }
    #end { color: red; } (a) white (b) yellow (c) red (d) green
26. 26.🧩 Which language shows a pop-up message? (a) HTML (b) CSS (c) JavaScript
27. 27.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 160px;
      padding: 10px;
      border: 4px solid black;
      margin: 5px;
    }
28. 28.What does font-size do? (a) makes letters bigger (b) makes the text bold (c) sets the letter colour (d) centres a heading
29. 29.✍️ What value is given to padding in this rule?
    li {
      width: 300px;
      font-style: italic;
      color: red;
      padding: 8px;
    } (a) padding (b) bold (c) 2px solid (d) 8px
30. 30.✍️ What value is given to color in this rule?
    h2 {
      color: red;
      font-size: 20px;
      font-style: italic;
    } (a) 20px (b) red (c) center (d) color
31. 31.True or false: #hero is an id selector. (a) False (b) True
32. 32.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 130px;
      padding: 25px;
      border: 2px solid black;
      margin: 0px;
    }
33. 33.True or false: #main is an id selector. (a) True (b) False
34. 34.🔍 Which is the odd one out? (a) adds space around boxes (b) lays out the page (c) shows a pop-up message (d) sets colours and fonts
35. 35.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 110px;
      padding: 30px;
      border: 2px solid black;
      margin: 5px;
    }
36. 36.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 230px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 80px wide (no margins).
37. 37.✍️ In color: blue; which part is the value? (a) blue (b) ; (c) : (d) color
38. 38.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      width: 300px;
      background-color: yellow;
      margin: 10px;
    }
39. 39.📱 Responsive design means a page ___. (a) fits every screen (b) never changes (c) has no pictures (d) is only for laptops
40. 40.🖌️ How big is the text, in px?
    li {
      background-color: yellow;
      font-size: 16px;
      color: blue;
      text-align: right;
    }

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