CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 133 · 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 colour of light is strongest in rgb(38, 194, 14)? (a) red (b) blue (c) green
2. 2.⚖️ What colour is the text of this element?
   <h2 class="box" id="top">Hi</h2>
   CSS:
   #top { color: red; }
   .box { color: black; }
   h2 { color: purple; } (a) green (b) purple (c) black (d) red
3. 3.🎯 What kind of selector is li? (a) an id selector (b) a class selector (c) an element selector
4. 4.What does color do? (a) sets the letter colour (b) colours behind the text (c) makes the text bold (d) makes letters bigger
5. 5.🎯 What kind of selector is .big? (a) a class selector (b) an id selector (c) an element selector
6. 6.🌈 Which colour is #ff0000? (a) bright green (b) blue (c) red (d) black
7. 7.🔍 Which is the odd one out? (a) changes the page live (b) shows a pop-up message (c) checks a quiz answer (d) makes a link
8. 8.🌈 Which colour is #00ff00? (a) white (b) red (c) bright green (d) cyan
9. 9.💪 Which flexbox property turns on flexbox? (a) justify-content (b) display: flex (c) gap (d) align-items
10. 10.🧩 Which language lays out the page? (a) HTML (b) JavaScript (c) CSS
11. 11.⚖️ What colour is the text of this element?
    <h2 class="red" id="end">Hi</h2>
    CSS:
    .red { color: green; }
    .red { color: white; } (a) yellow (b) green (c) orange (d) white
12. 12.✍️ What is the selector in this CSS rule?
    .note {
      font-style: italic;
      padding: 8px;
      margin: 10px;
      color: red;
    } (a) font-style (b) .note (c) #top (d) 8px
13. 13.🔍 Which is the odd one out? (a) makes headings and lists (b) changes the text size (c) gives the page structure (d) makes a form box
14. 14.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
15. 15.⚖️ What colour is the text of this element?
    <p class="red" id="logo">Hi</p>
    CSS:
    p { color: green; }
    p { color: red; } (a) red (b) yellow (c) green (d) black
16. 16.🖌️ What colour is behind the letters?
    p {
      color: yellow;
      text-align: left;
      background-color: black;
      font-size: 36px;
    } (a) red (b) yellow (c) black
17. 17.📦 In the box model, which part is space inside the border? (a) content (b) margin (c) border (d) padding
18. 18.🎯 What kind of selector is #hero? (a) an element selector (b) an id selector (c) a class selector
19. 19.🖌️ Where does the text sit on its line?
    h2 {
      background-color: red;
      text-align: center;
      font-size: 40px;
      color: black;
    } (a) on the right (b) on the left (c) in the middle
20. 20.✍️ What is the selector in this CSS rule?
    h1 {
      width: 300px;
      text-align: center;
    } (a) width (b) h1 (c) center (d) p
21. 21.📦 In the box model, which part is a solid or dotted edge? (a) margin (b) content (c) border (d) padding
22. 22.⚖️ What colour is the text of this element?
    <p class="star" id="main">Hi</p>
    CSS:
    #main { color: black; }
    #main { color: orange; } (a) yellow (b) blue (c) black (d) orange
23. 23.What does font-weight do? (a) makes letters bigger (b) sets the letter colour (c) colours behind the text (d) makes the text bold
24. 24.🎨 A CSS file usually ends with which extension? (a) .png (b) .js (c) .html (d) .css
25. 25.True or false: JavaScript puts a picture on a page. (a) False (b) True
26. 26.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 20px;
      }
    } (a) No (b) Yes
27. 27.What does background-color do? (a) picks the font style (b) centres a heading (c) makes letters bigger (d) colours behind the text
28. 28.🖌️ What colour are the letters?
    h1 {
      text-align: right;
      background-color: green;
      font-size: 16px;
      color: yellow;
    } (a) green (b) yellow (c) white
29. 29.⚖️ What colour is the text of this element?
    <p class="menu" id="top">Hi</p>
    CSS:
    #top { color: green; }
    p { color: red; } (a) red (b) purple (c) green (d) yellow
30. 30.True or false: padding is space outside the border. (a) True (b) False
31. 31.⚖️ What colour is the text of this element?
    <p class="star" id="hero">Hi</p>
    CSS:
    .star { color: black; }
    .star { color: orange; } (a) black (b) yellow (c) blue (d) orange
32. 32.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 40px;
      padding: 20px;
      border: 5px solid black;
      margin: 0px;
    }
33. 33.✍️ Which property is set to yellow in this rule?
    li {
      margin: 10px;
      background-color: yellow;
    } (a) margin (b) background-color (c) padding (d) yellow
34. 34.✍️ Which property is set to center in this rule?
    h1 {
      font-size: 20px;
      text-align: center;
    } (a) background-color (b) text-align (c) center (d) margin
35. 35.🎯 Which element does the selector li style? (a) <p id="end"> (b) <li class="big"> (c) <span class="big"> (d) <div>
36. 36.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the later one (c) the first one (d) neither
37. 37.✍️ What value is given to background-color in this rule?
    .box {
      background-color: yellow;
      font-size: 20px;
    } (a) background-color (b) 8px (c) 10px (d) yellow
38. 38.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 28px;
      }
    } (a) No (b) Yes
39. 39.🎯 What kind of selector is .star? (a) an id selector (b) an element selector (c) a class selector
40. 40.🎯 Which CSS selector matches this element?
    <h2 class="note" id="intro">Hello</h2> (a) #main (b) #note (c) .note (d) .big

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