CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 630 · 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 colour is rgb(255, 0, 0)? (a) white (b) red (c) blue (d) yellow
2. 2.What does color do? (a) makes letters bigger (b) centres a heading (c) sets the letter colour (d) makes the text bold
3. 3.🌈 What is the biggest number one colour can have in rgb()? (a) 100 (b) 99 (c) 255 (d) 1000
4. 4.📱 Which tag helps phones show a page at the right size? (a) the hr tag (b) the br tag (c) the title tag (d) the viewport meta tag
5. 5.🌈 Which colour of light is strongest in rgb(50, 83, 175)? (a) red (b) blue (c) green
6. 6.🌈 Which colour is rgb(0, 255, 0)? (a) black (b) yellow (c) bright green (d) blue
7. 7.📱 The screen is 320px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 768px) {
     p {
       font-size: 22px;
     }
   } (a) Yes (b) No
8. 8.✍️ How many declarations (property: value pairs) are in this rule?
   #top {
     font-size: 20px;
     width: 300px;
   }
9. 9.⚖️ What colour is the text of this element?
   <h2 class="big" id="logo">Hi</h2>
   CSS:
   h2 { color: yellow; }
   #logo { color: red; } (a) red (b) green (c) yellow (d) white
10. 10.📦 In the box model, which part is the text or picture? (a) padding (b) margin (c) content (d) border
11. 11.💪 Which justify-content value equal gaps, none at ends? (a) space-between (b) flex-end (c) center (d) flex-start
12. 12.Which of these is the border? (a) the gap round content (b) the text or picture (c) space outside the border (d) a solid or dotted edge
13. 13.🖌️ Which CSS property makes the text bold? (a) text-align (b) background-color (c) font-weight (d) color
14. 14.✍️ What is the selector in this CSS rule?
    h2 {
      width: 300px;
      font-weight: bold;
    } (a) h1 (b) h2 (c) width (d) bold
15. 15.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 16px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 12px;
      }
    } (a) No (b) Yes
16. 16.Which of these is the content? (a) space outside the border (b) the gap to other boxes (c) the line round the box (d) the text or picture
17. 17.🖌️ What colour is behind the letters?
    h1 {
      background-color: purple;
      color: green;
      font-size: 16px;
      text-align: right;
    } (a) green (b) purple (c) yellow
18. 18.📦 In the box model, which part is the gap to other boxes? (a) margin (b) border (c) content (d) padding
19. 19.🎨 One CSS file can style how many pages? (a) no pages (b) only one image (c) only one word (d) many pages
20. 20.What does font-weight do? (a) makes the text bold (b) colours behind the text (c) picks the font style (d) centres a heading
21. 21.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 50px wide (no margins).
22. 22.💪 Which flexbox property turns on flexbox? (a) flex-direction (b) gap (c) display: flex (d) justify-content
23. 23.True or false: .note is a class selector. (a) False (b) True
24. 24.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
25. 25.⚖️ What colour is the text of this element?
    <h2 class="big" id="main">Hi</h2>
    CSS:
    .big { color: black; }
    .big { color: orange; } (a) orange (b) blue (c) black (d) white
26. 26.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 12px;
      }
    }
27. 27.🎯 What kind of selector is h1? (a) an element selector (b) an id selector (c) a class selector
28. 28.🖌️ How big is the text, in px?
    p {
      color: blue;
      font-size: 32px;
      text-align: left;
      background-color: purple;
    }
29. 29.🎯 Which CSS selector matches this element?
    <p class="menu" id="top">Hello</p> (a) h1 (b) #menu (c) .note (d) #top
30. 30.✍️ What is the selector in this CSS rule?
    .box {
      text-align: center;
      font-size: 20px;
      background-color: yellow;
      font-weight: bold;
    } (a) 20px (b) text-align (c) .box (d) h2
31. 31.🧩 Which language changes the page live? (a) CSS (b) HTML (c) JavaScript
32. 32.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 240px;
      padding: 20px;
      border: 5px solid black;
      margin: 20px;
    }
33. 33.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) 800px or narrower (c) 800px or wider (d) turned off
34. 34.🌈 Which hex code is black? (a) #0000ff (b) #ff0000 (c) #000000 (d) #ffff00
35. 35.🖌️ Which CSS property colours behind the text? (a) text-align (b) font-weight (c) background-color (d) font-size
36. 36.True or false: padding is the gap round content. (a) True (b) False
37. 37.✍️ What value is given to text-align in this rule?
    #top {
      text-align: center;
      padding: 8px;
    } (a) text-align (b) center (c) 10px (d) yellow
38. 38.🧩 Which language makes headings and lists? (a) CSS (b) JavaScript (c) HTML
39. 39.✍️ What value is given to width in this rule?
    p {
      width: 300px;
      font-style: italic;
    } (a) 300px (b) italic (c) red (d) width
40. 40.🎯 Which CSS selector matches this element?
    <span class="big" id="end">Hello</span> (a) #big (b) #end (c) .red (d) .end

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