CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 688 · 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.✍️ CSS declarations go inside which brackets? (a) ( ) (b) < > (c) [ ] (d) { }
2. 2.⚖️ What colour is the text of this element?
   <h1 class="menu" id="top">Hi</h1>
   CSS:
   .menu { color: white; }
   .menu { color: red; } (a) purple (b) red (c) yellow (d) white
3. 3.✍️ In color: blue; which part is the value? (a) ; (b) : (c) color (d) blue
4. 4.🎨 Which tag holds CSS inside the head? (a) <script> (b) <style> (c) <body> (d) <css>
5. 5.📱 The screen is 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (min-width: 600px) {
     p {
       font-size: 14px;
     }
   } (a) No (b) Yes
6. 6.🖌️ Which CSS property makes the text bold? (a) background-color (b) font-family (c) font-weight (d) font-size
7. 7.🎯 Which CSS selector matches this element?
   <span class="note" id="end">Hello</span> (a) p (b) #end (c) .end (d) #hero
8. 8.Which of these is margin? (a) space outside the border (b) the gap round content (c) a solid or dotted edge (d) space inside the border
9. 9.🧩 Which language reacts to a button click? (a) HTML (b) CSS (c) JavaScript
10. 10.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 350px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 80px wide (no margins).
11. 11.🎯 Can many elements share the same class? (a) No (b) Yes
12. 12.✍️ How does a CSS comment start? (a) /* (b) // (c) <!-- (d) #
13. 13.🌈 Which colour is #ffff00? (a) white (b) cyan (c) yellow (d) red
14. 14.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    } (a) Yes (b) No
15. 15.True or false: body is an id selector. (a) False (b) True
16. 16.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 140px;
      padding: 20px;
      border: 1px solid black;
      margin: 10px;
    }
17. 17.🔍 Which is the odd one out? (a) rounds box corners (b) lays out the page (c) gives the page structure (d) sets colours and fonts
18. 18.🖌️ Which CSS property colours behind the text? (a) text-align (b) font-family (c) color (d) background-color
19. 19.🧩 Which language adds space around boxes? (a) CSS (b) JavaScript (c) HTML
20. 20.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) neither (c) the first one (d) the shorter one
21. 21.What does justify-content: space-between do? (a) packs boxes at the start (b) packs boxes at the end (c) equal gaps, none at ends (d) puts boxes in the middle
22. 22.🌈 Hex digits go 0 to 9, then A to which letter? (a) J (b) F (c) G (d) Z
23. 23.🧩 Which language sets colours and fonts? (a) JavaScript (b) HTML (c) CSS
24. 24.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 26px;
      }
    }
25. 25.🌈 Which colour is rgb(255, 255, 0)? (a) blue (b) yellow (c) red (d) magenta
26. 26.What does justify-content: flex-start do? (a) packs boxes at the end (b) equal gaps, none at ends (c) packs boxes at the start (d) puts boxes in the middle
27. 27.🎯 What kind of selector is .note? (a) an id selector (b) a class selector (c) an element selector
28. 28.⚖️ What colour is the text of this element?
    <h1 class="box" id="intro">Hi</h1>
    CSS:
    .box { color: orange; }
    #intro { color: red; }
    h1 { color: blue; } (a) blue (b) black (c) red (d) orange
29. 29.⚖️ What colour is the text of this element?
    <h2 class="star" id="intro">Hi</h2>
    CSS:
    .star { color: white; }
    .star { color: purple; } (a) red (b) yellow (c) purple (d) white
30. 30.🎯 Which element does the selector span style? (a) <span class="red"> (b) <h2 id="logo"> (c) <h1 class="red"> (d) <p>
31. 31.True or false: img is an element selector. (a) True (b) False
32. 32.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) turned off (c) exactly 100px (d) 800px or narrower
33. 33.🎨 What does CSS stand for? (a) Colourful Site Styles (b) Cascading Style Sheets (c) Computer Style Sheets (d) Creative Sheet System
34. 34.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 255 (c) 99 (d) 1000
35. 35.⚖️ What colour is the text of this element?
    <p class="note" id="top">Hi</p>
    CSS:
    #top { color: black; }
    p { color: green; } (a) white (b) orange (c) black (d) green
36. 36.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 540px;
      justify-content: center;
    }
    Inside are 4 boxes, each 100px wide (no margins).
37. 37.🖌️ What colour are the letters?
    li {
      background-color: blue;
      font-size: 40px;
      color: green;
      text-align: center;
    } (a) red (b) blue (c) green
38. 38.What does background-color do? (a) picks the font style (b) sets the letter colour (c) colours behind the text (d) makes letters bigger
39. 39.✍️ What is the selector in this CSS rule?
    p {
      text-align: center;
      font-size: 20px;
      color: red;
    } (a) text-align (b) p (c) 20px (d) .note
40. 40.🎨 One CSS file can style how many pages? (a) no pages (b) only one image (c) many pages (d) only one word

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