CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 984 · 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 are the letters?
   h1 {
     text-align: left;
     color: red;
     background-color: black;
     font-size: 12px;
   } (a) black (b) red (c) orange
2. 2.🖌️ What colour are the letters?
   h1 {
     font-size: 16px;
     color: blue;
     text-align: left;
     background-color: black;
   } (a) blue (b) black (c) purple
3. 3.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
   .box {
     width: 180px;
     padding: 20px;
     border: 3px solid black;
     margin: 5px;
   }
4. 4.✍️ Which sign goes between a property and its value? (a) - (b) ; (c) = (d) :
5. 5.🌈 Hex digits go 0 to 9, then A to which letter? (a) G (b) J (c) F (d) Z
6. 6.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 16px;
     }
   }
7. 7.🎯 Which element does the selector span style? (a) <span class="note"> (b) <p> (c) <h2 id="main"> (d) <h1 class="note">
8. 8.⚖️ What colour is the text of this element?
   <p class="red" id="main">Hi</p>
   CSS:
   p { color: white; }
   p { color: purple; } (a) purple (b) red (c) orange (d) white
9. 9.🧩 Which language rounds box corners? (a) HTML (b) JavaScript (c) CSS
10. 10.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 2 (b) 4 (c) 3 (d) 6
11. 11.✍️ What is the selector in this CSS rule?
    h1 {
      width: 300px;
      color: red;
      text-align: center;
    } (a) p (b) width (c) red (d) h1
12. 12.🖌️ Where does the text sit on its line?
    li {
      font-size: 28px;
      text-align: right;
      color: blue;
      background-color: red;
    } (a) in the middle (b) on the left (c) on the right
13. 13.🖌️ How big is the text, in px?
    h2 {
      text-align: left;
      background-color: white;
      color: blue;
      font-size: 28px;
    }
14. 14.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) 800px or narrower (c) exactly 100px (d) turned off
15. 15.Which of these does HTML do? (a) gives the page structure (b) lays out the page (c) shows a pop-up message (d) reacts to a button click
16. 16.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Creative Sheet System (c) Colourful Site Styles (d) Cascading Style Sheets
17. 17.📦 In the box model, which part is space inside the border? (a) content (b) padding (c) border (d) margin
18. 18.🌈 Which colour is rgb(0, 0, 0)? (a) blue (b) yellow (c) black (d) magenta
19. 19.🖌️ Where does the text sit on its line?
    li {
      font-size: 36px;
      background-color: black;
      color: blue;
      text-align: left;
    } (a) in the middle (b) on the right (c) on the left
20. 20.True or false: JavaScript reacts to a button click. (a) True (b) False
21. 21.✍️ What is the selector in this CSS rule?
    #top {
      color: red;
      padding: 8px;
    } (a) 8px (b) color (c) li (d) #top
22. 22.🌈 Which colour of light is strongest in rgb(215, 32, 21)? (a) green (b) blue (c) red
23. 23.✍️ Which property is set to 10px in this rule?
    .box {
      margin: 10px;
      font-style: italic;
    } (a) padding (b) 10px (c) font-weight (d) margin
24. 24.🖌️ Where does the text sit on its line?
    h1 {
      background-color: orange;
      font-size: 24px;
      color: green;
      text-align: center;
    } (a) on the right (b) on the left (c) in the middle
25. 25.🧩 Which language gives the page structure? (a) JavaScript (b) HTML (c) CSS
26. 26.🎯 What kind of selector is #hero? (a) a class selector (b) an element selector (c) an id selector
27. 27.🎨 Which tag connects an outside CSS file? (a) <css> (b) <a> (c) <link> (d) <img>
28. 28.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    } (a) No (b) Yes
29. 29.What does font-family do? (a) centres a heading (b) picks the font style (c) sets the letter colour (d) makes letters bigger
30. 30.What does justify-content: flex-end do? (a) puts boxes in the middle (b) equal gaps, none at ends (c) packs boxes at the end (d) packs boxes at the start
31. 31.💪 Which justify-content value equal gaps, none at ends? (a) center (b) flex-start (c) flex-end (d) space-between
32. 32.🧩 Which language counts down a timer? (a) JavaScript (b) CSS (c) HTML
33. 33.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      margin: 10px;
      font-size: 20px;
      color: red;
    }
34. 34.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 70px;
      padding: 25px;
      border: 2px solid black;
      margin: 15px;
    }
35. 35.What does font-size do? (a) makes letters bigger (b) sets the letter colour (c) centres a heading (d) picks the font style
36. 36.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 8px;
      }
    }
37. 37.⚖️ Which selector is the weakest? (a) an id selector (b) an element selector (c) a class selector
38. 38.🌈 Which colour of light is strongest in rgb(33, 35, 226)? (a) red (b) blue (c) green
39. 39.🌈 Which colour is #ff00ff? (a) yellow (b) bright green (c) white (d) magenta
40. 40.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      color: red;
      background-color: yellow;
      border: 2px solid;
    }

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