CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 308 · 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 of these does HTML do? (a) gives the page structure (b) reacts to a button click (c) sets colours and fonts (d) shows a pop-up message
2. 2.Which of these does HTML do? (a) adds space around boxes (b) changes the text size (c) makes a link (d) reacts to a button click
3. 3.True or false: .note is a class selector. (a) True (b) False
4. 4.Which of these is the border? (a) space inside the border (b) space outside the border (c) the gap to other boxes (d) the line round the box
5. 5.🌈 Which colour is #00ffff? (a) red (b) white (c) blue (d) cyan
6. 6.✍️ Which property is set to yellow in this rule?
   p {
     padding: 8px;
     font-size: 20px;
     background-color: yellow;
     width: 300px;
   } (a) margin (b) background-color (c) padding (d) yellow
7. 7.🎯 What kind of selector is li? (a) an element selector (b) an id selector (c) a class selector
8. 8.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 240px;
     justify-content: flex-end;
   }
   Inside are 2 boxes, each 80px wide (no margins).
9. 9.✍️ How many declarations (property: value pairs) are in this rule?
   body {
     font-style: italic;
     background-color: yellow;
   }
10. 10.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      font-size: 20px;
    }
11. 11.Which of these is padding? (a) space outside the border (b) space inside the border (c) the text or picture (d) the gap to other boxes
12. 12.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) red (c) white (d) blue
13. 13.🌈 Which colour is #ff0000? (a) magenta (b) blue (c) white (d) red
14. 14.⚖️ What colour is the text of this element?
    <p class="menu" id="intro">Hi</p>
    CSS:
    #intro { color: green; }
    #intro { color: red; } (a) green (b) yellow (c) purple (d) red
15. 15.🎯 What kind of selector is .note? (a) an element selector (b) an id selector (c) a class selector
16. 16.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 32px;
      }
    }
17. 17.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 250px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 50px wide (no margins).
18. 18.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 99 (c) 1000 (d) 255
19. 19.🖌️ What colour are the letters?
    h2 {
      font-size: 20px;
      text-align: left;
      color: red;
      background-color: blue;
    } (a) blue (b) white (c) red
20. 20.What does justify-content: flex-start do? (a) packs boxes at the start (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the end
21. 21.💪 Which flexbox property spaces boxes along a row? (a) display: flex (b) flex-direction (c) align-items (d) justify-content
22. 22.🎯 What kind of selector is img? (a) an id selector (b) a class selector (c) an element selector
23. 23.Which of these does JavaScript do? (a) makes a form box (b) puts a picture on a page (c) makes headings and lists (d) reacts to a button click
24. 24.Which of these does HTML do? (a) puts a picture on a page (b) counts down a timer (c) rounds box corners (d) lays out the page
25. 25.🎨 Which attribute adds CSS inside one tag? (a) href (b) alt (c) src (d) style
26. 26.💪 Which justify-content value packs boxes at the start? (a) space-between (b) flex-end (c) center (d) flex-start
27. 27.📱 Responsive design means a page ___. (a) has no pictures (b) never changes (c) fits every screen (d) is only for laptops
28. 28.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    }
29. 29.🎨 What does CSS stand for? (a) Creative Sheet System (b) Computer Style Sheets (c) Cascading Style Sheets (d) Colourful Site Styles
30. 30.✍️ Which property is set to red in this rule?
    .note {
      color: red;
      font-weight: bold;
    } (a) red (b) color (c) font-size (d) text-align
31. 31.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
32. 32.🎯 Which sign starts a class selector? (a) & (b) . (c) # (d) @
33. 33.What does color do? (a) centres a heading (b) picks the font style (c) makes the text bold (d) sets the letter colour
34. 34.True or false: .big is a class selector. (a) True (b) False
35. 35.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the viewport meta tag (c) the hr tag (d) the br tag
36. 36.What does background-color do? (a) makes the text bold (b) sets the letter colour (c) colours behind the text (d) centres a heading
37. 37.✍️ Which property is set to 8px in this rule?
    #top {
      font-size: 20px;
      padding: 8px;
    } (a) border (b) 8px (c) font-weight (d) padding
38. 38.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 3 (b) 2 (c) 6 (d) 4
39. 39.🌈 Which colour is #00ff00? (a) yellow (b) bright green (c) red (d) black
40. 40.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) exactly 100px (c) turned off (d) 800px or narrower

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