CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 682 · 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 is the odd one out? (a) puts a picture on a page (b) shows a pop-up message (c) checks a quiz answer (d) reacts to a button click
2. 2.🎯 What kind of selector is #hero? (a) an element selector (b) an id selector (c) a class selector
3. 3.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 220px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 50px wide (no margins).
4. 4.✍️ How many declarations (property: value pairs) are in this rule?
   li {
     font-style: italic;
     padding: 8px;
     font-size: 20px;
     width: 300px;
   }
5. 5.🧩 Which language shows a pop-up message? (a) HTML (b) CSS (c) JavaScript
6. 6.🎯 Which CSS selector matches this element?
   <span class="big" id="intro">Hello</span> (a) #big (b) #main (c) .red (d) span
7. 7.✍️ In color: blue; which part is the property? (a) : (b) ; (c) blue (d) color
8. 8.✍️ CSS declarations go inside which brackets? (a) { } (b) < > (c) ( ) (d) [ ]
9. 9.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (min-width: 1024px) {
     p {
       font-size: 30px;
     }
   }
10. 10.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      background-color: yellow;
      font-size: 20px;
      text-align: center;
      font-weight: bold;
    }
11. 11.🌈 Which colour is #ff0000? (a) black (b) bright green (c) red (d) yellow
12. 12.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 16px;
      }
    } (a) Yes (b) No
13. 13.⚖️ 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
14. 14.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
15. 15.Which of these does JavaScript do? (a) gives the page structure (b) sets colours and fonts (c) makes a link (d) changes the page live
16. 16.What does justify-content: space-between do? (a) packs boxes at the start (b) packs boxes at the end (c) puts boxes in the middle (d) equal gaps, none at ends
17. 17.🖌️ What colour are the letters?
    h1 {
      font-size: 40px;
      color: yellow;
      text-align: right;
      background-color: white;
    } (a) purple (b) white (c) yellow
18. 18.🧩 Which language changes the page live? (a) HTML (b) JavaScript (c) CSS
19. 19.Which of these is margin? (a) the text or picture (b) the gap round content (c) space inside the border (d) the gap to other boxes
20. 20.🎨 What does CSS stand for? (a) Creative Sheet System (b) Cascading Style Sheets (c) Computer Style Sheets (d) Colourful Site Styles
21. 21.🎯 Which element does the selector .red style? (a) <p class="box"> (b) <p class="red"> (c) <p id="red"> (d) <h1 class="star">
22. 22.🎯 Which CSS selector matches this element?
    <div class="note" id="end">Hello</div> (a) span (b) #note (c) #hero (d) #end
23. 23.True or false: CSS gives the page structure. (a) True (b) False
24. 24.📦 In the box model, which part is the gap to other boxes? (a) padding (b) content (c) margin (d) border
25. 25.True or false: JavaScript shows a pop-up message. (a) False (b) True
26. 26.🖌️ What colour is behind the letters?
    li {
      font-size: 40px;
      text-align: right;
      color: green;
      background-color: blue;
    } (a) blue (b) yellow (c) green
27. 27.🔍 Which is the odd one out? (a) makes a link (b) puts a picture on a page (c) makes a form box (d) changes the text size
28. 28.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 16px;
      }
    } (a) No (b) Yes
29. 29.⚖️ What colour is the text of this element?
    <p class="big" id="hero">Hi</p>
    CSS:
    #hero { color: white; }
    p { color: blue; } (a) blue (b) orange (c) green (d) white
30. 30.📱 What does a media query check? (a) the page title (b) the battery level (c) the time of day (d) the screen width
31. 31.🧩 Which language makes headings and lists? (a) HTML (b) CSS (c) JavaScript
32. 32.🎨 One CSS file can style how many pages? (a) only one word (b) many pages (c) only one image (d) no pages
33. 33.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 40px;
      padding: 10px;
      border: 4px solid black;
      margin: 0px;
    }
34. 34.🖌️ Which CSS property sets the letter colour? (a) font-family (b) color (c) font-size (d) background-color
35. 35.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 10px;
      }
    }
36. 36.✍️ How does a CSS comment start? (a) <!-- (b) /* (c) # (d) //
37. 37.📦 In the box model, which part is space inside the border? (a) margin (b) content (c) border (d) padding
38. 38.Which of these does HTML do? (a) checks a quiz answer (b) counts down a timer (c) rounds box corners (d) puts a picture on a page
39. 39.💪 Which flexbox property lines boxes up across? (a) gap (b) align-items (c) justify-content (d) flex-direction
40. 40.✍️ What is the selector in this CSS rule?
    .box {
      color: red;
      font-style: italic;
      border: 2px solid;
    } (a) h2 (b) italic (c) .box (d) color

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