CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 562 · 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: padding is a solid or dotted edge. (a) True (b) False
2. 2.⚖️ What colour is the text of this element?
   <h1 class="box" id="logo">Hi</h1>
   CSS:
   .box { color: red; }
   .box { color: black; } (a) yellow (b) blue (c) black (d) red
3. 3.🎯 What kind of selector is .note? (a) an element selector (b) a class selector (c) an id selector
4. 4.🖌️ Which CSS property centres a heading? (a) font-size (b) background-color (c) text-align (d) color
5. 5.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) 800px or wider (c) 800px or narrower (d) turned off
6. 6.💪 Which flexbox property sets space between boxes? (a) gap (b) display: flex (c) flex-direction (d) justify-content
7. 7.What does justify-content: flex-end do? (a) puts boxes in the middle (b) packs boxes at the end (c) equal gaps, none at ends (d) packs boxes at the start
8. 8.🌈 What is the biggest number one colour can have in rgb()? (a) 255 (b) 99 (c) 1000 (d) 100
9. 9.🎨 A CSS file usually ends with which extension? (a) .css (b) .js (c) .png (d) .html
10. 10.✍️ What value is given to font-style in this rule?
    h2 {
      font-style: italic;
      color: red;
    } (a) red (b) italic (c) font-style (d) 20px
11. 11.Which of these does HTML do? (a) changes the page live (b) makes a link (c) checks a quiz answer (d) sets colours and fonts
12. 12.✍️ CSS declarations go inside which brackets? (a) { } (b) [ ] (c) < > (d) ( )
13. 13.True or false: JavaScript counts down a timer. (a) True (b) False
14. 14.True or false: HTML gives the page structure. (a) True (b) False
15. 15.⚖️ What colour is the text of this element?
    <p class="note" id="hero">Hi</p>
    CSS:
    p { color: blue; }
    #hero { color: white; }
    .note { color: red; } (a) red (b) black (c) white (d) blue
16. 16.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 50px;
      padding: 10px;
      border: 2px solid black;
      margin: 20px;
    }
17. 17.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
18. 18.🧩 Which language gives the page structure? (a) CSS (b) JavaScript (c) HTML
19. 19.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 50px;
      padding: 20px;
      border: 2px solid black;
      margin: 5px;
    }
20. 20.🌈 Which colour is #ffff00? (a) bright green (b) white (c) yellow (d) cyan
21. 21.🖌️ Which CSS property sets the letter colour? (a) color (b) font-size (c) font-family (d) background-color
22. 22.🎯 Which CSS selector matches this element?
    <h1 class="red" id="logo">Hello</h1> (a) h2 (b) h1 (c) .logo (d) #red
23. 23.🎯 What kind of selector is li? (a) an element selector (b) a class selector (c) an id selector
24. 24.True or false: the border is the line round the box. (a) True (b) False
25. 25.What does font-size do? (a) makes the text bold (b) picks the font style (c) makes letters bigger (d) centres a heading
26. 26.🎯 What kind of selector is #hero? (a) an element selector (b) an id selector (c) a class selector
27. 27.📦 In the box model, which part is space inside the border? (a) border (b) content (c) padding (d) margin
28. 28.🌈 Which colour is rgb(0, 255, 0)? (a) blue (b) bright green (c) yellow (d) black
29. 29.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      width: 300px;
      color: red;
      padding: 8px;
    }
30. 30.⚖️ What colour is the text of this element?
    <p class="box" id="end">Hi</p>
    CSS:
    #end { color: green; }
    p { color: red; } (a) blue (b) purple (c) red (d) green
31. 31.🌈 Which colour is rgb(0, 0, 255)? (a) cyan (b) red (c) bright green (d) blue
32. 32.True or false: #top is an element selector. (a) False (b) True
33. 33.🌈 Which colour of light is strongest in rgb(200, 64, 70)? (a) green (b) blue (c) red
34. 34.🌈 Which colour is rgb(0, 0, 0)? (a) black (b) magenta (c) white (d) red
35. 35.What does justify-content: space-between do? (a) packs boxes at the start (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the end
36. 36.🎯 Which sign starts a class selector? (a) # (b) & (c) @ (d) .
37. 37.📦 In the box model, which part is the gap round content? (a) margin (b) border (c) content (d) padding
38. 38.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 16px;
      }
    }
39. 39.🔍 Which is the odd one out? (a) sets colours and fonts (b) checks a quiz answer (c) adds space around boxes (d) lays out the page
40. 40.Which of these does JavaScript do? (a) gives the page structure (b) lays out the page (c) adds space around boxes (d) changes the page live

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