CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 41 · 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.True or false: CSS rounds box corners. (a) True (b) False
2. 2.True or false: margin is space outside the border. (a) True (b) False
3. 3.⚖️ What colour is the text of this element?
   <p class="red" id="end">Hi</p>
   CSS:
   .red { color: red; }
   #end { color: yellow; }
   p { color: green; } (a) green (b) yellow (c) red (d) black
4. 4.Which of these is the content? (a) the gap to other boxes (b) the gap round content (c) the text or picture (d) a solid or dotted edge
5. 5.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 24px;
     }
   }
6. 6.✍️ How many declarations (property: value pairs) are in this rule?
   li {
     font-weight: bold;
     background-color: yellow;
     color: red;
     width: 300px;
   }
7. 7.💪 Which justify-content value equal gaps, none at ends? (a) flex-start (b) center (c) flex-end (d) space-between
8. 8.🎯 How many elements on a page should have the same id? (a) 2 (b) 1 (c) any number (d) 5
9. 9.🖌️ Which CSS property makes the text bold? (a) text-align (b) font-size (c) font-family (d) font-weight
10. 10.✍️ In color: blue; which part is the property? (a) blue (b) ; (c) : (d) color
11. 11.🌈 Which colour is rgb(0, 255, 0)? (a) cyan (b) red (c) bright green (d) white
12. 12.🌈 In #rrggbb, which colour do the last two digits give? (a) blue (b) white (c) green (d) red
13. 13.✍️ What is the selector in this CSS rule?
    p {
      border: 2px solid;
      background-color: yellow;
    } (a) p (b) border (c) .note (d) yellow
14. 14.🎨 Which tag connects an outside CSS file? (a) <link> (b) <css> (c) <a> (d) <img>
15. 15.What does text-align do? (a) centres a heading (b) sets the letter colour (c) picks the font style (d) makes the text bold
16. 16.True or false: CSS lays out the page. (a) True (b) False
17. 17.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 240px;
      padding: 15px;
      border: 2px solid black;
      margin: 20px;
    }
18. 18.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      color: red;
      font-size: 20px;
      text-align: center;
      border: 2px solid;
    }
19. 19.What does font-size do? (a) colours behind the text (b) makes letters bigger (c) centres a heading (d) picks the font style
20. 20.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      font-weight: bold;
    }
21. 21.🧩 Which language shows a pop-up message? (a) HTML (b) JavaScript (c) CSS
22. 22.🌈 In #007e00 the green part is the hex number 7e. What is it as a normal number?
23. 23.🧩 Which language reacts to a button click? (a) JavaScript (b) CSS (c) HTML
24. 24.📱 Responsive design means a page ___. (a) never changes (b) has no pictures (c) is only for laptops (d) fits every screen
25. 25.🔍 Which is the odd one out? (a) reacts to a button click (b) adds space around boxes (c) checks a quiz answer (d) shows a pop-up message
26. 26.🖌️ Which CSS property makes letters bigger? (a) font-size (b) background-color (c) font-weight (d) text-align
27. 27.🎯 What kind of selector is #main? (a) an element selector (b) an id selector (c) a class selector
28. 28.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 50px wide (no margins).
29. 29.🎨 A CSS file usually ends with which extension? (a) .png (b) .css (c) .js (d) .html
30. 30.✍️ Which sign goes between a property and its value? (a) ; (b) : (c) - (d) =
31. 31.⚖️ What colour is the text of this element?
    <h2 class="menu" id="end">Hi</h2>
    CSS:
    .menu { color: blue; }
    .menu { color: orange; } (a) black (b) orange (c) blue (d) green
32. 32.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 320px;
      justify-content: center;
    }
    Inside are 4 boxes, each 50px wide (no margins).
33. 33.⚖️ What colour is the text of this element?
    <p class="red" id="intro">Hi</p>
    CSS:
    .red { color: red; }
    #intro { color: blue; } (a) red (b) white (c) yellow (d) blue
34. 34.Which of these does JavaScript do? (a) rounds box corners (b) checks a quiz answer (c) makes headings and lists (d) gives the page structure
35. 35.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 260px;
      justify-content: center;
    }
    Inside are 2 boxes, each 60px wide (no margins).
36. 36.🖌️ How big is the text, in px?
    h2 {
      color: green;
      background-color: red;
      text-align: right;
      font-size: 28px;
    }
37. 37.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) exactly 100px (c) turned off (d) 800px or wider
38. 38.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 30px;
      }
    }
39. 39.⚖️ What colour is the text of this element?
    <h2 class="box" id="intro">Hi</h2>
    CSS:
    h2 { color: green; }
    h2 { color: white; } (a) yellow (b) green (c) red (d) white
40. 40.🎯 Which element does the selector #top style? (a) <p class="top"> (b) <p id="intro"> (c) <p id="top"> (d) <h1 class="menu">

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