CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 301 · 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 is the text of this element?
   <p class="big" id="intro">Hi</p>
   CSS:
   p { color: green; }
   #intro { color: red; }
   .big { color: black; } (a) blue (b) black (c) red (d) green
2. 2.🌈 In #001700 the green part is the hex number 17. What is it as a normal number?
3. 3.What does color do? (a) centres a heading (b) colours behind the text (c) sets the letter colour (d) makes letters bigger
4. 4.✍️ What value is given to background-color in this rule?
   body {
     background-color: yellow;
     margin: 10px;
     font-size: 20px;
   } (a) background-color (b) 10px (c) 8px (d) yellow
5. 5.💪 Which justify-content value packs boxes at the end? (a) flex-start (b) center (c) space-between (d) flex-end
6. 6.🎨 What does CSS stand for? (a) Creative Sheet System (b) Computer Style Sheets (c) Cascading Style Sheets (d) Colourful Site Styles
7. 7.🌈 Which colour is #ffffff? (a) cyan (b) red (c) bright green (d) white
8. 8.🌈 Which hex code is magenta? (a) #ffff00 (b) #0000ff (c) #ff00ff (d) #ffffff
9. 9.💪 Which flexbox property sets space between boxes? (a) justify-content (b) display: flex (c) gap (d) align-items
10. 10.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the shorter one (c) the later one (d) the first one
11. 11.✍️ Which sign ends each CSS declaration? (a) . (b) , (c) ; (d) :
12. 12.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      font-style: italic;
      background-color: yellow;
    }
13. 13.🌈 Which colour is #000000? (a) yellow (b) red (c) black (d) cyan
14. 14.🖌️ Which CSS property sets the letter colour? (a) background-color (b) font-weight (c) color (d) font-family
15. 15.🎯 Which element does the selector .box style? (a) <h2 id="box"> (b) <h2 class="star"> (c) <li class="menu"> (d) <h2 class="box">
16. 16.🎯 Which element does the selector #intro style? (a) <h1 id="main"> (b) <h1 id="intro"> (c) <h1 class="intro"> (d) <h2 class="menu">
17. 17.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 280px;
      padding: 20px;
      border: 2px solid black;
      margin: 20px;
    }
18. 18.🧩 Which language makes headings and lists? (a) HTML (b) JavaScript (c) CSS
19. 19.🖌️ How big is the text, in px?
    h2 {
      color: orange;
      font-size: 12px;
      background-color: white;
      text-align: right;
    }
20. 20.What does justify-content: center do? (a) equal gaps, none at ends (b) packs boxes at the end (c) puts boxes in the middle (d) packs boxes at the start
21. 21.🌈 Which colour is rgb(0, 255, 255)? (a) red (b) black (c) cyan (d) bright green
22. 22.⚖️ What colour is the text of this element?
    <h2 class="red" id="end">Hi</h2>
    CSS:
    #end { color: white; }
    #end { color: purple; } (a) red (b) white (c) purple (d) black
23. 23.🎯 What kind of selector is #main? (a) an element selector (b) an id selector (c) a class selector
24. 24.Which of these does CSS do? (a) shows a pop-up message (b) adds space around boxes (c) makes a link (d) gives the page structure
25. 25.Which of these does HTML do? (a) puts a picture on a page (b) rounds box corners (c) shows a pop-up message (d) changes the page live
26. 26.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 70px;
      padding: 15px;
      border: 3px solid black;
      margin: 0px;
    }
27. 27.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 90px;
      padding: 10px;
      border: 5px solid black;
      margin: 15px;
    }
28. 28.True or false: margin is space outside the border. (a) True (b) False
29. 29.📱 Responsive design means a page ___. (a) fits every screen (b) has no pictures (c) never changes (d) is only for laptops
30. 30.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 130px;
      padding: 5px;
      border: 1px solid black;
      margin: 0px;
    }
31. 31.🌈 Which colour of light is strongest in rgb(15, 154, 89)? (a) green (b) red (c) blue
32. 32.📱 The screen is 540px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 22px;
      }
    } (a) No (b) Yes
33. 33.⚖️ What colour is the text of this element?
    <h1 class="big" id="main">Hi</h1>
    CSS:
    h1 { color: purple; }
    h1 { color: blue; } (a) purple (b) black (c) blue (d) yellow
34. 34.⚖️ What colour is the text of this element?
    <h2 class="menu" id="main">Hi</h2>
    CSS:
    #main { color: red; }
    .menu { color: white; } (a) white (b) orange (c) blue (d) red
35. 35.What does font-size do? (a) centres a heading (b) picks the font style (c) makes letters bigger (d) sets the letter colour
36. 36.⚖️ What colour is the text of this element?
    <h2 class="red" id="hero">Hi</h2>
    CSS:
    h2 { color: blue; }
    h2 { color: green; } (a) purple (b) red (c) blue (d) green
37. 37.Which of these is padding? (a) space outside the border (b) the gap to other boxes (c) space inside the border (d) the line round the box
38. 38.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      width: 300px;
      border: 2px solid;
    }
39. 39.🎨 Which tag connects an outside CSS file? (a) <css> (b) <img> (c) <a> (d) <link>
40. 40.✍️ Which property is set to yellow in this rule?
    p {
      border: 2px solid;
      font-size: 20px;
      font-weight: bold;
      background-color: yellow;
    } (a) margin (b) yellow (c) padding (d) background-color

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