CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 698 · 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 JavaScript do? (a) makes a link (b) changes the text size (c) shows a pop-up message (d) puts a picture on a page
2. 2.📦 In the box model, which part is space outside the border? (a) content (b) border (c) margin (d) padding
3. 3.✍️ Which sign goes between a property and its value? (a) - (b) ; (c) = (d) :
4. 4.True or false: p is an id selector. (a) True (b) False
5. 5.💪 Which justify-content value packs boxes at the end? (a) space-between (b) flex-end (c) flex-start (d) center
6. 6.🎯 What kind of selector is #main? (a) an id selector (b) an element selector (c) a class selector
7. 7.🖌️ How big is the text, in px?
   h1 {
     background-color: blue;
     font-size: 20px;
     color: black;
     text-align: center;
   }
8. 8.💪 Which justify-content value packs boxes at the start? (a) center (b) space-between (c) flex-end (d) flex-start
9. 9.🌈 Which colour of light is strongest in rgb(57, 138, 240)? (a) red (b) green (c) blue
10. 10.🔍 Which is the odd one out? (a) puts a picture on a page (b) lays out the page (c) gives the page structure (d) makes a link
11. 11.Which of these does HTML do? (a) shows a pop-up message (b) sets colours and fonts (c) makes a link (d) changes the text size
12. 12.🌈 In #006800 the green part is the hex number 68. What is it as a normal number?
13. 13.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
14. 14.What does background-color do? (a) makes letters bigger (b) picks the font style (c) colours behind the text (d) makes the text bold
15. 15.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 210px;
      padding: 20px;
      border: 1px solid black;
      margin: 5px;
    }
16. 16.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      padding: 8px;
      width: 300px;
    }
17. 17.⚖️ What colour is the text of this element?
    <p class="note" id="main">Hi</p>
    CSS:
    #main { color: blue; }
    #main { color: white; } (a) green (b) blue (c) red (d) white
18. 18.⚖️ What colour is the text of this element?
    <p class="note" id="top">Hi</p>
    CSS:
    p { color: orange; }
    #top { color: black; } (a) black (b) red (c) orange (d) blue
19. 19.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      border: 2px solid;
      width: 300px;
    }
20. 20.True or false: img is an element selector. (a) True (b) False
21. 21.🧩 Which language counts down a timer? (a) CSS (b) HTML (c) JavaScript
22. 22.🎯 Which CSS selector matches this element?
    <p class="big" id="top">Hello</p> (a) #big (b) h1 (c) .big (d) .top
23. 23.🌈 Which colour is #ff00ff? (a) magenta (b) red (c) cyan (d) black
24. 24.⚖️ What colour is the text of this element?
    <h1 class="note" id="logo">Hi</h1>
    CSS:
    h1 { color: yellow; }
    #logo { color: green; }
    .note { color: purple; } (a) purple (b) green (c) yellow (d) blue
25. 25.🎯 Which CSS selector matches this element?
    <h1 class="box" id="intro">Hello</h1> (a) #main (b) h1 (c) .intro (d) .star
26. 26.🖌️ How big is the text, in px?
    h1 {
      text-align: center;
      color: yellow;
      font-size: 32px;
      background-color: black;
    }
27. 27.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the later one (c) the first one (d) neither
28. 28.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 20px;
      }
    }
29. 29.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    }
30. 30.Which of these is padding? (a) a solid or dotted edge (b) the gap to other boxes (c) the text or picture (d) the gap round content
31. 31.🔍 Which is the odd one out? (a) sets colours and fonts (b) gives the page structure (c) makes a link (d) makes headings and lists
32. 32.🔍 Which is the odd one out? (a) adds space around boxes (b) puts a picture on a page (c) rounds box corners (d) sets colours and fonts
33. 33.🖌️ What colour is behind the letters?
    p {
      text-align: center;
      font-size: 12px;
      color: yellow;
      background-color: red;
    } (a) red (b) yellow (c) purple
34. 34.🔍 Which is the odd one out? (a) makes a link (b) makes headings and lists (c) puts a picture on a page (d) changes the text size
35. 35.⚖️ What colour is the text of this element?
    <p class="big" id="top">Hi</p>
    CSS:
    p { color: black; }
    #top { color: green; } (a) red (b) purple (c) black (d) green
36. 36.✍️ How does a CSS comment start? (a) <!-- (b) // (c) # (d) /*
37. 37.✍️ In color: blue; which part is the property? (a) color (b) blue (c) : (d) ;
38. 38.🖌️ Where does the text sit on its line?
    h2 {
      background-color: yellow;
      font-size: 32px;
      color: white;
      text-align: center;
    } (a) on the right (b) on the left (c) in the middle
39. 39.🎨 Which tag connects an outside CSS file? (a) <css> (b) <a> (c) <img> (d) <link>
40. 40.What does justify-content: flex-start do? (a) packs boxes at the end (b) equal gaps, none at ends (c) packs boxes at the start (d) puts boxes in the middle

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