CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 555 · 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 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 10px;
     }
   } (a) No (b) Yes
2. 2.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) 600px or narrower (c) turned off (d) exactly 1000px
3. 3.🌈 In #006800 the green part is the hex number 68. What is it as a normal number?
4. 4.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 10px;
     }
   }
5. 5.🌈 Which colour is rgb(255, 0, 255)? (a) black (b) magenta (c) white (d) bright green
6. 6.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 250px;
     padding: 5px;
     border: 5px solid black;
     margin: 10px;
   }
7. 7.⚖️ What colour is the text of this element?
   <h1 class="menu" id="intro">Hi</h1>
   CSS:
   #intro { color: black; }
   #intro { color: blue; } (a) black (b) green (c) blue (d) yellow
8. 8.🖌️ What colour is behind the letters?
   h2 {
     color: red;
     font-size: 36px;
     background-color: white;
     text-align: left;
   } (a) green (b) red (c) white
9. 9.✍️ Which property is set to 2px solid in this rule?
   h2 {
     font-size: 20px;
     font-weight: bold;
     color: red;
     border: 2px solid;
   } (a) width (b) 2px solid (c) font-style (d) border
10. 10.🎯 Which CSS selector matches this element?
    <span class="star" id="end">Hello</span> (a) .end (b) #star (c) p (d) #end
11. 11.✍️ Which sign goes between a property and its value? (a) ; (b) : (c) - (d) =
12. 12.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) neither (c) the shorter one (d) the first one
13. 13.What does font-weight do? (a) picks the font style (b) sets the letter colour (c) makes letters bigger (d) makes the text bold
14. 14.Which of these is the border? (a) the line round the box (b) space inside the border (c) the gap round content (d) the text or picture
15. 15.✍️ What value is given to color in this rule?
    #top {
      font-weight: bold;
      color: red;
      font-size: 20px;
    } (a) center (b) color (c) red (d) 20px
16. 16.⚖️ What colour is the text of this element?
    <h1 class="note" id="intro">Hi</h1>
    CSS:
    h1 { color: yellow; }
    h1 { color: red; } (a) green (b) red (c) purple (d) yellow
17. 17.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 50px;
      padding: 30px;
      border: 5px solid black;
      margin: 0px;
    }
18. 18.🎯 How many elements on a page should have the same id? (a) 2 (b) any number (c) 5 (d) 1
19. 19.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 25px;
      border: 2px solid black;
      margin: 0px;
    }
20. 20.⚖️ What colour is the text of this element?
    <h1 class="star" id="main">Hi</h1>
    CSS:
    #main { color: orange; }
    .star { color: black; } (a) orange (b) blue (c) black (d) white
21. 21.💪 Which justify-content value packs boxes at the start? (a) flex-start (b) center (c) flex-end (d) space-between
22. 22.🎯 Which element does the selector h1 style? (a) <h2> (b) <h1 class="red"> (c) <div id="intro"> (d) <li class="red">
23. 23.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
24. 24.📱 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;
      }
    }
25. 25.True or false: padding is the gap to other boxes. (a) False (b) True
26. 26.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the hr tag (c) the viewport meta tag (d) the br tag
27. 27.📦 In the box model, which part is the line round the box? (a) margin (b) content (c) padding (d) border
28. 28.🌈 In #0000ad the blue part is the hex number ad. What is it as a normal number?
29. 29.⚖️ What colour is the text of this element?
    <h1 class="box" id="top">Hi</h1>
    CSS:
    h1 { color: green; }
    h1 { color: blue; } (a) green (b) blue (c) black (d) purple
30. 30.✍️ Which property is set to 2px solid in this rule?
    li {
      border: 2px solid;
      background-color: yellow;
    } (a) 2px solid (b) font-style (c) width (d) border
31. 31.What does justify-content: flex-start do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the end (d) packs boxes at the start
32. 32.True or false: HTML makes a form box. (a) False (b) True
33. 33.🔍 Which is the odd one out? (a) makes headings and lists (b) gives the page structure (c) rounds box corners (d) makes a link
34. 34.🎨 A CSS file usually ends with which extension? (a) .js (b) .css (c) .html (d) .png
35. 35.What does font-family do? (a) picks the font style (b) makes letters bigger (c) makes the text bold (d) sets the letter colour
36. 36.✍️ What is the selector in this CSS rule?
    h2 {
      padding: 8px;
      width: 300px;
    } (a) h2 (b) h1 (c) 300px (d) padding
37. 37.🎯 Which sign starts a class selector? (a) & (b) @ (c) . (d) #
38. 38.True or false: #logo is an id selector. (a) True (b) False
39. 39.🖌️ Which CSS property sets the letter colour? (a) text-align (b) font-weight (c) font-family (d) color
40. 40.✍️ CSS declarations go inside which brackets? (a) < > (b) { } (c) [ ] (d) ( )

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