CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 839 · 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.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 16px;
     }
   }
2. 2.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 320px;
     justify-content: center;
   }
   Inside are 2 boxes, each 100px wide (no margins).
3. 3.✍️ CSS declarations go inside which brackets? (a) ( ) (b) { } (c) < > (d) [ ]
4. 4.True or false: HTML makes headings and lists. (a) True (b) False
5. 5.🧩 Which language lays out the page? (a) CSS (b) JavaScript (c) HTML
6. 6.🧩 Which language puts a picture on a page? (a) JavaScript (b) CSS (c) HTML
7. 7.True or false: HTML gives the page structure. (a) False (b) True
8. 8.🔍 Which is the odd one out? (a) makes a form box (b) gives the page structure (c) makes a link (d) rounds box corners
9. 9.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 16px;
   }
   @media (min-width: 768px) {
     p {
       font-size: 24px;
     }
   }
10. 10.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 16px;
      }
    } (a) Yes (b) No
11. 11.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 210px;
      justify-content: space-between;
    }
    Inside are 3 boxes, each 50px wide (no margins).
12. 12.✍️ What is the selector in this CSS rule?
    h1 {
      padding: 8px;
      color: red;
    } (a) padding (b) p (c) h1 (d) red
13. 13.✍️ What value is given to font-size in this rule?
    body {
      background-color: yellow;
      font-size: 20px;
    } (a) yellow (b) font-size (c) 20px (d) center
14. 14.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 16px;
      }
    }
15. 15.📱 What does a media query check? (a) the time of day (b) the screen width (c) the battery level (d) the page title
16. 16.📱 min-width: 800px applies when the screen is ___. (a) 800px or wider (b) turned off (c) 800px or narrower (d) exactly 100px
17. 17.🖌️ What colour are the letters?
    h1 {
      text-align: right;
      background-color: blue;
      font-size: 32px;
      color: orange;
    } (a) orange (b) blue (c) red
18. 18.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 16px;
      }
    }
19. 19.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      text-align: center;
      color: red;
      border: 2px solid;
      font-size: 20px;
    }
20. 20.⚖️ What colour is the text of this element?
    <p class="star" id="end">Hi</p>
    CSS:
    p { color: purple; }
    .star { color: red; }
    #end { color: green; } (a) red (b) white (c) purple (d) green
21. 21.What does font-size do? (a) sets the letter colour (b) makes the text bold (c) colours behind the text (d) makes letters bigger
22. 22.🌈 In #rrggbb, which colour do the last two digits give? (a) white (b) blue (c) green (d) red
23. 23.🖌️ Which CSS property colours behind the text? (a) font-weight (b) font-family (c) background-color (d) color
24. 24.🔍 Which is the odd one out? (a) makes headings and lists (b) makes a link (c) puts a picture on a page (d) counts down a timer
25. 25.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      margin: 10px;
      width: 300px;
      font-size: 20px;
      border: 2px solid;
    }
26. 26.🎯 Which element does the selector li style? (a) <p id="intro"> (b) <li class="menu"> (c) <span class="menu"> (d) <div>
27. 27.✍️ What is the selector in this CSS rule?
    h2 {
      text-align: center;
      font-weight: bold;
      padding: 8px;
    } (a) h2 (b) bold (c) h1 (d) text-align
28. 28.🌈 In #0000cf the blue part is the hex number cf. What is it as a normal number?
29. 29.🎯 Which CSS selector matches this element?
    <div class="menu" id="logo">Hello</div> (a) div (b) span (c) #menu (d) .logo
30. 30.💪 Which flexbox property spaces boxes along a row? (a) gap (b) flex-direction (c) display: flex (d) justify-content
31. 31.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 240px;
      justify-content: center;
    }
    Inside are 2 boxes, each 100px wide (no margins).
32. 32.🌈 Which hex code is magenta? (a) #ffff00 (b) #ff0000 (c) #ff00ff (d) #ffffff
33. 33.🌈 In #0000d0 the blue part is the hex number d0. What is it as a normal number?
34. 34.Which of these is the content? (a) space inside the border (b) the gap to other boxes (c) the line round the box (d) the text or picture
35. 35.🎯 What kind of selector is body? (a) a class selector (b) an id selector (c) an element selector
36. 36.🌈 In #7d0000 the red part is the hex number 7d. What is it as a normal number?
37. 37.✍️ Which property is set to 10px in this rule?
    h1 {
      margin: 10px;
      font-size: 20px;
    } (a) padding (b) margin (c) 10px (d) font-weight
38. 38.🎨 Which attribute adds CSS inside one tag? (a) href (b) src (c) alt (d) style
39. 39.🎨 One CSS file can style how many pages? (a) many pages (b) no pages (c) only one image (d) only one word
40. 40.🧩 Which language changes the page live? (a) HTML (b) JavaScript (c) CSS

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