CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 913 · 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?
   h2 {
     color: red;
     font-size: 16px;
     background-color: orange;
     text-align: right;
   } (a) yellow (b) red (c) orange
2. 2.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 200px;
     padding: 10px;
     border: 1px solid black;
     margin: 15px;
   }
3. 3.💪 Which justify-content value packs boxes at the end? (a) flex-end (b) flex-start (c) space-between (d) center
4. 4.✍️ Which sign ends each CSS declaration? (a) : (b) , (c) . (d) ;
5. 5.💪 Which justify-content value equal gaps, none at ends? (a) flex-end (b) center (c) flex-start (d) space-between
6. 6.⚖️ What colour is the text of this element?
   <h2 class="red" id="logo">Hi</h2>
   CSS:
   .red { color: white; }
   .red { color: black; } (a) white (b) purple (c) black (d) orange
7. 7.✍️ In color: blue; which part is the property? (a) ; (b) : (c) color (d) blue
8. 8.📦 In the box model, which part is the line round the box? (a) padding (b) content (c) margin (d) border
9. 9.💪 Which flexbox property sets space between boxes? (a) align-items (b) justify-content (c) gap (d) display: flex
10. 10.🎯 What kind of selector is #top? (a) an id selector (b) a class selector (c) an element selector
11. 11.🖌️ Which CSS property centres a heading? (a) text-align (b) font-weight (c) background-color (d) color
12. 12.✍️ Which sign goes between a property and its value? (a) ; (b) = (c) - (d) :
13. 13.🌈 In #003700 the green part is the hex number 37. What is it as a normal number?
14. 14.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 18px;
      }
    }
15. 15.🎨 One CSS file can style how many pages? (a) no pages (b) only one image (c) many pages (d) only one word
16. 16.🎯 Which element does the selector #main style? (a) <div id="main"> (b) <div class="main"> (c) <span class="big"> (d) <div id="logo">
17. 17.What does font-size do? (a) makes letters bigger (b) picks the font style (c) sets the letter colour (d) colours behind the text
18. 18.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 16px;
      }
    } (a) No (b) Yes
19. 19.🧩 Which language makes a form box? (a) CSS (b) HTML (c) JavaScript
20. 20.True or false: the content is space outside the border. (a) False (b) True
21. 21.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) 800px or narrower (c) 800px or wider (d) turned off
22. 22.What does font-weight do? (a) centres a heading (b) sets the letter colour (c) makes the text bold (d) makes letters bigger
23. 23.✍️ What is the selector in this CSS rule?
    body {
      font-style: italic;
      font-size: 20px;
    } (a) .box (b) font-style (c) body (d) 20px
24. 24.🔍 Which is the odd one out? (a) counts down a timer (b) reacts to a button click (c) sets colours and fonts (d) checks a quiz answer
25. 25.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 130px;
      padding: 10px;
      border: 2px solid black;
      margin: 20px;
    }
26. 26.🎯 Which element does the selector .note style? (a) <h1 id="note"> (b) <h1 class="big"> (c) <h1 class="note"> (d) <h2 class="red">
27. 27.✍️ Which property is set to yellow in this rule?
    body {
      text-align: center;
      background-color: yellow;
      color: red;
      margin: 10px;
    } (a) yellow (b) margin (c) padding (d) background-color
28. 28.🖌️ Where does the text sit on its line?
    h1 {
      text-align: right;
      font-size: 16px;
      color: orange;
      background-color: white;
    } (a) on the left (b) on the right (c) in the middle
29. 29.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) neither (c) the later one (d) the first one
30. 30.🖌️ Which CSS property picks the font style? (a) font-family (b) font-weight (c) color (d) text-align
31. 31.✍️ CSS declarations go inside which brackets? (a) [ ] (b) < > (c) { } (d) ( )
32. 32.🎯 What kind of selector is img? (a) an element selector (b) a class selector (c) an id selector
33. 33.🔍 Which is the odd one out? (a) puts a picture on a page (b) checks a quiz answer (c) makes a form box (d) makes headings and lists
34. 34.⚖️ Which selector is the strongest? (a) an id selector (b) an element selector (c) a class selector
35. 35.Which of these does HTML do? (a) sets colours and fonts (b) shows a pop-up message (c) makes headings and lists (d) rounds box corners
36. 36.🌈 Which colour is #00ffff? (a) cyan (b) black (c) red (d) magenta
37. 37.True or false: CSS rounds box corners. (a) True (b) False
38. 38.Which of these does JavaScript do? (a) sets colours and fonts (b) gives the page structure (c) changes the text size (d) counts down a timer
39. 39.🎯 Which element does the selector .box style? (a) <h1 class="star"> (b) <h2 class="menu"> (c) <h1 class="box"> (d) <h1 id="box">
40. 40.🌈 Hex digits go 0 to 9, then A to which letter? (a) G (b) J (c) F (d) Z

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