CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 248 · 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.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 240px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 80px wide (no margins).
2. 2.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 90px;
     padding: 30px;
     border: 5px solid black;
     margin: 20px;
   }
3. 3.🎯 What kind of selector is #logo? (a) an id selector (b) a class selector (c) an element selector
4. 4.✍️ How many declarations (property: value pairs) are in this rule?
   #top {
     padding: 8px;
     font-style: italic;
     color: red;
   }
5. 5.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 60px;
     padding: 10px;
     border: 2px solid black;
     margin: 20px;
   }
6. 6.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 260px;
     justify-content: center;
   }
   Inside are 2 boxes, each 80px wide (no margins).
7. 7.🔍 Which is the odd one out? (a) adds space around boxes (b) gives the page structure (c) makes headings and lists (d) makes a link
8. 8.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 255 (c) 1000 (d) 99
9. 9.🖌️ How big is the text, in px?
   h2 {
     color: orange;
     background-color: purple;
     text-align: right;
     font-size: 12px;
   }
10. 10.🎯 Which sign starts a class selector? (a) # (b) @ (c) . (d) &
11. 11.✍️ Which property is set to italic in this rule?
    h1 {
      font-style: italic;
      padding: 8px;
      color: red;
    } (a) font-style (b) font-size (c) italic (d) color
12. 12.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
13. 13.True or false: p is a class selector. (a) False (b) True
14. 14.🎯 What kind of selector is li? (a) a class selector (b) an id selector (c) an element selector
15. 15.⚖️ Which selector is the strongest? (a) an element selector (b) an id selector (c) a class selector
16. 16.📱 Responsive design means a page ___. (a) is only for laptops (b) has no pictures (c) never changes (d) fits every screen
17. 17.🧩 Which language changes the text size? (a) JavaScript (b) CSS (c) HTML
18. 18.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      margin: 10px;
    }
19. 19.🖌️ What colour are the letters?
    h1 {
      font-size: 36px;
      text-align: left;
      color: purple;
      background-color: white;
    } (a) purple (b) white (c) black
20. 20.✍️ What is the selector in this CSS rule?
    li {
      font-weight: bold;
      padding: 8px;
      color: red;
      background-color: yellow;
    } (a) li (b) body (c) 8px (d) font-weight
21. 21.True or false: #top is a class selector. (a) True (b) False
22. 22.Which of these does JavaScript do? (a) adds space around boxes (b) rounds box corners (c) makes a form box (d) checks a quiz answer
23. 23.What does text-align do? (a) makes the text bold (b) centres a heading (c) sets the letter colour (d) colours behind the text
24. 24.✍️ Which sign goes between a property and its value? (a) ; (b) = (c) : (d) -
25. 25.📦 In the box model, which part is the gap round content? (a) padding (b) margin (c) border (d) content
26. 26.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the later one (c) the first one (d) the shorter one
27. 27.🌈 Which colour is #00ffff? (a) red (b) yellow (c) cyan (d) black
28. 28.What does color do? (a) centres a heading (b) picks the font style (c) colours behind the text (d) sets the letter colour
29. 29.✍️ In color: blue; which part is the property? (a) : (b) ; (c) color (d) blue
30. 30.✍️ How does a CSS comment start? (a) // (b) /* (c) # (d) <!--
31. 31.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 230px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 50px wide (no margins).
32. 32.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 26px;
      }
    } (a) Yes (b) No
33. 33.🎯 How many elements on a page should have the same id? (a) 2 (b) any number (c) 5 (d) 1
34. 34.True or false: the content is space inside the border. (a) True (b) False
35. 35.⚖️ What colour is the text of this element?
    <p class="star" id="top">Hi</p>
    CSS:
    p { color: blue; }
    p { color: yellow; } (a) green (b) orange (c) yellow (d) blue
36. 36.Which of these is padding? (a) the text or picture (b) a solid or dotted edge (c) the gap round content (d) space outside the border
37. 37.🎯 What kind of selector is img? (a) an id selector (b) a class selector (c) an element selector
38. 38.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 180px;
      padding: 25px;
      border: 5px solid black;
      margin: 0px;
    }
39. 39.🎯 Which CSS selector matches this element?
    <span class="box" id="main">Hello</span> (a) .star (b) p (c) #logo (d) #main
40. 40.Which of these is the border? (a) the line round the box (b) space outside the border (c) the gap round content (d) space inside the border

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