CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 74 · 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 is the selector in this CSS rule?
   h1 {
     font-size: 20px;
     width: 300px;
   } (a) 300px (b) h1 (c) p (d) font-size
2. 2.🌈 Which colour is #0000ff? (a) magenta (b) cyan (c) blue (d) bright green
3. 3.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 170px;
     padding: 20px;
     border: 2px solid black;
     margin: 20px;
   }
4. 4.🎯 Which element does the selector #end style? (a) <li class="end"> (b) <div class="box"> (c) <li id="end"> (d) <li id="hero">
5. 5.True or false: body is a class selector. (a) False (b) True
6. 6.✍️ What value is given to padding in this rule?
   .note {
     width: 300px;
     font-style: italic;
     font-weight: bold;
     padding: 8px;
   } (a) padding (b) bold (c) 2px solid (d) 8px
7. 7.Which of these is margin? (a) the line round the box (b) a solid or dotted edge (c) space outside the border (d) the text or picture
8. 8.✍️ In color: blue; which part is the property? (a) blue (b) : (c) color (d) ;
9. 9.Which of these does HTML do? (a) checks a quiz answer (b) shows a pop-up message (c) makes a link (d) changes the text size
10. 10.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
11. 11.📱 What does a media query check? (a) the page title (b) the time of day (c) the screen width (d) the battery level
12. 12.🌈 Which hex code is red? (a) #00ff00 (b) #ff00ff (c) #ff0000 (d) #0000ff
13. 13.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
14. 14.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 70px;
      padding: 10px;
      border: 4px solid black;
      margin: 20px;
    }
15. 15.🖌️ Which CSS property makes the text bold? (a) background-color (b) font-weight (c) text-align (d) font-size
16. 16.🧩 Which language makes headings and lists? (a) CSS (b) JavaScript (c) HTML
17. 17.🌈 Which colour is rgb(0, 0, 0)? (a) red (b) yellow (c) bright green (d) black
18. 18.🎨 A CSS file usually ends with which extension? (a) .png (b) .html (c) .js (d) .css
19. 19.True or false: JavaScript gives the page structure. (a) False (b) True
20. 20.🖌️ How big is the text, in px?
    h2 {
      font-size: 28px;
      color: yellow;
      text-align: center;
      background-color: black;
    }
21. 21.True or false: .big is an element selector. (a) False (b) True
22. 22.✍️ CSS declarations go inside which brackets? (a) < > (b) [ ] (c) ( ) (d) { }
23. 23.📦 In the box model, which part is space outside the border? (a) border (b) margin (c) content (d) padding
24. 24.🎯 Which element does the selector .box style? (a) <h2 class="menu"> (b) <h1 id="box"> (c) <h1 class="box"> (d) <h1 class="star">
25. 25.✍️ How does a CSS comment start? (a) # (b) <!-- (c) // (d) /*
26. 26.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      width: 300px;
      margin: 10px;
    }
27. 27.⚖️ What colour is the text of this element?
    <h1 class="big" id="top">Hi</h1>
    CSS:
    #top { color: black; }
    h1 { color: blue; }
    .big { color: orange; } (a) blue (b) green (c) orange (d) black
28. 28.🌈 Which hex code is white? (a) #ff00ff (b) #000000 (c) #ff0000 (d) #ffffff
29. 29.🖌️ How big is the text, in px?
    h1 {
      font-size: 36px;
      background-color: blue;
      text-align: left;
      color: red;
    }
30. 30.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
31. 31.🎯 Which sign starts a class selector? (a) # (b) . (c) @ (d) &
32. 32.🔍 Which is the odd one out? (a) reacts to a button click (b) makes headings and lists (c) changes the page live (d) shows a pop-up message
33. 33.Which of these is the content? (a) the text or picture (b) the gap round content (c) the line round the box (d) space inside the border
34. 34.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
35. 35.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 140px;
      justify-content: center;
    }
    Inside are 2 boxes, each 50px wide (no margins).
36. 36.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 140px;
      padding: 10px;
      border: 2px solid black;
      margin: 0px;
    }
37. 37.✍️ Which sign goes between a property and its value? (a) : (b) - (c) ; (d) =
38. 38.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 20px;
      }
    }
39. 39.🌈 Which hex code is black? (a) #000000 (b) #ffff00 (c) #00ff00 (d) #ff0000
40. 40.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      width: 300px;
      background-color: yellow;
      color: red;
    }

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