CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 961 · 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.🖌️ Where does the text sit on its line?
   h2 {
     background-color: yellow;
     color: orange;
     text-align: right;
     font-size: 12px;
   } (a) in the middle (b) on the right (c) on the left
2. 2.✍️ How many declarations (property: value pairs) are in this rule?
   .box {
     font-size: 20px;
     font-style: italic;
   }
3. 3.⚖️ Which selector is the weakest? (a) an id selector (b) a class selector (c) an element selector
4. 4.📱 Responsive design means a page ___. (a) never changes (b) has no pictures (c) is only for laptops (d) fits every screen
5. 5.What does background-color do? (a) picks the font style (b) makes the text bold (c) colours behind the text (d) sets the letter colour
6. 6.✍️ What is the selector in this CSS rule?
   body {
     font-style: italic;
     padding: 8px;
   } (a) font-style (b) .box (c) 8px (d) body
7. 7.⚖️ What colour is the text of this element?
   <h2 class="star" id="top">Hi</h2>
   CSS:
   #top { color: black; }
   #top { color: yellow; } (a) white (b) black (c) red (d) yellow
8. 8.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the hr tag (c) the br tag (d) the viewport meta tag
9. 9.📱 The screen is 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 16px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 10px;
     }
   } (a) No (b) Yes
10. 10.🎯 Can many elements share the same class? (a) No (b) Yes
11. 11.🎯 How many elements on a page should have the same id? (a) 1 (b) any number (c) 5 (d) 2
12. 12.🖌️ Which CSS property makes letters bigger? (a) background-color (b) font-size (c) font-weight (d) text-align
13. 13.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Creative Sheet System (c) Cascading Style Sheets (d) Colourful Site Styles
14. 14.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 99 (c) 1000 (d) 255
15. 15.⚖️ What colour is the text of this element?
    <p class="big" id="top">Hi</p>
    CSS:
    #top { color: orange; }
    p { color: purple; }
    .big { color: black; } (a) purple (b) black (c) orange (d) white
16. 16.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 350px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 80px wide (no margins).
17. 17.🎯 What kind of selector is #hero? (a) a class selector (b) an element selector (c) an id selector
18. 18.✍️ What value is given to text-align in this rule?
    #top {
      text-align: center;
      font-weight: bold;
      padding: 8px;
    } (a) center (b) 10px (c) yellow (d) text-align
19. 19.⚖️ What colour is the text of this element?
    <p class="note" id="main">Hi</p>
    CSS:
    p { color: red; }
    p { color: blue; } (a) blue (b) red (c) black (d) white
20. 20.Which of these is the border? (a) space outside the border (b) the line round the box (c) space inside the border (d) the gap round content
21. 21.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the shorter one (c) the later one (d) neither
22. 22.💪 Which flexbox property turns on flexbox? (a) justify-content (b) display: flex (c) gap (d) flex-direction
23. 23.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 290px;
      padding: 5px;
      border: 1px solid black;
      margin: 5px;
    }
24. 24.🔍 Which is the odd one out? (a) adds space around boxes (b) changes the page live (c) changes the text size (d) sets colours and fonts
25. 25.True or false: .note is a class selector. (a) False (b) True
26. 26.🖌️ What colour is behind the letters?
    h2 {
      text-align: center;
      color: purple;
      font-size: 36px;
      background-color: black;
    } (a) purple (b) black (c) blue
27. 27.What does justify-content: flex-start do? (a) puts boxes in the middle (b) packs boxes at the end (c) equal gaps, none at ends (d) packs boxes at the start
28. 28.What does font-weight do? (a) makes the text bold (b) picks the font style (c) colours behind the text (d) makes letters bigger
29. 29.🌈 Which hex code is magenta? (a) #00ffff (b) #ff0000 (c) #000000 (d) #ff00ff
30. 30.✍️ Which property is set to 8px in this rule?
    body {
      padding: 8px;
      font-size: 20px;
    } (a) padding (b) font-weight (c) border (d) 8px
31. 31.💪 Which justify-content value packs boxes at the start? (a) center (b) flex-start (c) flex-end (d) space-between
32. 32.🧩 Which language checks a quiz answer? (a) JavaScript (b) HTML (c) CSS
33. 33.💪 Which justify-content value puts boxes in the middle? (a) center (b) flex-end (c) space-between (d) flex-start
34. 34.🖌️ Which CSS property colours behind the text? (a) font-size (b) background-color (c) font-weight (d) text-align
35. 35.🧩 Which language reacts to a button click? (a) JavaScript (b) HTML (c) CSS
36. 36.🔍 Which is the odd one out? (a) gives the page structure (b) makes a form box (c) changes the text size (d) makes a link
37. 37.🎯 Which CSS selector matches this element?
    <div class="star" id="logo">Hello</div> (a) #end (b) span (c) #star (d) #logo
38. 38.🎯 Which CSS selector matches this element?
    <p class="menu" id="hero">Hello</p> (a) #hero (b) .hero (c) #top (d) .note
39. 39.⚖️ What colour is the text of this element?
    <h1 class="red" id="top">Hi</h1>
    CSS:
    #top { color: purple; }
    h1 { color: yellow; } (a) yellow (b) red (c) purple (d) blue
40. 40.True or false: padding is the gap round content. (a) False (b) True

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