CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 866 · 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 value is given to font-weight in this rule?
   h1 {
     font-size: 20px;
     font-weight: bold;
     border: 2px solid;
   } (a) 300px (b) bold (c) font-weight (d) 2px solid
2. 2.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 24px;
   }
   @media (max-width: 1024px) {
     p {
       font-size: 22px;
     }
   }
3. 3.🎯 What kind of selector is img? (a) an id selector (b) an element selector (c) a class selector
4. 4.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 140px;
     padding: 20px;
     border: 3px solid black;
     margin: 0px;
   }
5. 5.🎯 Which sign starts a class selector? (a) # (b) . (c) @ (d) &
6. 6.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) turned off (c) 800px or wider (d) exactly 100px
7. 7.📱 What does a media query check? (a) the time of day (b) the page title (c) the battery level (d) the screen width
8. 8.⚖️ What colour is the text of this element?
   <p class="red" id="logo">Hi</p>
   CSS:
   p { color: red; }
   #logo { color: green; } (a) green (b) red (c) white (d) purple
9. 9.✍️ What value is given to padding in this rule?
   h1 {
     width: 300px;
     padding: 8px;
     margin: 10px;
   } (a) 2px solid (b) padding (c) 8px (d) bold
10. 10.🔍 Which is the odd one out? (a) reacts to a button click (b) adds space around boxes (c) sets colours and fonts (d) lays out the page
11. 11.⚖️ What colour is the text of this element?
    <p class="box" id="top">Hi</p>
    CSS:
    .box { color: red; }
    .box { color: blue; } (a) white (b) red (c) black (d) blue
12. 12.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the br tag (c) the viewport meta tag (d) the hr tag
13. 13.🌈 Which colour is rgb(255, 0, 255)? (a) magenta (b) red (c) cyan (d) yellow
14. 14.Which of these does CSS do? (a) makes headings and lists (b) makes a form box (c) sets colours and fonts (d) puts a picture on a page
15. 15.What does background-color do? (a) picks the font style (b) makes letters bigger (c) centres a heading (d) colours behind the text
16. 16.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 240px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 60px wide (no margins).
17. 17.🌈 Which colour is rgb(255, 255, 255)? (a) cyan (b) red (c) white (d) magenta
18. 18.🖌️ What colour are the letters?
    h1 {
      text-align: center;
      font-size: 12px;
      color: blue;
      background-color: red;
    } (a) black (b) blue (c) red
19. 19.Which of these is padding? (a) space outside the border (b) space inside the border (c) the line round the box (d) the gap to other boxes
20. 20.Which of these is the content? (a) space outside the border (b) the text or picture (c) the line round the box (d) the gap to other boxes
21. 21.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 300px;
      justify-content: center;
    }
    Inside are 4 boxes, each 40px wide (no margins).
22. 22.🎨 A CSS file usually ends with which extension? (a) .png (b) .js (c) .html (d) .css
23. 23.True or false: #end is a class selector. (a) True (b) False
24. 24.✍️ Which sign ends each CSS declaration? (a) . (b) , (c) ; (d) :
25. 25.🌈 In #rrggbb, which colour do the first two digits give? (a) black (b) green (c) red (d) blue
26. 26.🖌️ What colour are the letters?
    p {
      color: green;
      text-align: center;
      background-color: red;
      font-size: 28px;
    } (a) orange (b) red (c) green
27. 27.Which of these does CSS do? (a) changes the page live (b) gives the page structure (c) makes a link (d) lays out the page
28. 28.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) 600px or narrower (c) exactly 1000px (d) turned off
29. 29.🧩 Which language counts down a timer? (a) JavaScript (b) CSS (c) HTML
30. 30.✍️ Which property is set to red in this rule?
    li {
      width: 300px;
      color: red;
    } (a) color (b) font-size (c) red (d) text-align
31. 31.🎯 Can many elements share the same class? (a) No (b) Yes
32. 32.What does color do? (a) sets the letter colour (b) picks the font style (c) colours behind the text (d) makes letters bigger
33. 33.Which of these is margin? (a) the line round the box (b) space inside the border (c) the gap round content (d) space outside the border
34. 34.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 28px;
      }
    }
35. 35.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 18px;
      }
    } (a) Yes (b) No
36. 36.⚖️ What colour is the text of this element?
    <h1 class="note" id="main">Hi</h1>
    CSS:
    h1 { color: purple; }
    h1 { color: black; } (a) red (b) purple (c) black (d) blue
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: 100px;
      padding: 5px;
      border: 1px solid black;
      margin: 10px;
    }
38. 38.⚖️ What colour is the text of this element?
    <p class="box" id="main">Hi</p>
    CSS:
    p { color: yellow; }
    p { color: green; } (a) white (b) purple (c) green (d) yellow
39. 39.🌈 Which colour is rgb(255, 0, 0)? (a) yellow (b) red (c) blue (d) bright green
40. 40.What does justify-content: center do? (a) packs boxes at the start (b) puts boxes in the middle (c) packs boxes at the end (d) equal gaps, none at ends

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