CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 739 · 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.✍️ CSS declarations go inside which brackets? (a) < > (b) [ ] (c) ( ) (d) { }
2. 2.🎯 Which CSS selector matches this element?
   <p class="big" id="top">Hello</p> (a) #top (b) #big (c) #intro (d) .top
3. 3.🧩 Which language lays out the page? (a) CSS (b) JavaScript (c) HTML
4. 4.True or false: HTML puts a picture on a page. (a) False (b) True
5. 5.🎯 Which CSS selector matches this element?
   <li class="big" id="end">Hello</li> (a) #end (b) #hero (c) div (d) .end
6. 6.📦 In the box model, which part is the line round the box? (a) margin (b) content (c) border (d) padding
7. 7.⚖️ What colour is the text of this element?
   <p class="note" id="hero">Hi</p>
   CSS:
   p { color: white; }
   p { color: black; } (a) green (b) black (c) white (d) yellow
8. 8.🌈 In #8d0000 the red part is the hex number 8d. What is it as a normal number?
9. 9.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 420px;
     justify-content: flex-end;
   }
   Inside are 4 boxes, each 100px wide (no margins).
10. 10.⚖️ Which selector is the strongest? (a) an id selector (b) a class selector (c) an element selector
11. 11.✍️ Which sign ends each CSS declaration? (a) : (b) , (c) . (d) ;
12. 12.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
13. 13.🖌️ What colour are the letters?
    h1 {
      color: black;
      background-color: purple;
      text-align: center;
      font-size: 40px;
    } (a) black (b) purple (c) white
14. 14.🌈 Which colour of light is strongest in rgb(44, 244, 85)? (a) red (b) blue (c) green
15. 15.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
16. 16.🧩 Which language shows a pop-up message? (a) JavaScript (b) CSS (c) HTML
17. 17.🎯 Which sign starts an id selector? (a) @ (b) . (c) # (d) &
18. 18.🎯 What kind of selector is #top? (a) an element selector (b) a class selector (c) an id selector
19. 19.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 14px;
      }
    } (a) No (b) Yes
20. 20.✍️ What value is given to width in this rule?
    .box {
      width: 300px;
      color: red;
    } (a) 300px (b) red (c) width (d) italic
21. 21.🌈 In #00003f the blue part is the hex number 3f. What is it as a normal number?
22. 22.🌈 Which colour is #ffffff? (a) white (b) cyan (c) bright green (d) blue
23. 23.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 20px;
      }
    }
24. 24.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 150px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 40px wide (no margins).
25. 25.What does justify-content: space-between do? (a) packs boxes at the end (b) puts boxes in the middle (c) equal gaps, none at ends (d) packs boxes at the start
26. 26.🎯 Which element does the selector h1 style? (a) <h2> (b) <div id="top"> (c) <li class="menu"> (d) <h1 class="menu">
27. 27.Which of these is the content? (a) the text or picture (b) the line round the box (c) space inside the border (d) a solid or dotted edge
28. 28.⚖️ What colour is the text of this element?
    <h1 class="box" id="intro">Hi</h1>
    CSS:
    #intro { color: red; }
    h1 { color: purple; } (a) purple (b) orange (c) blue (d) red
29. 29.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      color: red;
    }
30. 30.🧩 Which language makes a form box? (a) JavaScript (b) CSS (c) HTML
31. 31.🖌️ How big is the text, in px?
    h2 {
      text-align: right;
      font-size: 36px;
      background-color: green;
      color: black;
    }
32. 32.🖌️ How big is the text, in px?
    h2 {
      background-color: blue;
      color: black;
      text-align: center;
      font-size: 12px;
    }
33. 33.🌈 Hex digits go 0 to 9, then A to which letter? (a) Z (b) J (c) G (d) F
34. 34.True or false: body is an id selector. (a) False (b) True
35. 35.⚖️ What colour is the text of this element?
    <h1 class="menu" id="hero">Hi</h1>
    CSS:
    h1 { color: green; }
    h1 { color: orange; } (a) orange (b) white (c) green (d) red
36. 36.True or false: CSS shows a pop-up message. (a) False (b) True
37. 37.Which of these is the border? (a) the line round the box (b) the gap round content (c) the text or picture (d) the gap to other boxes
38. 38.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 200px;
      padding: 15px;
      border: 1px solid black;
      margin: 10px;
    }
39. 39.What does justify-content: flex-start 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
40. 40.🖌️ What colour is behind the letters?
    h2 {
      color: orange;
      text-align: left;
      font-size: 20px;
      background-color: white;
    } (a) green (b) orange (c) white

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