CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 954 · 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.📦 In the box model, which part is a solid or dotted edge? (a) content (b) margin (c) border (d) padding
2. 2.🌈 Which colour is rgb(0, 0, 0)? (a) red (b) bright green (c) black (d) blue
3. 3.🧩 Which language puts a picture on a page? (a) HTML (b) CSS (c) JavaScript
4. 4.🖌️ Where does the text sit on its line?
   li {
     text-align: center;
     background-color: blue;
     font-size: 36px;
     color: red;
   } (a) on the left (b) in the middle (c) on the right
5. 5.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 70px;
     padding: 10px;
     border: 5px solid black;
     margin: 5px;
   }
6. 6.✍️ CSS declarations go inside which brackets? (a) ( ) (b) [ ] (c) < > (d) { }
7. 7.🖌️ What colour is behind the letters?
   h2 {
     text-align: right;
     font-size: 20px;
     color: white;
     background-color: red;
   } (a) blue (b) red (c) white
8. 8.🎨 Which tag connects an outside CSS file? (a) <img> (b) <css> (c) <a> (d) <link>
9. 9.⚖️ What colour is the text of this element?
   <h1 class="menu" id="top">Hi</h1>
   CSS:
   h1 { color: purple; }
   h1 { color: black; } (a) purple (b) black (c) yellow (d) white
10. 10.🌈 Which colour is rgb(255, 0, 0)? (a) cyan (b) yellow (c) white (d) red
11. 11.What does font-weight do? (a) makes the text bold (b) colours behind the text (c) picks the font style (d) sets the letter colour
12. 12.📦 In the box model, which part is space outside the border? (a) border (b) padding (c) margin (d) content
13. 13.🎯 Which CSS selector matches this element?
    <div class="note" id="logo">Hello</div> (a) span (b) #end (c) div (d) .big
14. 14.⚖️ What colour is the text of this element?
    <h2 class="box" id="logo">Hi</h2>
    CSS:
    #logo { color: white; }
    h2 { color: black; }
    .box { color: green; } (a) red (b) green (c) white (d) black
15. 15.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 240px;
      padding: 25px;
      border: 1px solid black;
      margin: 5px;
    }
16. 16.✍️ What is the selector in this CSS rule?
    body {
      padding: 8px;
      width: 300px;
    } (a) padding (b) body (c) .box (d) 300px
17. 17.💪 Which justify-content value equal gaps, none at ends? (a) flex-end (b) center (c) space-between (d) flex-start
18. 18.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the title tag (c) the br tag (d) the hr tag
19. 19.✍️ What is the selector in this CSS rule?
    #top {
      margin: 10px;
      padding: 8px;
      font-style: italic;
    } (a) margin (b) #top (c) 8px (d) li
20. 20.What does text-align do? (a) makes letters bigger (b) centres a heading (c) sets the letter colour (d) colours behind the text
21. 21.🖌️ What colour is behind the letters?
    h1 {
      background-color: blue;
      color: white;
      text-align: right;
      font-size: 24px;
    } (a) orange (b) white (c) blue
22. 22.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 80px;
      padding: 15px;
      border: 2px solid black;
      margin: 0px;
    }
23. 23.⚖️ What colour is the text of this element?
    <h1 class="red" id="hero">Hi</h1>
    CSS:
    .red { color: white; }
    h1 { color: blue; } (a) blue (b) white (c) orange (d) green
24. 24.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 14px;
      }
    }
25. 25.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      color: red;
      padding: 8px;
    }
26. 26.🎯 Which sign starts a class selector? (a) @ (b) # (c) & (d) .
27. 27.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 180px;
      padding: 15px;
      border: 2px solid black;
      margin: 0px;
    }
28. 28.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) packs boxes at the start (c) puts boxes in the middle (d) packs boxes at the end
29. 29.📱 What does a media query check? (a) the battery level (b) the time of day (c) the page title (d) the screen width
30. 30.🌈 In #rrggbb, which colour do the last two digits give? (a) red (b) white (c) green (d) blue
31. 31.🎨 A CSS file usually ends with which extension? (a) .html (b) .css (c) .js (d) .png
32. 32.⚖️ What colour is the text of this element?
    <p class="red" id="hero">Hi</p>
    CSS:
    p { color: white; }
    p { color: blue; } (a) green (b) yellow (c) blue (d) white
33. 33.🌈 Which colour of light is strongest in rgb(166, 75, 18)? (a) blue (b) red (c) green
34. 34.Which of these does JavaScript do? (a) changes the page live (b) makes a link (c) makes headings and lists (d) gives the page structure
35. 35.What does font-family do? (a) sets the letter colour (b) centres a heading (c) colours behind the text (d) picks the font style
36. 36.✍️ What is the selector in this CSS rule?
    body {
      width: 300px;
      font-weight: bold;
      font-style: italic;
    } (a) bold (b) .box (c) width (d) body
37. 37.🌈 In #000067 the blue part is the hex number 67. What is it as a normal number?
38. 38.🎯 Which CSS selector matches this element?
    <li class="red" id="end">Hello</li> (a) .box (b) div (c) #red (d) #end
39. 39.🎯 Which CSS selector matches this element?
    <li class="note" id="top">Hello</li> (a) .note (b) #note (c) .top (d) div
40. 40.What does color do? (a) sets the letter colour (b) makes the text bold (c) makes letters bigger (d) picks the font style

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