CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 268 · 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.🧩 Which language changes the page live? (a) JavaScript (b) HTML (c) CSS
2. 2.✍️ Which property is set to italic in this rule?
   body {
     font-style: italic;
     padding: 8px;
     background-color: yellow;
   } (a) font-size (b) color (c) italic (d) font-style
3. 3.🌈 Which colour is #00ffff? (a) white (b) blue (c) black (d) cyan
4. 4.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 200px;
     justify-content: flex-start;
   }
   Inside are 2 boxes, each 60px wide (no margins).
5. 5.Which of these is the content? (a) space outside the border (b) the gap round content (c) space inside the border (d) the text or picture
6. 6.🔍 Which is the odd one out? (a) changes the page live (b) counts down a timer (c) makes a form box (d) reacts to a button click
7. 7.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 60px;
     padding: 5px;
     border: 4px solid black;
     margin: 20px;
   }
8. 8.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) 800px or narrower (c) turned off (d) exactly 100px
9. 9.🌈 Which colour of light is strongest in rgb(39, 51, 207)? (a) red (b) green (c) blue
10. 10.🎯 What kind of selector is p? (a) an id selector (b) an element selector (c) a class selector
11. 11.✍️ Which property is set to 20px in this rule?
    body {
      border: 2px solid;
      font-size: 20px;
      text-align: center;
      padding: 8px;
    } (a) 20px (b) text-align (c) background-color (d) font-size
12. 12.💪 Which justify-content value packs boxes at the end? (a) space-between (b) center (c) flex-end (d) flex-start
13. 13.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
14. 14.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the later one (c) the first one (d) the shorter one
15. 15.🖌️ What colour is behind the letters?
    p {
      text-align: left;
      font-size: 12px;
      color: orange;
      background-color: red;
    } (a) orange (b) red (c) green
16. 16.🖌️ Which CSS property sets the letter colour? (a) color (b) background-color (c) font-size (d) text-align
17. 17.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) green (c) red (d) blue
18. 18.🌈 Which hex code is cyan? (a) #00ff00 (b) #00ffff (c) #000000 (d) #ff0000
19. 19.🌈 In #000077 the blue part is the hex number 77. What is it as a normal number?
20. 20.🎯 Which CSS selector matches this element?
    <span class="box" id="end">Hello</span> (a) #hero (b) #box (c) .box (d) .star
21. 21.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 180px;
      justify-content: center;
    }
    Inside are 2 boxes, each 50px wide (no margins).
22. 22.📱 What does a media query check? (a) the page title (b) the battery level (c) the time of day (d) the screen width
23. 23.🎨 What does CSS stand for? (a) Cascading Style Sheets (b) Creative Sheet System (c) Colourful Site Styles (d) Computer Style Sheets
24. 24.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) 600px or wider (c) 600px or narrower (d) turned off
25. 25.✍️ CSS declarations go inside which brackets? (a) ( ) (b) { } (c) [ ] (d) < >
26. 26.True or false: JavaScript makes headings and lists. (a) False (b) True
27. 27.What does color do? (a) makes letters bigger (b) centres a heading (c) colours behind the text (d) sets the letter colour
28. 28.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 10px;
      }
    }
29. 29.🌈 In #rrggbb, which colour do the first two digits give? (a) red (b) black (c) blue (d) green
30. 30.⚖️ What colour is the text of this element?
    <p class="red" id="logo">Hi</p>
    CSS:
    p { color: blue; }
    .red { color: green; } (a) blue (b) orange (c) green (d) purple
31. 31.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 170px;
      padding: 30px;
      border: 3px solid black;
      margin: 5px;
    }
32. 32.🧩 Which language lays out the page? (a) CSS (b) JavaScript (c) HTML
33. 33.💪 Which justify-content value equal gaps, none at ends? (a) center (b) flex-start (c) flex-end (d) space-between
34. 34.🎯 Which sign starts a class selector? (a) @ (b) . (c) & (d) #
35. 35.🎯 Which CSS selector matches this element?
    <div class="note" id="top">Hello</div> (a) .big (b) span (c) div (d) #intro
36. 36.🖌️ Where does the text sit on its line?
    h1 {
      background-color: black;
      text-align: left;
      color: red;
      font-size: 12px;
    } (a) in the middle (b) on the right (c) on the left
37. 37.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 110px;
      padding: 10px;
      border: 1px solid black;
      margin: 5px;
    }
38. 38.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 280px;
      padding: 30px;
      border: 5px solid black;
      margin: 0px;
    }
39. 39.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      border: 2px solid;
      font-size: 20px;
    }
40. 40.🎯 Which element does the selector .menu style? (a) <div id="menu"> (b) <span class="big"> (c) <div class="menu"> (d) <div class="note">

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