CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 684 · 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 language changes the page live? (a) HTML (b) JavaScript (c) CSS
2. 2.⚖️ What colour is the text of this element?
   <p class="menu" id="logo">Hi</p>
   CSS:
   #logo { color: yellow; }
   #logo { color: blue; } (a) black (b) blue (c) yellow (d) purple
3. 3.Which of these does JavaScript do? (a) makes a form box (b) lays out the page (c) rounds box corners (d) shows a pop-up message
4. 4.What does font-weight do? (a) makes the text bold (b) picks the font style (c) makes letters bigger (d) colours behind the text
5. 5.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) neither (c) the later one (d) the first one
6. 6.💪 Which flexbox property lines boxes up across? (a) display: flex (b) justify-content (c) gap (d) align-items
7. 7.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 6px;
     }
   }
8. 8.🎨 What does CSS stand for? (a) Creative Sheet System (b) Computer Style Sheets (c) Cascading Style Sheets (d) Colourful Site Styles
9. 9.💪 Which justify-content value packs boxes at the end? (a) flex-start (b) space-between (c) flex-end (d) center
10. 10.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
11. 11.Which of these does CSS do? (a) makes headings and lists (b) gives the page structure (c) counts down a timer (d) rounds box corners
12. 12.🧩 Which language rounds box corners? (a) JavaScript (b) HTML (c) CSS
13. 13.True or false: padding is space outside the border. (a) True (b) False
14. 14.🌈 In #00006c the blue part is the hex number 6c. What is it as a normal number?
15. 15.🎯 Which CSS selector matches this element?
    <span class="star" id="top">Hello</span> (a) #top (b) p (c) #intro (d) #star
16. 16.🌈 In #000048 the blue part is the hex number 48. What is it as a normal number?
17. 17.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 360px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 100px wide (no margins).
18. 18.🖌️ How big is the text, in px?
    h2 {
      font-size: 32px;
      background-color: orange;
      text-align: center;
      color: yellow;
    }
19. 19.✍️ Which property is set to 300px in this rule?
    .note {
      padding: 8px;
      font-weight: bold;
      width: 300px;
      font-style: italic;
    } (a) width (b) 300px (c) color (d) font-style
20. 20.What does font-size do? (a) colours behind the text (b) sets the letter colour (c) makes letters bigger (d) picks the font style
21. 21.⚖️ What colour is the text of this element?
    <p class="star" id="main">Hi</p>
    CSS:
    .star { color: white; }
    .star { color: red; } (a) black (b) purple (c) red (d) white
22. 22.Which of these is padding? (a) the line round the box (b) the gap to other boxes (c) the gap round content (d) the text or picture
23. 23.🖌️ Which CSS property picks the font style? (a) background-color (b) font-family (c) font-weight (d) text-align
24. 24.🎯 Which element does the selector h2 style? (a) <h2 class="star"> (b) <li> (c) <span id="main"> (d) <div class="star">
25. 25.🎯 What kind of selector is .menu? (a) an id selector (b) an element selector (c) a class selector
26. 26.🌈 In #00aa00 the green part is the hex number aa. What is it as a normal number?
27. 27.💪 Which justify-content value puts boxes in the middle? (a) flex-start (b) flex-end (c) space-between (d) center
28. 28.🔍 Which is the odd one out? (a) checks a quiz answer (b) changes the page live (c) counts down a timer (d) rounds box corners
29. 29.🎯 Which element does the selector .note style? (a) <p id="note"> (b) <p class="note"> (c) <p class="big"> (d) <h1 class="red">
30. 30.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) blue (c) black (d) red
31. 31.Which of these does JavaScript do? (a) adds space around boxes (b) rounds box corners (c) changes the page live (d) gives the page structure
32. 32.🔍 Which is the odd one out? (a) makes a link (b) makes a form box (c) changes the page live (d) makes headings and lists
33. 33.🧩 Which language lays out the page? (a) CSS (b) HTML (c) JavaScript
34. 34.🧩 Which language checks a quiz answer? (a) CSS (b) JavaScript (c) HTML
35. 35.🎯 Which sign starts an id selector? (a) & (b) . (c) @ (d) #
36. 36.Which of these is the content? (a) the gap round content (b) space outside the border (c) a solid or dotted edge (d) the text or picture
37. 37.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    } (a) No (b) Yes
38. 38.Which of these does CSS do? (a) puts a picture on a page (b) changes the page live (c) makes a link (d) changes the text size
39. 39.🎯 How many elements on a page should have the same id? (a) 1 (b) any number (c) 5 (d) 2
40. 40.⚖️ What colour is the text of this element?
    <p class="big" id="hero">Hi</p>
    CSS:
    #hero { color: white; }
    .big { color: purple; }
    p { color: yellow; } (a) green (b) purple (c) yellow (d) white

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