CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 332 · 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 element does the selector p style? (a) <p class="box"> (b) <h1> (c) <h2 class="box"> (d) <li id="top">
2. 2.✍️ In color: blue; which part is the value? (a) ; (b) color (c) blue (d) :
3. 3.True or false: .big is an element selector. (a) True (b) False
4. 4.🎯 What kind of selector is li? (a) a class selector (b) an element selector (c) an id selector
5. 5.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 150px;
     padding: 25px;
     border: 3px solid black;
     margin: 0px;
   }
6. 6.✍️ How does a CSS comment start? (a) <!-- (b) # (c) // (d) /*
7. 7.🔍 Which is the odd one out? (a) checks a quiz answer (b) puts a picture on a page (c) changes the page live (d) reacts to a button click
8. 8.✍️ How many declarations (property: value pairs) are in this rule?
   h1 {
     font-size: 20px;
   }
9. 9.🎯 Can many elements share the same class? (a) No (b) Yes
10. 10.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
11. 11.🎯 Which sign starts a class selector? (a) @ (b) & (c) . (d) #
12. 12.🎯 Which CSS selector matches this element?
    <h1 class="big" id="intro">Hello</h1> (a) #big (b) .red (c) h1 (d) #main
13. 13.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 70px;
      padding: 20px;
      border: 3px solid black;
      margin: 20px;
    }
14. 14.🎨 What does CSS stand for? (a) Cascading Style Sheets (b) Creative Sheet System (c) Colourful Site Styles (d) Computer Style Sheets
15. 15.🌈 Which colour is rgb(0, 0, 0)? (a) cyan (b) white (c) yellow (d) black
16. 16.📱 What does a media query check? (a) the battery level (b) the page title (c) the screen width (d) the time of day
17. 17.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 2 boxes, each 40px wide (no margins).
18. 18.⚖️ What colour is the text of this element?
    <h1 class="star" id="top">Hi</h1>
    CSS:
    #top { color: black; }
    .star { color: green; } (a) white (b) black (c) green (d) yellow
19. 19.🎯 Which element does the selector span style? (a) <h1 class="note"> (b) <p> (c) <h2 id="main"> (d) <span class="note">
20. 20.🎯 Which CSS selector matches this element?
    <h2 class="big" id="top">Hello</h2> (a) .top (b) #big (c) li (d) h2
21. 21.True or false: margin is the gap to other boxes. (a) False (b) True
22. 22.📦 In the box model, which part is the line round the box? (a) content (b) padding (c) margin (d) border
23. 23.Which of these does CSS do? (a) puts a picture on a page (b) makes a form box (c) makes headings and lists (d) adds space around boxes
24. 24.🌈 Which hex code is white? (a) #00ff00 (b) #ffffff (c) #00ffff (d) #ff0000
25. 25.🌈 Which colour of light is strongest in rgb(123, 195, 47)? (a) blue (b) green (c) red
26. 26.📦 In the box model, which part is space outside the border? (a) content (b) margin (c) border (d) padding
27. 27.📦 In the box model, which part is the gap to other boxes? (a) margin (b) content (c) padding (d) border
28. 28.Which of these does HTML do? (a) changes the page live (b) makes headings and lists (c) sets colours and fonts (d) counts down a timer
29. 29.🌈 Which colour is rgb(0, 255, 0)? (a) bright green (b) white (c) cyan (d) blue
30. 30.True or false: .note is an id selector. (a) False (b) True
31. 31.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 20px;
      }
    } (a) No (b) Yes
32. 32.Which of these is the content? (a) a solid or dotted edge (b) space inside the border (c) the text or picture (d) the gap round content
33. 33.🌈 Which colour is #00ff00? (a) blue (b) magenta (c) bright green (d) cyan
34. 34.🌈 Which colour of light is strongest in rgb(237, 135, 111)? (a) green (b) blue (c) red
35. 35.✍️ What value is given to color in this rule?
    .note {
      text-align: center;
      padding: 8px;
      color: red;
    } (a) center (b) color (c) 20px (d) red
36. 36.✍️ Which sign goes between a property and its value? (a) = (b) ; (c) : (d) -
37. 37.🎯 Which element does the selector .note style? (a) <span class="red"> (b) <div class="big"> (c) <div class="note"> (d) <div id="note">
38. 38.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 26px;
      }
    } (a) No (b) Yes
39. 39.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      padding: 8px;
    }
40. 40.🌈 Which colour is #0000ff? (a) black (b) blue (c) red (d) yellow

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