CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 768 · 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 tag helps phones show a page at the right size? (a) the viewport meta tag (b) the hr tag (c) the title tag (d) the br tag
2. 2.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 150px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 40px wide (no margins).
3. 3.🎯 What kind of selector is img? (a) an element selector (b) a class selector (c) an id selector
4. 4.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 270px;
     padding: 5px;
     border: 4px solid black;
     margin: 20px;
   }
5. 5.📱 What does a media query check? (a) the time of day (b) the battery level (c) the page title (d) the screen width
6. 6.⚖️ What colour is the text of this element?
   <h2 class="red" id="top">Hi</h2>
   CSS:
   .red { color: blue; }
   h2 { color: green; }
   #top { color: purple; } (a) blue (b) purple (c) green (d) black
7. 7.Which of these is the border? (a) space inside the border (b) the line round the box (c) space outside the border (d) the text or picture
8. 8.🌈 Which colour is #ffff00? (a) blue (b) yellow (c) red (d) magenta
9. 9.🌈 Which colour is rgb(0, 0, 0)? (a) cyan (b) bright green (c) black (d) white
10. 10.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
11. 11.📦 In the box model, which part is space outside the border? (a) content (b) margin (c) border (d) padding
12. 12.✍️ Which property is set to red in this rule?
    .note {
      width: 300px;
      font-size: 20px;
      margin: 10px;
      color: red;
    } (a) text-align (b) font-size (c) red (d) color
13. 13.🖌️ Which CSS property makes the text bold? (a) color (b) font-weight (c) font-family (d) background-color
14. 14.📦 In the box model, which part is a solid or dotted edge? (a) padding (b) border (c) margin (d) content
15. 15.🎯 Can many elements share the same class? (a) No (b) Yes
16. 16.🖌️ How big is the text, in px?
    p {
      font-size: 20px;
      color: black;
      text-align: right;
      background-color: red;
    }
17. 17.🌈 In #0e0000 the red part is the hex number 0e. What is it as a normal number?
18. 18.✍️ Which sign goes between a property and its value? (a) = (b) : (c) ; (d) -
19. 19.🌈 In #002600 the green part is the hex number 26. What is it as a normal number?
20. 20.⚖️ Which selector is the strongest? (a) a class selector (b) an element selector (c) an id selector
21. 21.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 12px;
      }
    } (a) No (b) Yes
22. 22.🎯 Which CSS selector matches this element?
    <h2 class="menu" id="intro">Hello</h2> (a) .menu (b) li (c) .intro (d) #menu
23. 23.✍️ What value is given to width in this rule?
    p {
      font-weight: bold;
      width: 300px;
      background-color: yellow;
      color: red;
    } (a) red (b) width (c) italic (d) 300px
24. 24.🌈 Which colour is #ffffff? (a) black (b) bright green (c) cyan (d) white
25. 25.⚖️ What colour is the text of this element?
    <p class="big" id="hero">Hi</p>
    CSS:
    .big { color: orange; }
    .big { color: purple; } (a) orange (b) green (c) yellow (d) purple
26. 26.Which of these does CSS do? (a) counts down a timer (b) checks a quiz answer (c) shows a pop-up message (d) lays out the page
27. 27.🧩 Which language makes a form box? (a) CSS (b) JavaScript (c) HTML
28. 28.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 300px;
      justify-content: center;
    }
    Inside are 4 boxes, each 50px wide (no margins).
29. 29.True or false: HTML changes the page live. (a) True (b) False
30. 30.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      border: 2px solid;
      text-align: center;
    }
31. 31.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) blue (c) green (d) red
32. 32.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 260px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 100px wide (no margins).
33. 33.✍️ CSS declarations go inside which brackets? (a) < > (b) { } (c) ( ) (d) [ ]
34. 34.✍️ What is the selector in this CSS rule?
    .box {
      text-align: center;
      color: red;
    } (a) h2 (b) red (c) text-align (d) .box
35. 35.🖌️ What colour are the letters?
    h1 {
      text-align: left;
      background-color: green;
      color: blue;
      font-size: 12px;
    } (a) black (b) green (c) blue
36. 36.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 16px;
      }
    } (a) Yes (b) No
37. 37.True or false: the content is the text or picture. (a) True (b) False
38. 38.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      width: 300px;
      font-size: 20px;
    }
39. 39.⚖️ What colour is the text of this element?
    <h1 class="red" id="logo">Hi</h1>
    CSS:
    #logo { color: black; }
    #logo { color: blue; } (a) black (b) purple (c) yellow (d) blue
40. 40.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 250px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 50px wide (no margins).

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