CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 695 · 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.📱 The screen is 820px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 22px;
     }
   } (a) Yes (b) No
2. 2.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 6px;
     }
   } (a) No (b) Yes
3. 3.📱 The screen is 820px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 20px;
     }
   } (a) Yes (b) No
4. 4.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 110px;
     justify-content: flex-end;
   }
   Inside are 2 boxes, each 50px wide (no margins).
5. 5.What does font-size do? (a) makes the text bold (b) makes letters bigger (c) colours behind the text (d) sets the letter colour
6. 6.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) the shorter one (c) the first one (d) neither
7. 7.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 300px;
     justify-content: space-between;
   }
   Inside are 4 boxes, each 60px wide (no margins).
8. 8.⚖️ What colour is the text of this element?
   <p class="big" id="top">Hi</p>
   CSS:
   .big { color: blue; }
   .big { color: yellow; } (a) purple (b) yellow (c) blue (d) orange
9. 9.🎯 How many elements on a page should have the same id? (a) 2 (b) any number (c) 5 (d) 1
10. 10.💪 Which justify-content value equal gaps, none at ends? (a) center (b) space-between (c) flex-end (d) flex-start
11. 11.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 18px;
      }
    }
12. 12.What does justify-content: flex-end do? (a) puts boxes in the middle (b) packs boxes at the end (c) equal gaps, none at ends (d) packs boxes at the start
13. 13.🎯 Which CSS selector matches this element?
    <li class="menu" id="top">Hello</li> (a) .menu (b) #intro (c) #menu (d) .note
14. 14.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 270px;
      padding: 5px;
      border: 1px solid black;
      margin: 0px;
    }
15. 15.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 280px;
      padding: 30px;
      border: 2px solid black;
      margin: 20px;
    }
16. 16.Which of these is padding? (a) the gap round content (b) the text or picture (c) the line round the box (d) space outside the border
17. 17.🎨 What does CSS stand for? (a) Creative Sheet System (b) Computer Style Sheets (c) Cascading Style Sheets (d) Colourful Site Styles
18. 18.📱 What does a media query check? (a) the battery level (b) the time of day (c) the screen width (d) the page title
19. 19.🖌️ What colour is behind the letters?
    p {
      font-size: 20px;
      background-color: red;
      color: blue;
      text-align: left;
    } (a) red (b) blue (c) orange
20. 20.🎨 Which tag connects an outside CSS file? (a) <img> (b) <css> (c) <a> (d) <link>
21. 21.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 90px;
      padding: 25px;
      border: 5px solid black;
      margin: 0px;
    }
22. 22.🌈 Hex digits go 0 to 9, then A to which letter? (a) Z (b) G (c) J (d) F
23. 23.✍️ What is the selector in this CSS rule?
    .box {
      font-weight: bold;
      width: 300px;
      text-align: center;
      font-size: 20px;
    } (a) .box (b) h2 (c) font-weight (d) 300px
24. 24.🔍 Which is the odd one out? (a) sets colours and fonts (b) rounds box corners (c) checks a quiz answer (d) lays out the page
25. 25.🔍 Which is the odd one out? (a) makes a form box (b) shows a pop-up message (c) makes a link (d) gives the page structure
26. 26.🌈 Which colour of light is strongest in rgb(207, 11, 120)? (a) blue (b) green (c) red
27. 27.🌈 Which colour of light is strongest in rgb(113, 107, 155)? (a) green (b) blue (c) red
28. 28.Which of these does HTML do? (a) makes headings and lists (b) changes the text size (c) adds space around boxes (d) counts down a timer
29. 29.🌈 Which hex code is bright green? (a) #000000 (b) #ffffff (c) #00ff00 (d) #00ffff
30. 30.🌈 In #170000 the red part is the hex number 17. What is it as a normal number?
31. 31.✍️ Which property is set to yellow in this rule?
    body {
      font-weight: bold;
      width: 300px;
      background-color: yellow;
    } (a) yellow (b) background-color (c) margin (d) padding
32. 32.Which of these does HTML do? (a) reacts to a button click (b) changes the text size (c) checks a quiz answer (d) puts a picture on a page
33. 33.🌈 Which colour is #000000? (a) blue (b) cyan (c) white (d) black
34. 34.✍️ Which property is set to italic in this rule?
    #top {
      font-style: italic;
      border: 2px solid;
    } (a) color (b) italic (c) font-style (d) font-size
35. 35.✍️ What is the selector in this CSS rule?
    #top {
      font-weight: bold;
      background-color: yellow;
    } (a) font-weight (b) li (c) #top (d) yellow
36. 36.🔍 Which is the odd one out? (a) reacts to a button click (b) rounds box corners (c) sets colours and fonts (d) changes the text size
37. 37.🎯 What kind of selector is li? (a) an id selector (b) a class selector (c) an element selector
38. 38.🖌️ How big is the text, in px?
    h1 {
      text-align: left;
      background-color: orange;
      color: blue;
      font-size: 24px;
    }
39. 39.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    }
40. 40.🎯 Which CSS selector matches this element?
    <span class="red" id="main">Hello</span> (a) p (b) span (c) #logo (d) #red

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