CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 427 · 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.🌈 In #007600 the green part is the hex number 76. What is it as a normal number?
2. 2.🎯 How many elements on a page should have the same id? (a) 2 (b) 1 (c) any number (d) 5
3. 3.🧩 Which language makes a form box? (a) JavaScript (b) HTML (c) CSS
4. 4.⚖️ What colour is the text of this element?
   <h2 class="red" id="end">Hi</h2>
   CSS:
   h2 { color: red; }
   #end { color: yellow; }
   .red { color: blue; } (a) blue (b) red (c) yellow (d) green
5. 5.⚖️ What colour is the text of this element?
   <p class="box" id="main">Hi</p>
   CSS:
   p { color: black; }
   p { color: white; } (a) red (b) white (c) black (d) blue
6. 6.What does color do? (a) picks the font style (b) centres a heading (c) colours behind the text (d) sets the letter colour
7. 7.✍️ How many declarations (property: value pairs) are in this rule?
   h1 {
     padding: 8px;
     font-weight: bold;
     font-size: 20px;
     font-style: italic;
   }
8. 8.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 110px;
     padding: 5px;
     border: 5px solid black;
     margin: 0px;
   }
9. 9.🎯 Can many elements share the same class? (a) Yes (b) No
10. 10.⚖️ What colour is the text of this element?
    <p class="star" id="top">Hi</p>
    CSS:
    p { color: red; }
    #top { color: black; } (a) green (b) black (c) blue (d) red
11. 11.🌈 What is the biggest number one colour can have in rgb()? (a) 99 (b) 100 (c) 255 (d) 1000
12. 12.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 350px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 80px wide (no margins).
13. 13.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
14. 14.🌈 Which colour is #00ff00? (a) bright green (b) black (c) red (d) magenta
15. 15.True or false: #top is an id selector. (a) False (b) True
16. 16.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 140px;
      padding: 5px;
      border: 5px solid black;
      margin: 15px;
    }
17. 17.✍️ Which property is set to red in this rule?
    body {
      padding: 8px;
      color: red;
    } (a) color (b) text-align (c) red (d) font-size
18. 18.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    }
19. 19.🎯 What kind of selector is #top? (a) an element selector (b) a class selector (c) an id selector
20. 20.📦 In the box model, which part is the text or picture? (a) border (b) content (c) margin (d) padding
21. 21.🔍 Which is the odd one out? (a) shows a pop-up message (b) checks a quiz answer (c) lays out the page (d) reacts to a button click
22. 22.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the br tag (c) the viewport meta tag (d) the title tag
23. 23.Which of these does HTML do? (a) changes the page live (b) lays out the page (c) makes a form box (d) shows a pop-up message
24. 24.🎯 What kind of selector is h1? (a) an id selector (b) a class selector (c) an element selector
25. 25.🖌️ Where does the text sit on its line?
    h1 {
      font-size: 36px;
      background-color: black;
      text-align: center;
      color: blue;
    } (a) on the right (b) in the middle (c) on the left
26. 26.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) 800px or wider (c) 800px or narrower (d) turned off
27. 27.What does font-family do? (a) makes letters bigger (b) colours behind the text (c) centres a heading (d) picks the font style
28. 28.🌈 Which colour is rgb(0, 255, 255)? (a) cyan (b) bright green (c) white (d) magenta
29. 29.True or false: padding is space outside the border. (a) True (b) False
30. 30.🎯 Which CSS selector matches this element?
    <div class="note" id="logo">Hello</div> (a) #logo (b) .big (c) .logo (d) span
31. 31.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 10px;
      }
    }
32. 32.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 80px wide (no margins).
33. 33.🎨 One CSS file can style how many pages? (a) no pages (b) only one image (c) only one word (d) many pages
34. 34.🖌️ What colour are the letters?
    li {
      text-align: right;
      background-color: black;
      font-size: 12px;
      color: red;
    } (a) purple (b) red (c) black
35. 35.Which of these does JavaScript do? (a) shows a pop-up message (b) adds space around boxes (c) makes a link (d) makes headings and lists
36. 36.🧩 Which language puts a picture on a page? (a) HTML (b) CSS (c) JavaScript
37. 37.🖌️ Which CSS property sets the letter colour? (a) color (b) font-size (c) font-family (d) text-align
38. 38.What does font-weight do? (a) colours behind the text (b) centres a heading (c) makes the text bold (d) makes letters bigger
39. 39.True or false: HTML rounds box corners. (a) False (b) True
40. 40.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      background-color: yellow;
      font-style: italic;
      text-align: center;
    }

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