CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 428 · 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.🖌️ What colour is behind the letters?
   p {
     background-color: white;
     text-align: center;
     color: blue;
     font-size: 32px;
   } (a) blue (b) white (c) red
2. 2.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 200px;
     justify-content: center;
   }
   Inside are 3 boxes, each 40px wide (no margins).
3. 3.🎨 Which tag connects an outside CSS file? (a) <a> (b) <css> (c) <img> (d) <link>
4. 4.What does justify-content: flex-end do? (a) equal gaps, none at ends (b) packs boxes at the end (c) puts boxes in the middle (d) packs boxes at the start
5. 5.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
6. 6.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 10px;
     }
   } (a) No (b) Yes
7. 7.🎯 Which element does the selector .star style? (a) <span class="menu"> (b) <p class="note"> (c) <span class="star"> (d) <span id="star">
8. 8.🌈 Which colour is rgb(0, 255, 0)? (a) white (b) bright green (c) red (d) blue
9. 9.Which of these does JavaScript do? (a) makes a link (b) checks a quiz answer (c) makes headings and lists (d) makes a form box
10. 10.✍️ In color: blue; which part is the value? (a) color (b) blue (c) ; (d) :
11. 11.🌈 Which hex code is black? (a) #ff0000 (b) #ffff00 (c) #000000 (d) #0000ff
12. 12.⚖️ What colour is the text of this element?
    <h2 class="menu" id="hero">Hi</h2>
    CSS:
    #hero { color: yellow; }
    .menu { color: green; } (a) yellow (b) purple (c) red (d) green
13. 13.⚖️ What colour is the text of this element?
    <h1 class="star" id="intro">Hi</h1>
    CSS:
    #intro { color: black; }
    #intro { color: orange; } (a) orange (b) black (c) yellow (d) red
14. 14.True or false: HTML changes the page live. (a) False (b) True
15. 15.⚖️ What colour is the text of this element?
    <p class="star" id="intro">Hi</p>
    CSS:
    #intro { color: white; }
    #intro { color: black; } (a) black (b) yellow (c) white (d) purple
16. 16.Which of these does HTML do? (a) sets colours and fonts (b) reacts to a button click (c) lays out the page (d) gives the page structure
17. 17.🎯 Which element does the selector #top style? (a) <span class="big"> (b) <div id="intro"> (c) <div class="top"> (d) <div id="top">
18. 18.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      font-size: 20px;
      font-style: italic;
    }
19. 19.🎨 Which attribute adds CSS inside one tag? (a) alt (b) href (c) src (d) style
20. 20.🎯 Which sign starts a class selector? (a) # (b) & (c) @ (d) .
21. 21.✍️ Which property is set to bold in this rule?
    h1 {
      background-color: yellow;
      font-weight: bold;
    } (a) border (b) font-weight (c) bold (d) width
22. 22.What does background-color do? (a) sets the letter colour (b) picks the font style (c) colours behind the text (d) makes the text bold
23. 23.What does color do? (a) sets the letter colour (b) makes letters bigger (c) picks the font style (d) colours behind the text
24. 24.🌈 Which hex code is red? (a) #ff0000 (b) #ffff00 (c) #ffffff (d) #00ffff
25. 25.⚖️ What colour is the text of this element?
    <h1 class="star" id="hero">Hi</h1>
    CSS:
    #hero { color: white; }
    #hero { color: blue; } (a) blue (b) yellow (c) white (d) purple
26. 26.True or false: img is an id selector. (a) True (b) False
27. 27.True or false: #end is a class selector. (a) False (b) True
28. 28.✍️ What value is given to border in this rule?
    li {
      background-color: yellow;
      border: 2px solid;
      color: red;
      font-size: 20px;
    } (a) 2px solid (b) 300px (c) border (d) italic
29. 29.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 99 (c) 255 (d) 1000
30. 30.True or false: #main is an id selector. (a) False (b) True
31. 31.🎯 What kind of selector is .star? (a) an element selector (b) a class selector (c) an id selector
32. 32.⚖️ What colour is the text of this element?
    <h1 class="box" id="intro">Hi</h1>
    CSS:
    .box { color: black; }
    #intro { color: orange; }
    h1 { color: green; } (a) white (b) green (c) black (d) orange
33. 33.Which of these does HTML do? (a) puts a picture on a page (b) adds space around boxes (c) changes the text size (d) lays out the page
34. 34.✍️ CSS declarations go inside which brackets? (a) { } (b) ( ) (c) [ ] (d) < >
35. 35.📱 What does a media query check? (a) the screen width (b) the battery level (c) the time of day (d) the page title
36. 36.🎨 A CSS file usually ends with which extension? (a) .js (b) .png (c) .html (d) .css
37. 37.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 280px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 100px wide (no margins).
38. 38.⚖️ What colour is the text of this element?
    <h2 class="box" id="hero">Hi</h2>
    CSS:
    #hero { color: green; }
    h2 { color: purple; } (a) blue (b) green (c) red (d) purple
39. 39.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector
40. 40.🌈 In #rrggbb, which colour do the last two digits give? (a) green (b) blue (c) white (d) red

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