CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 821 · 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 of these does HTML do? (a) lays out the page (b) rounds box corners (c) changes the text size (d) gives the page structure
2. 2.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) neither (c) the later one (d) the first one
3. 3.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) exactly 1000px (c) 600px or narrower (d) turned off
4. 4.✍️ Which property is set to bold in this rule?
   .note {
     font-weight: bold;
     margin: 10px;
   } (a) width (b) border (c) font-weight (d) bold
5. 5.🎯 What kind of selector is body? (a) an element selector (b) an id selector (c) a class selector
6. 6.⚖️ What colour is the text of this element?
   <p class="star" id="end">Hi</p>
   CSS:
   #end { color: orange; }
   p { color: white; } (a) blue (b) black (c) orange (d) white
7. 7.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 50px;
     padding: 10px;
     border: 2px solid black;
     margin: 5px;
   }
8. 8.🌈 In #000086 the blue part is the hex number 86. What is it as a normal number?
9. 9.🧩 Which language reacts to a button click? (a) CSS (b) HTML (c) JavaScript
10. 10.💪 Which flexbox property turns on flexbox? (a) gap (b) display: flex (c) align-items (d) flex-direction
11. 11.What does color do? (a) makes the text bold (b) centres a heading (c) makes letters bigger (d) sets the letter colour
12. 12.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 400px;
      justify-content: center;
    }
    Inside are 3 boxes, each 100px wide (no margins).
13. 13.✍️ In color: blue; which part is the value? (a) : (b) ; (c) blue (d) color
14. 14.⚖️ What colour is the text of this element?
    <h2 class="box" id="intro">Hi</h2>
    CSS:
    h2 { color: green; }
    h2 { color: purple; } (a) green (b) yellow (c) black (d) purple
15. 15.✍️ In color: blue; which part is the property? (a) : (b) color (c) ; (d) blue
16. 16.🖌️ Which CSS property sets the letter colour? (a) color (b) font-size (c) text-align (d) font-weight
17. 17.🌈 Which colour is rgb(255, 255, 0)? (a) blue (b) magenta (c) yellow (d) white
18. 18.✍️ CSS declarations go inside which brackets? (a) ( ) (b) [ ] (c) < > (d) { }
19. 19.⚖️ What colour is the text of this element?
    <p class="big" id="top">Hi</p>
    CSS:
    p { color: yellow; }
    p { color: white; } (a) yellow (b) white (c) red (d) purple
20. 20.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 24px;
      }
    }
21. 21.📦 In the box model, which part is space inside the border? (a) border (b) margin (c) content (d) padding
22. 22.⚖️ Which selector is the strongest? (a) an element selector (b) a class selector (c) an id selector
23. 23.🎨 What does CSS stand for? (a) Creative Sheet System (b) Computer Style Sheets (c) Cascading Style Sheets (d) Colourful Site Styles
24. 24.📱 What does a media query check? (a) the battery level (b) the page title (c) the screen width (d) the time of day
25. 25.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 60px;
      padding: 30px;
      border: 4px solid black;
      margin: 5px;
    }
26. 26.What does justify-content: center do? (a) packs boxes at the end (b) packs boxes at the start (c) equal gaps, none at ends (d) puts boxes in the middle
27. 27.🌈 Which colour is #ff00ff? (a) red (b) bright green (c) magenta (d) blue
28. 28.🎯 Which CSS selector matches this element?
    <h1 class="note" id="end">Hello</h1> (a) #note (b) h2 (c) .end (d) h1
29. 29.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 320px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 100px wide (no margins).
30. 30.🌈 Which hex code is yellow? (a) #000000 (b) #ffff00 (c) #ffffff (d) #00ff00
31. 31.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      padding: 8px;
    }
32. 32.🌈 Hex digits go 0 to 9, then A to which letter? (a) J (b) F (c) G (d) Z
33. 33.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      font-weight: bold;
    }
34. 34.⚖️ What colour is the text of this element?
    <p class="big" id="logo">Hi</p>
    CSS:
    p { color: white; }
    p { color: orange; } (a) white (b) red (c) orange (d) green
35. 35.✍️ Which property is set to center in this rule?
    .box {
      font-size: 20px;
      width: 300px;
      text-align: center;
      font-weight: bold;
    } (a) margin (b) text-align (c) center (d) background-color
36. 36.What does justify-content: space-between do? (a) packs boxes at the start (b) packs boxes at the end (c) puts boxes in the middle (d) equal gaps, none at ends
37. 37.Which of these is the content? (a) the text or picture (b) space inside the border (c) the gap round content (d) the line round the box
38. 38.✍️ How many declarations (property: value pairs) are in this rule?
    li {
      text-align: center;
      border: 2px solid;
      background-color: yellow;
    }
39. 39.✍️ How many declarations (property: value pairs) are in this rule?
    h1 {
      border: 2px solid;
      background-color: yellow;
    }
40. 40.✍️ Which sign ends each CSS declaration? (a) : (b) . (c) ; (d) ,

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