CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 485 · 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.⚖️ What colour is the text of this element?
   <h2 class="big" id="intro">Hi</h2>
   CSS:
   h2 { color: yellow; }
   h2 { color: purple; } (a) yellow (b) purple (c) black (d) green
2. 2.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 22px;
     }
   }
3. 3.⚖️ What colour is the text of this element?
   <h2 class="big" id="logo">Hi</h2>
   CSS:
   h2 { color: orange; }
   #logo { color: red; } (a) black (b) green (c) red (d) orange
4. 4.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 100px;
     padding: 5px;
     border: 3px solid black;
     margin: 5px;
   }
5. 5.⚖️ What colour is the text of this element?
   <p class="menu" id="logo">Hi</p>
   CSS:
   p { color: black; }
   #logo { color: purple; }
   .menu { color: red; } (a) blue (b) purple (c) red (d) black
6. 6.🎯 Which CSS selector matches this element?
   <p class="red" id="logo">Hello</p> (a) #red (b) p (c) .logo (d) .box
7. 7.🧩 Which language rounds box corners? (a) HTML (b) CSS (c) JavaScript
8. 8.What does color do? (a) centres a heading (b) sets the letter colour (c) makes letters bigger (d) makes the text bold
9. 9.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 210px;
     padding: 30px;
     border: 1px solid black;
     margin: 10px;
   }
10. 10.⚖️ What colour is the text of this element?
    <h1 class="red" id="logo">Hi</h1>
    CSS:
    .red { color: purple; }
    h1 { color: white; }
    #logo { color: blue; } (a) purple (b) white (c) black (d) blue
11. 11.🔍 Which is the odd one out? (a) makes a link (b) lays out the page (c) sets colours and fonts (d) adds space around boxes
12. 12.📱 Responsive design means a page ___. (a) fits every screen (b) never changes (c) is only for laptops (d) has no pictures
13. 13.🌈 In #00fc00 the green part is the hex number fc. What is it as a normal number?
14. 14.🎨 Which tag connects an outside CSS file? (a) <css> (b) <a> (c) <link> (d) <img>
15. 15.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 120px;
      padding: 20px;
      border: 4px solid black;
      margin: 0px;
    }
16. 16.What does font-family do? (a) makes the text bold (b) picks the font style (c) sets the letter colour (d) colours behind the text
17. 17.True or false: .menu is an id selector. (a) True (b) False
18. 18.✍️ What is the selector in this CSS rule?
    p {
      font-weight: bold;
      color: red;
      width: 300px;
      background-color: yellow;
    } (a) font-weight (b) red (c) .note (d) p
19. 19.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 140px;
      padding: 5px;
      border: 5px solid black;
      margin: 15px;
    }
20. 20.🌈 Which hex code is black? (a) #ff00ff (b) #ffffff (c) #000000 (d) #0000ff
21. 21.Which of these is margin? (a) a solid or dotted edge (b) the gap round content (c) space outside the border (d) the line round the box
22. 22.✍️ What value is given to font-weight in this rule?
    li {
      border: 2px solid;
      font-weight: bold;
    } (a) 2px solid (b) font-weight (c) 300px (d) bold
23. 23.✍️ Which sign goes between a property and its value? (a) : (b) ; (c) = (d) -
24. 24.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 30px;
      }
    } (a) No (b) Yes
25. 25.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) exactly 100px (c) 800px or wider (d) turned off
26. 26.🌈 Which colour is #0000ff? (a) blue (b) magenta (c) black (d) cyan
27. 27.✍️ What is the selector in this CSS rule?
    .box {
      text-align: center;
      font-style: italic;
    } (a) h2 (b) .box (c) text-align (d) italic
28. 28.🌈 Which hex code is bright green? (a) #000000 (b) #00ffff (c) #00ff00 (d) #ff00ff
29. 29.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 26px;
      }
    }
30. 30.⚖️ Which selector is the weakest? (a) a class selector (b) an id selector (c) an element selector
31. 31.🌈 Which hex code is magenta? (a) #ff00ff (b) #0000ff (c) #ff0000 (d) #00ffff
32. 32.🧩 Which language puts a picture on a page? (a) CSS (b) HTML (c) JavaScript
33. 33.🎯 Which sign starts a class selector? (a) # (b) & (c) @ (d) .
34. 34.Which of these does JavaScript do? (a) makes headings and lists (b) shows a pop-up message (c) changes the text size (d) lays out the page
35. 35.Which of these is the content? (a) the gap to other boxes (b) space outside the border (c) space inside the border (d) the text or picture
36. 36.🌈 Which colour is rgb(0, 0, 255)? (a) red (b) bright green (c) yellow (d) blue
37. 37.🖌️ What colour is behind the letters?
    h1 {
      background-color: blue;
      font-size: 24px;
      text-align: right;
      color: orange;
    } (a) green (b) blue (c) orange
38. 38.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 22px;
      }
    }
39. 39.Which of these does HTML do? (a) lays out the page (b) reacts to a button click (c) sets colours and fonts (d) makes headings and lists
40. 40.✍️ What is the selector in this CSS rule?
    h2 {
      padding: 8px;
      text-align: center;
      width: 300px;
    } (a) center (b) h2 (c) padding (d) h1

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