CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 958 · 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.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the later one (c) neither (d) the first one
2. 2.🌈 Which hex code is magenta? (a) #0000ff (b) #ff0000 (c) #00ffff (d) #ff00ff
3. 3.⚖️ What colour is the text of this element?
   <p class="menu" id="hero">Hi</p>
   CSS:
   p { color: orange; }
   p { color: purple; } (a) red (b) orange (c) white (d) purple
4. 4.🌈 Hex digits go 0 to 9, then A to which letter? (a) J (b) Z (c) F (d) G
5. 5.✍️ Which property is set to 8px in this rule?
   li {
     font-size: 20px;
     padding: 8px;
     margin: 10px;
     background-color: yellow;
   } (a) 8px (b) font-weight (c) padding (d) border
6. 6.🎯 Which element does the selector .big style? (a) <div id="big"> (b) <div class="red"> (c) <div class="big"> (d) <span class="box">
7. 7.✍️ Which property is set to center in this rule?
   #top {
     padding: 8px;
     text-align: center;
     background-color: yellow;
     color: red;
   } (a) margin (b) center (c) background-color (d) text-align
8. 8.True or false: the content is the text or picture. (a) True (b) False
9. 9.✍️ How many declarations (property: value pairs) are in this rule?
   p {
     color: red;
   }
10. 10.🌈 Which colour is #ffff00? (a) black (b) yellow (c) blue (d) red
11. 11.⚖️ What colour is the text of this element?
    <h2 class="big" id="hero">Hi</h2>
    CSS:
    h2 { color: red; }
    h2 { color: yellow; } (a) red (b) orange (c) blue (d) yellow
12. 12.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      font-size: 20px;
      width: 300px;
      padding: 8px;
    }
13. 13.True or false: the border is a solid or dotted edge. (a) False (b) True
14. 14.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 180px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 50px wide (no margins).
15. 15.⚖️ Which selector is the strongest? (a) a class selector (b) an element selector (c) an id selector
16. 16.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 26px;
      }
    }
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: 50px;
      padding: 30px;
      border: 4px solid black;
      margin: 15px;
    }
18. 18.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) green (c) red (d) black
19. 19.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 6px;
      }
    } (a) No (b) Yes
20. 20.What does color do? (a) sets the letter colour (b) makes letters bigger (c) picks the font style (d) centres a heading
21. 21.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 200px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 40px wide (no margins).
22. 22.True or false: HTML counts down a timer. (a) True (b) False
23. 23.🎯 What kind of selector is .star? (a) an id selector (b) a class selector (c) an element selector
24. 24.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 380px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 80px wide (no margins).
25. 25.🖌️ Which CSS property makes the text bold? (a) color (b) font-size (c) font-weight (d) background-color
26. 26.🌈 Which colour of light is strongest in rgb(119, 126, 184)? (a) red (b) green (c) blue
27. 27.Which of these is the border? (a) space outside the border (b) space inside the border (c) the text or picture (d) a solid or dotted edge
28. 28.⚖️ What colour is the text of this element?
    <h2 class="menu" id="end">Hi</h2>
    CSS:
    .menu { color: yellow; }
    #end { color: blue; } (a) black (b) purple (c) yellow (d) blue
29. 29.🎨 A CSS file usually ends with which extension? (a) .html (b) .css (c) .png (d) .js
30. 30.⚖️ What colour is the text of this element?
    <p class="box" id="top">Hi</p>
    CSS:
    #top { color: blue; }
    .box { color: black; }
    p { color: green; } (a) black (b) yellow (c) green (d) blue
31. 31.True or false: the content is the line round the box. (a) False (b) True
32. 32.True or false: #end is an id selector. (a) True (b) False
33. 33.🧩 Which language puts a picture on a page? (a) CSS (b) HTML (c) JavaScript
34. 34.🎯 Which CSS selector matches this element?
    <h1 class="box" id="intro">Hello</h1> (a) #main (b) #intro (c) #box (d) .star
35. 35.Which of these is margin? (a) the gap round content (b) the line round the box (c) the text or picture (d) space outside the border
36. 36.✍️ What is the selector in this CSS rule?
    .note {
      border: 2px solid;
      width: 300px;
      margin: 10px;
      padding: 8px;
    } (a) .note (b) 300px (c) #top (d) border
37. 37.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
38. 38.✍️ In color: blue; which part is the property? (a) : (b) blue (c) color (d) ;
39. 39.🖌️ How big is the text, in px?
    li {
      text-align: center;
      color: green;
      background-color: purple;
      font-size: 12px;
    }
40. 40.🖌️ What colour are the letters?
    h1 {
      background-color: white;
      text-align: left;
      color: green;
      font-size: 12px;
    } (a) white (b) green (c) yellow

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