CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 3 · 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 before the first box?
   .row {
     display: flex;
     width: 280px;
     justify-content: center;
   }
   Inside are 2 boxes, each 60px wide (no margins).
2. 2.True or false: JavaScript gives the page structure. (a) True (b) False
3. 3.Which of these is the border? (a) the gap round content (b) the gap to other boxes (c) the text or picture (d) the line round the box
4. 4.🌈 Which colour is rgb(255, 0, 0)? (a) red (b) yellow (c) bright green (d) blue
5. 5.🎯 Which CSS selector matches this element?
   <h2 class="note" id="end">Hello</h2> (a) .end (b) .big (c) #hero (d) h2
6. 6.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 80px;
     padding: 5px;
     border: 3px solid black;
     margin: 15px;
   }
7. 7.🌈 In #800000 the red part is the hex number 80. What is it as a normal number?
8. 8.✍️ Which sign goes between a property and its value? (a) ; (b) - (c) = (d) :
9. 9.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 3 (b) 6 (c) 2 (d) 4
10. 10.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 440px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 100px wide (no margins).
11. 11.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 150px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 60px wide (no margins).
12. 12.🔍 Which is the odd one out? (a) lays out the page (b) changes the text size (c) adds space around boxes (d) checks a quiz answer
13. 13.True or false: JavaScript changes the page live. (a) False (b) True
14. 14.✍️ Which property is set to 8px in this rule?
    .note {
      font-weight: bold;
      font-style: italic;
      padding: 8px;
    } (a) 8px (b) border (c) font-weight (d) padding
15. 15.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 170px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 80px wide (no margins).
16. 16.🌈 Which colour of light is strongest in rgb(40, 24, 156)? (a) blue (b) red (c) green
17. 17.🧩 Which language shows a pop-up message? (a) CSS (b) HTML (c) JavaScript
18. 18.Which of these does CSS do? (a) sets colours and fonts (b) reacts to a button click (c) counts down a timer (d) puts a picture on a page
19. 19.🖌️ Which CSS property picks the font style? (a) color (b) text-align (c) font-family (d) font-size
20. 20.🎯 Which element does the selector #intro style? (a) <h1 id="intro"> (b) <h1 class="intro"> (c) <h1 id="main"> (d) <h2 class="big">
21. 21.✍️ Which sign ends each CSS declaration? (a) . (b) , (c) ; (d) :
22. 22.🌈 Which colour of light is strongest in rgb(21, 47, 229)? (a) red (b) green (c) blue
23. 23.True or false: padding is the gap round content. (a) False (b) True
24. 24.📦 In the box model, which part is a solid or dotted edge? (a) content (b) border (c) padding (d) margin
25. 25.✍️ What value is given to margin in this rule?
    body {
      margin: 10px;
      width: 300px;
      color: red;
    } (a) bold (b) margin (c) 10px (d) 8px
26. 26.What does justify-content: center do? (a) equal gaps, none at ends (b) packs boxes at the end (c) puts boxes in the middle (d) packs boxes at the start
27. 27.🌈 Which hex code is black? (a) #ff00ff (b) #00ff00 (c) #0000ff (d) #000000
28. 28.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
29. 29.🎯 Which CSS selector matches this element?
    <p class="big" id="intro">Hello</p> (a) .big (b) #big (c) .intro (d) .red
30. 30.📱 What does a media query check? (a) the time of day (b) the page title (c) the screen width (d) the battery level
31. 31.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 120px;
      padding: 10px;
      border: 1px solid black;
      margin: 0px;
    }
32. 32.⚖️ What colour is the text of this element?
    <p class="box" id="hero">Hi</p>
    CSS:
    p { color: green; }
    p { color: blue; } (a) green (b) blue (c) white (d) orange
33. 33.✍️ What is the selector in this CSS rule?
    li {
      font-size: 20px;
      padding: 8px;
    } (a) li (b) 8px (c) body (d) font-size
34. 34.🌈 Which hex code is white? (a) #ff00ff (b) #ffffff (c) #000000 (d) #ff0000
35. 35.What does background-color do? (a) makes letters bigger (b) sets the letter colour (c) picks the font style (d) colours behind the text
36. 36.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) exactly 100px (c) 800px or wider (d) turned off
37. 37.🌈 Which colour is #ff0000? (a) blue (b) magenta (c) red (d) cyan
38. 38.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 60px;
      padding: 5px;
      border: 3px solid black;
      margin: 15px;
    }
39. 39.🔍 Which is the odd one out? (a) lays out the page (b) counts down a timer (c) rounds box corners (d) adds space around boxes
40. 40.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      width: 300px;
      color: red;
      font-style: italic;
    }

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