CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 709 · 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 CSS selector matches this element?
   <h2 class="big" id="top">Hello</h2> (a) li (b) .red (c) #top (d) #big
2. 2.✍️ How many declarations (property: value pairs) are in this rule?
   body {
     font-style: italic;
     font-weight: bold;
     font-size: 20px;
   }
3. 3.✍️ Which property is set to 20px in this rule?
   h1 {
     padding: 8px;
     font-size: 20px;
   } (a) font-size (b) text-align (c) 20px (d) background-color
4. 4.🎯 What kind of selector is .star? (a) an id selector (b) an element selector (c) a class selector
5. 5.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 220px;
     justify-content: flex-end;
   }
   Inside are 4 boxes, each 40px wide (no margins).
6. 6.🌈 In #000065 the blue part is the hex number 65. What is it as a normal number?
7. 7.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 50px;
     padding: 10px;
     border: 5px solid black;
     margin: 0px;
   }
8. 8.📱 Responsive design means a page ___. (a) has no pictures (b) is only for laptops (c) fits every screen (d) never changes
9. 9.🖌️ Which CSS property makes letters bigger? (a) font-size (b) background-color (c) color (d) font-family
10. 10.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
11. 11.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      padding: 8px;
      font-size: 20px;
      color: red;
    }
12. 12.🧩 Which language makes a form box? (a) CSS (b) HTML (c) JavaScript
13. 13.🌈 Which colour is #ff0000? (a) white (b) yellow (c) black (d) red
14. 14.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 16px;
      }
    }
15. 15.📦 In the box model, which part is a solid or dotted edge? (a) border (b) content (c) padding (d) margin
16. 16.True or false: JavaScript changes the page live. (a) True (b) False
17. 17.Which of these is margin? (a) the line round the box (b) the text or picture (c) the gap to other boxes (d) space inside the border
18. 18.True or false: the content is the text or picture. (a) False (b) True
19. 19.⚖️ What colour is the text of this element?
    <p class="red" id="logo">Hi</p>
    CSS:
    p { color: blue; }
    p { color: orange; } (a) black (b) orange (c) red (d) blue
20. 20.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 14px;
      }
    }
21. 21.✍️ What value is given to font-style in this rule?
    #top {
      border: 2px solid;
      font-style: italic;
      font-weight: bold;
      font-size: 20px;
    } (a) font-style (b) italic (c) red (d) 20px
22. 22.🌈 In #rrggbb, which colour do the last two digits give? (a) blue (b) red (c) white (d) green
23. 23.🎯 Which CSS selector matches this element?
    <h2 class="box" id="hero">Hello</h2> (a) #box (b) .star (c) #hero (d) .hero
24. 24.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 140px;
      justify-content: center;
    }
    Inside are 2 boxes, each 60px wide (no margins).
25. 25.True or false: #top is an id selector. (a) True (b) False
26. 26.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 170px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 50px wide (no margins).
27. 27.🌈 Which colour is rgb(255, 0, 255)? (a) blue (b) white (c) cyan (d) magenta
28. 28.⚖️ What colour is the text of this element?
    <h1 class="menu" id="top">Hi</h1>
    CSS:
    h1 { color: green; }
    h1 { color: blue; } (a) yellow (b) green (c) purple (d) blue
29. 29.What does text-align do? (a) centres a heading (b) sets the letter colour (c) picks the font style (d) makes letters bigger
30. 30.✍️ Which sign goes between a property and its value? (a) ; (b) : (c) = (d) -
31. 31.🖌️ Where does the text sit on its line?
    li {
      text-align: left;
      background-color: blue;
      font-size: 16px;
      color: green;
    } (a) on the left (b) in the middle (c) on the right
32. 32.⚖️ What colour is the text of this element?
    <p class="red" id="hero">Hi</p>
    CSS:
    .red { color: purple; }
    .red { color: green; } (a) blue (b) green (c) purple (d) yellow
33. 33.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
34. 34.Which of these does JavaScript do? (a) rounds box corners (b) makes a form box (c) reacts to a button click (d) gives the page structure
35. 35.✍️ Which property is set to center in this rule?
    #top {
      color: red;
      text-align: center;
    } (a) center (b) margin (c) text-align (d) background-color
36. 36.📱 The screen is 414px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 8px;
      }
    } (a) Yes (b) No
37. 37.🧩 Which language makes headings and lists? (a) JavaScript (b) HTML (c) CSS
38. 38.🔍 Which is the odd one out? (a) changes the text size (b) adds space around boxes (c) makes headings and lists (d) lays out the page
39. 39.🎯 Which element does the selector h2 style? (a) <h2 class="box"> (b) <span id="logo"> (c) <li> (d) <div class="box">
40. 40.🎯 How many elements on a page should have the same id? (a) 2 (b) 1 (c) 5 (d) any number

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