CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 356 · 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 language makes headings and lists? (a) HTML (b) CSS (c) JavaScript
2. 2.True or false: margin is space outside the border. (a) False (b) True
3. 3.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the later one (c) neither (d) the first one
4. 4.🎯 What kind of selector is .big? (a) an element selector (b) an id selector (c) a class selector
5. 5.🎯 How many elements on a page should have the same id? (a) any number (b) 2 (c) 5 (d) 1
6. 6.🌈 What is the biggest number one colour can have in rgb()? (a) 1000 (b) 99 (c) 100 (d) 255
7. 7.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 60px;
     padding: 10px;
     border: 5px solid black;
     margin: 5px;
   }
8. 8.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 230px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 50px wide (no margins).
9. 9.What does background-color do? (a) sets the letter colour (b) picks the font style (c) colours behind the text (d) makes letters bigger
10. 10.🌈 Which colour is rgb(0, 0, 255)? (a) white (b) bright green (c) magenta (d) blue
11. 11.What does font-weight do? (a) makes the text bold (b) centres a heading (c) colours behind the text (d) sets the letter colour
12. 12.🎨 Which attribute adds CSS inside one tag? (a) href (b) alt (c) src (d) style
13. 13.🎯 Which CSS selector matches this element?
    <li class="menu" id="intro">Hello</li> (a) #menu (b) div (c) #intro (d) .intro
14. 14.✍️ What is the selector in this CSS rule?
    li {
      font-weight: bold;
      font-size: 20px;
    } (a) 20px (b) font-weight (c) body (d) li
15. 15.🌈 In #rrggbb, which colour do the first two digits give? (a) green (b) blue (c) black (d) red
16. 16.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 20px;
      }
    } (a) No (b) Yes
17. 17.Which of these does JavaScript do? (a) gives the page structure (b) counts down a timer (c) adds space around boxes (d) changes the text size
18. 18.🌈 Which colour is rgb(255, 0, 0)? (a) bright green (b) red (c) magenta (d) white
19. 19.🖌️ Where does the text sit on its line?
    h2 {
      font-size: 12px;
      background-color: purple;
      text-align: center;
      color: green;
    } (a) on the right (b) in the middle (c) on the left
20. 20.🧩 Which language changes the text size? (a) CSS (b) HTML (c) JavaScript
21. 21.⚖️ What colour is the text of this element?
    <h1 class="star" id="logo">Hi</h1>
    CSS:
    h1 { color: blue; }
    h1 { color: red; } (a) blue (b) red (c) black (d) green
22. 22.True or false: .note is an id selector. (a) True (b) False
23. 23.What does justify-content: space-between do? (a) packs boxes at the start (b) puts boxes in the middle (c) packs boxes at the end (d) equal gaps, none at ends
24. 24.Which of these is padding? (a) the gap to other boxes (b) the text or picture (c) the line round the box (d) space inside the border
25. 25.🖌️ Which CSS property makes letters bigger? (a) background-color (b) font-weight (c) font-size (d) font-family
26. 26.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
27. 27.✍️ What value is given to font-weight in this rule?
    p {
      font-weight: bold;
      color: red;
      margin: 10px;
    } (a) 2px solid (b) font-weight (c) bold (d) 300px
28. 28.🌈 Which colour is rgb(255, 0, 255)? (a) red (b) cyan (c) yellow (d) magenta
29. 29.🎯 What kind of selector is p? (a) an element selector (b) a class selector (c) an id selector
30. 30.Which of these is the border? (a) space inside the border (b) space outside the border (c) the line round the box (d) the gap round content
31. 31.What does justify-content: center do? (a) packs boxes at the end (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the start
32. 32.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 20px;
      }
    } (a) No (b) Yes
33. 33.True or false: the border is space outside the border. (a) True (b) False
34. 34.🖌️ What colour is behind the letters?
    h2 {
      background-color: purple;
      font-size: 28px;
      text-align: center;
      color: green;
    } (a) green (b) purple (c) orange
35. 35.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
36. 36.🖌️ What colour are the letters?
    p {
      background-color: orange;
      text-align: right;
      font-size: 16px;
      color: red;
    } (a) yellow (b) red (c) orange
37. 37.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) green (c) blue (d) white
38. 38.🌈 Which colour is rgb(0, 255, 255)? (a) red (b) cyan (c) black (d) blue
39. 39.True or false: CSS adds space around boxes. (a) True (b) False
40. 40.✍️ What is the selector in this CSS rule?
    h2 {
      font-style: italic;
      border: 2px solid;
      font-size: 20px;
    } (a) h2 (b) font-style (c) 2px solid (d) h1

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