CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 425 · 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 kind of selector is h1? (a) an element selector (b) a class selector (c) an id selector
2. 2.🎯 What kind of selector is #logo? (a) an id selector (b) an element selector (c) a class selector
3. 3.🌈 Which colour is #ffffff? (a) magenta (b) red (c) white (d) cyan
4. 4.📱 The screen is 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 20px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 18px;
     }
   } (a) Yes (b) No
5. 5.⚖️ What colour is the text of this element?
   <h1 class="red" id="logo">Hi</h1>
   CSS:
   h1 { color: blue; }
   h1 { color: purple; } (a) blue (b) black (c) red (d) purple
6. 6.📱 The screen is 1100px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 16px;
     }
   } (a) Yes (b) No
7. 7.⚖️ What colour is the text of this element?
   <h1 class="menu" id="top">Hi</h1>
   CSS:
   #top { color: orange; }
   h1 { color: blue; } (a) blue (b) orange (c) purple (d) black
8. 8.What does justify-content: flex-end do? (a) packs boxes at the end (b) puts boxes in the middle (c) packs boxes at the start (d) equal gaps, none at ends
9. 9.🖌️ Which CSS property colours behind the text? (a) background-color (b) font-size (c) color (d) font-family
10. 10.🎯 Which sign starts a class selector? (a) . (b) @ (c) # (d) &
11. 11.⚖️ Which selector is the weakest? (a) a class selector (b) an element selector (c) an id selector
12. 12.🧩 Which language gives the page structure? (a) HTML (b) JavaScript (c) CSS
13. 13.⚖️ What colour is the text of this element?
    <h1 class="note" id="main">Hi</h1>
    CSS:
    h1 { color: blue; }
    h1 { color: orange; } (a) purple (b) blue (c) black (d) orange
14. 14.True or false: padding is the gap round content. (a) True (b) False
15. 15.✍️ What value is given to padding in this rule?
    #top {
      padding: 8px;
      font-size: 20px;
    } (a) padding (b) 2px solid (c) bold (d) 8px
16. 16.📱 Responsive design means a page ___. (a) fits every screen (b) never changes (c) is only for laptops (d) has no pictures
17. 17.🌈 In #590000 the red part is the hex number 59. What is it as a normal number?
18. 18.True or false: .card is a class selector. (a) False (b) True
19. 19.🧩 Which language makes headings and lists? (a) CSS (b) HTML (c) JavaScript
20. 20.True or false: #top is a class selector. (a) True (b) False
21. 21.True or false: padding is the line round the box. (a) True (b) False
22. 22.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 2 (b) 6 (c) 4 (d) 3
23. 23.🎨 What does CSS stand for? (a) Cascading Style Sheets (b) Computer Style Sheets (c) Creative Sheet System (d) Colourful Site Styles
24. 24.Which of these is margin? (a) space inside the border (b) the line round the box (c) space outside the border (d) a solid or dotted edge
25. 25.Which of these does CSS do? (a) changes the page live (b) shows a pop-up message (c) rounds box corners (d) makes headings and lists
26. 26.🎯 Which CSS selector matches this element?
    <span class="box" id="top">Hello</span> (a) .top (b) #box (c) span (d) .star
27. 27.True or false: img is an id selector. (a) True (b) False
28. 28.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) puts boxes in the middle (c) packs boxes at the end (d) packs boxes at the start
29. 29.🌈 Which hex code is blue? (a) #00ffff (b) #ffff00 (c) #ffffff (d) #0000ff
30. 30.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 150px;
      padding: 20px;
      border: 3px solid black;
      margin: 20px;
    }
31. 31.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 80px;
      padding: 20px;
      border: 5px solid black;
      margin: 0px;
    }
32. 32.🎨 Which tag holds CSS inside the head? (a) <script> (b) <style> (c) <body> (d) <css>
33. 33.✍️ Which property is set to 2px solid in this rule?
    .note {
      border: 2px solid;
      padding: 8px;
      font-size: 20px;
      width: 300px;
    } (a) 2px solid (b) border (c) width (d) font-style
34. 34.🌈 Which colour is rgb(0, 0, 255)? (a) cyan (b) white (c) bright green (d) blue
35. 35.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      font-style: italic;
      padding: 8px;
      color: red;
    }
36. 36.📦 In the box model, which part is a solid or dotted edge? (a) content (b) margin (c) padding (d) border
37. 37.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the shorter one (c) the first one (d) the later one
38. 38.⚖️ What colour is the text of this element?
    <h2 class="big" id="hero">Hi</h2>
    CSS:
    #hero { color: purple; }
    .big { color: blue; } (a) blue (b) purple (c) yellow (d) orange
39. 39.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      font-size: 20px;
      color: red;
      font-style: italic;
      text-align: center;
    }
40. 40.🌈 Which colour is #0000ff? (a) red (b) magenta (c) cyan (d) blue

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