CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 179 · 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 much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 180px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 60px wide (no margins).
2. 2.🌈 Which colour is rgb(0, 255, 0)? (a) magenta (b) black (c) bright green (d) cyan
3. 3.🔍 Which is the odd one out? (a) changes the page live (b) gives the page structure (c) makes headings and lists (d) makes a link
4. 4.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 190px;
     justify-content: flex-end;
   }
   Inside are 2 boxes, each 80px wide (no margins).
5. 5.✍️ What value is given to border in this rule?
   .note {
     font-size: 20px;
     background-color: yellow;
     padding: 8px;
     border: 2px solid;
   } (a) border (b) 300px (c) 2px solid (d) italic
6. 6.🎯 Which element does the selector .menu style? (a) <div id="menu"> (b) <div class="menu"> (c) <div class="note"> (d) <span class="big">
7. 7.💪 Which justify-content value packs boxes at the start? (a) space-between (b) flex-start (c) flex-end (d) center
8. 8.🖌️ What colour is behind the letters?
   h2 {
     text-align: center;
     font-size: 16px;
     color: green;
     background-color: yellow;
   } (a) green (b) yellow (c) purple
9. 9.🎯 Which CSS selector matches this element?
   <h1 class="note" id="end">Hello</h1> (a) #note (b) .note (c) .end (d) .big
10. 10.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 460px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 100px wide (no margins).
11. 11.True or false: #hero is an id selector. (a) False (b) True
12. 12.🎨 One CSS file can style how many pages? (a) only one image (b) no pages (c) many pages (d) only one word
13. 13.Which of these does JavaScript do? (a) reacts to a button click (b) sets colours and fonts (c) rounds box corners (d) makes a form box
14. 14.🌈 Which colour is #ffff00? (a) magenta (b) yellow (c) red (d) bright green
15. 15.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
16. 16.✍️ What value is given to background-color in this rule?
    h2 {
      background-color: yellow;
      font-size: 20px;
      width: 300px;
      text-align: center;
    } (a) 8px (b) yellow (c) background-color (d) 10px
17. 17.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
18. 18.🎯 What kind of selector is #main? (a) an element selector (b) a class selector (c) an id selector
19. 19.True or false: the border is space outside the border. (a) True (b) False
20. 20.🖌️ Where does the text sit on its line?
    p {
      background-color: blue;
      text-align: right;
      color: purple;
      font-size: 40px;
    } (a) in the middle (b) on the left (c) on the right
21. 21.What does text-align do? (a) sets the letter colour (b) centres a heading (c) makes the text bold (d) makes letters bigger
22. 22.🌈 Which colour of light is strongest in rgb(92, 22, 217)? (a) green (b) red (c) blue
23. 23.⚖️ What colour is the text of this element?
    <h2 class="red" id="top">Hi</h2>
    CSS:
    .red { color: green; }
    .red { color: blue; } (a) green (b) yellow (c) red (d) blue
24. 24.🔍 Which is the odd one out? (a) sets colours and fonts (b) lays out the page (c) rounds box corners (d) makes headings and lists
25. 25.True or false: img is a class selector. (a) True (b) False
26. 26.True or false: img is an element selector. (a) False (b) True
27. 27.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Creative Sheet System (c) Cascading Style Sheets (d) Computer Style Sheets
28. 28.🖌️ What colour are the letters?
    h1 {
      background-color: blue;
      color: white;
      text-align: left;
      font-size: 36px;
    } (a) red (b) blue (c) white
29. 29.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      font-weight: bold;
      font-style: italic;
    }
30. 30.✍️ What value is given to font-size in this rule?
    h2 {
      background-color: yellow;
      font-weight: bold;
      font-size: 20px;
    } (a) center (b) font-size (c) yellow (d) 20px
31. 31.🌈 Which colour is rgb(0, 0, 0)? (a) yellow (b) red (c) black (d) white
32. 32.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 100px;
      padding: 20px;
      border: 3px solid black;
      margin: 15px;
    }
33. 33.🖌️ Where does the text sit on its line?
    h1 {
      background-color: yellow;
      text-align: center;
      color: orange;
      font-size: 12px;
    } (a) in the middle (b) on the left (c) on the right
34. 34.🖌️ What colour is behind the letters?
    h1 {
      text-align: left;
      color: black;
      font-size: 28px;
      background-color: blue;
    } (a) red (b) blue (c) black
35. 35.📱 Responsive design means a page ___. (a) fits every screen (b) has no pictures (c) is only for laptops (d) never changes
36. 36.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 30px;
      }
    }
37. 37.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) black (c) blue (d) green
38. 38.🌈 Which colour is #000000? (a) magenta (b) cyan (c) white (d) black
39. 39.🖌️ How big is the text, in px?
    h2 {
      font-size: 20px;
      background-color: yellow;
      color: blue;
      text-align: center;
    }
40. 40.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No

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