CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 376 · 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 language gives the page structure? (a) CSS (b) JavaScript (c) HTML
2. 2.⚖️ What colour is the text of this element?
   <p class="big" id="end">Hi</p>
   CSS:
   .big { color: green; }
   .big { color: white; } (a) green (b) white (c) black (d) orange
3. 3.🌈 In #6d0000 the red part is the hex number 6d. What is it as a normal number?
4. 4.True or false: HTML shows a pop-up message. (a) False (b) True
5. 5.🌈 Which colour is #0000ff? (a) bright green (b) blue (c) magenta (d) yellow
6. 6.Which of these is the content? (a) the text or picture (b) space inside the border (c) space outside the border (d) the gap round content
7. 7.🌈 Which colour is #ff00ff? (a) bright green (b) blue (c) magenta (d) cyan
8. 8.🎯 What kind of selector is #main? (a) an element selector (b) a class selector (c) an id selector
9. 9.💪 Which flexbox property spaces boxes along a row? (a) gap (b) justify-content (c) display: flex (d) flex-direction
10. 10.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 110px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 50px wide (no margins).
11. 11.🎯 Which CSS selector matches this element?
    <p class="box" id="top">Hello</p> (a) .top (b) .box (c) .star (d) #intro
12. 12.📦 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: 30px;
      border: 2px solid black;
      margin: 10px;
    }
13. 13.True or false: the border is the gap to other boxes. (a) False (b) True
14. 14.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the first one (c) the shorter one (d) the later one
15. 15.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 50px wide (no margins).
16. 16.✍️ What value is given to padding in this rule?
    .box {
      color: red;
      padding: 8px;
    } (a) padding (b) 8px (c) 2px solid (d) bold
17. 17.💪 Which justify-content value packs boxes at the start? (a) space-between (b) flex-end (c) center (d) flex-start
18. 18.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 230px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 40px wide (no margins).
19. 19.✍️ What value is given to background-color in this rule?
    p {
      background-color: yellow;
      padding: 8px;
    } (a) background-color (b) 10px (c) 8px (d) yellow
20. 20.🌈 Which hex code is blue? (a) #00ffff (b) #ff00ff (c) #00ff00 (d) #0000ff
21. 21.⚖️ What colour is the text of this element?
    <p class="menu" id="logo">Hi</p>
    CSS:
    #logo { color: green; }
    #logo { color: blue; } (a) blue (b) yellow (c) purple (d) green
22. 22.🖌️ What colour are the letters?
    li {
      font-size: 24px;
      background-color: purple;
      text-align: right;
      color: green;
    } (a) purple (b) green (c) red
23. 23.🌈 Which hex code is cyan? (a) #ffffff (b) #00ffff (c) #000000 (d) #0000ff
24. 24.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
25. 25.✍️ Which property is set to bold in this rule?
    body {
      border: 2px solid;
      font-weight: bold;
      margin: 10px;
      width: 300px;
    } (a) bold (b) border (c) font-weight (d) width
26. 26.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 8px;
      }
    }
27. 27.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 28px;
      }
    } (a) Yes (b) No
28. 28.🎯 Which CSS selector matches this element?
    <li class="menu" id="intro">Hello</li> (a) div (b) #intro (c) .intro (d) #menu
29. 29.✍️ What is the selector in this CSS rule?
    p {
      font-weight: bold;
      margin: 10px;
    } (a) 10px (b) p (c) .note (d) font-weight
30. 30.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) red (c) green (d) black
31. 31.✍️ Which property is set to center in this rule?
    h1 {
      border: 2px solid;
      text-align: center;
      margin: 10px;
    } (a) background-color (b) center (c) text-align (d) margin
32. 32.What does text-align do? (a) makes the text bold (b) picks the font style (c) makes letters bigger (d) centres a heading
33. 33.Which of these is the border? (a) space inside the border (b) space outside the border (c) the text or picture (d) a solid or dotted edge
34. 34.🎯 How many elements on a page should have the same id? (a) 2 (b) any number (c) 1 (d) 5
35. 35.🖌️ What colour is behind the letters?
    li {
      font-size: 20px;
      text-align: right;
      color: black;
      background-color: white;
    } (a) black (b) white (c) red
36. 36.Which of these does HTML do? (a) shows a pop-up message (b) puts a picture on a page (c) lays out the page (d) counts down a timer
37. 37.Which of these does HTML do? (a) sets colours and fonts (b) makes headings and lists (c) checks a quiz answer (d) changes the text size
38. 38.✍️ In color: blue; which part is the property? (a) ; (b) color (c) : (d) blue
39. 39.True or false: CSS lays out the page. (a) False (b) True
40. 40.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 250px;
      padding: 15px;
      border: 4px solid black;
      margin: 10px;
    }

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