CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 359 · 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.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 230px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 60px wide (no margins).
2. 2.🎨 What does CSS stand for? (a) Creative Sheet System (b) Cascading Style Sheets (c) Computer Style Sheets (d) Colourful Site Styles
3. 3.What does justify-content: space-between do? (a) packs boxes at the start (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the end
4. 4.True or false: padding is the text or picture. (a) True (b) False
5. 5.🖌️ What colour are the letters?
   h2 {
     text-align: left;
     background-color: white;
     font-size: 20px;
     color: orange;
   } (a) orange (b) red (c) white
6. 6.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 20px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 16px;
     }
   }
7. 7.✍️ What value is given to border in this rule?
   h2 {
     margin: 10px;
     width: 300px;
     background-color: yellow;
     border: 2px solid;
   } (a) 300px (b) italic (c) 2px solid (d) border
8. 8.📱 max-width: 600px applies when the screen is ___. (a) 600px or narrower (b) 600px or wider (c) turned off (d) exactly 1000px
9. 9.🔍 Which is the odd one out? (a) gives the page structure (b) makes a form box (c) adds space around boxes (d) makes headings and lists
10. 10.🖌️ Where does the text sit on its line?
    p {
      text-align: left;
      color: black;
      font-size: 12px;
      background-color: purple;
    } (a) in the middle (b) on the right (c) on the left
11. 11.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 270px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 50px wide (no margins).
12. 12.⚖️ What colour is the text of this element?
    <p class="big" id="logo">Hi</p>
    CSS:
    p { color: yellow; }
    #logo { color: orange; } (a) white (b) purple (c) orange (d) yellow
13. 13.🌈 In #00001b the blue part is the hex number 1b. What is it as a normal number?
14. 14.🖌️ How big is the text, in px?
    h2 {
      color: orange;
      text-align: left;
      font-size: 16px;
      background-color: blue;
    }
15. 15.✍️ What value is given to font-weight in this rule?
    .box {
      font-weight: bold;
      border: 2px solid;
      background-color: yellow;
      color: red;
    } (a) bold (b) font-weight (c) 2px solid (d) 300px
16. 16.🌈 Which hex code is magenta? (a) #ff00ff (b) #0000ff (c) #ff0000 (d) #ffffff
17. 17.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
18. 18.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 60px;
      padding: 20px;
      border: 3px solid black;
      margin: 0px;
    }
19. 19.✍️ Which property is set to yellow in this rule?
    h1 {
      text-align: center;
      background-color: yellow;
    } (a) yellow (b) margin (c) padding (d) background-color
20. 20.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) the first one (c) neither (d) the shorter one
21. 21.🔍 Which is the odd one out? (a) sets colours and fonts (b) lays out the page (c) changes the text size (d) gives the page structure
22. 22.⚖️ What colour is the text of this element?
    <p class="menu" id="main">Hi</p>
    CSS:
    p { color: orange; }
    p { color: green; } (a) green (b) yellow (c) orange (d) blue
23. 23.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 6px;
      }
    }
24. 24.🌈 Which colour is rgb(255, 0, 255)? (a) bright green (b) cyan (c) magenta (d) white
25. 25.✍️ Which property is set to italic in this rule?
    h1 {
      font-style: italic;
      color: red;
    } (a) font-style (b) font-size (c) color (d) italic
26. 26.What does font-weight do? (a) colours behind the text (b) centres a heading (c) makes letters bigger (d) makes the text bold
27. 27.📦 In the box model, which part is the gap to other boxes? (a) border (b) padding (c) content (d) margin
28. 28.⚖️ What colour is the text of this element?
    <p class="box" id="main">Hi</p>
    CSS:
    p { color: purple; }
    #main { color: yellow; } (a) red (b) yellow (c) blue (d) purple
29. 29.⚖️ What colour is the text of this element?
    <p class="menu" id="top">Hi</p>
    CSS:
    p { color: green; }
    #top { color: yellow; }
    .menu { color: blue; } (a) blue (b) purple (c) green (d) yellow
30. 30.🌈 Which colour is #ffffff? (a) magenta (b) yellow (c) white (d) black
31. 31.True or false: .menu is an element selector. (a) True (b) False
32. 32.⚖️ What colour is the text of this element?
    <h2 class="big" id="intro">Hi</h2>
    CSS:
    .big { color: yellow; }
    .big { color: orange; } (a) green (b) orange (c) yellow (d) white
33. 33.✍️ Which property is set to red in this rule?
    h1 {
      font-size: 20px;
      color: red;
    } (a) color (b) red (c) text-align (d) font-size
34. 34.🎯 How many elements on a page should have the same id? (a) any number (b) 5 (c) 2 (d) 1
35. 35.📱 The screen is 1366px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 14px;
      }
    } (a) Yes (b) No
36. 36.⚖️ What colour is the text of this element?
    <h2 class="big" id="end">Hi</h2>
    CSS:
    .big { color: white; }
    .big { color: blue; } (a) orange (b) white (c) yellow (d) blue
37. 37.🔍 Which is the odd one out? (a) sets colours and fonts (b) adds space around boxes (c) changes the page live (d) lays out the page
38. 38.✍️ Which property is set to yellow in this rule?
    .note {
      background-color: yellow;
      color: red;
      border: 2px solid;
    } (a) padding (b) margin (c) background-color (d) yellow
39. 39.Which of these is the content? (a) space outside the border (b) the gap round content (c) the line round the box (d) the text or picture
40. 40.✍️ Which sign goes between a property and its value? (a) ; (b) - (c) : (d) =

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