CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 116 · 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 #00ffff? (a) cyan (b) bright green (c) black (d) red
2. 2.🎯 Which element does the selector div style? (a) <p class="note"> (b) <h1 id="top"> (c) <span> (d) <div class="note">
3. 3.⚖️ What colour is the text of this element?
   <h1 class="note" id="main">Hi</h1>
   CSS:
   .note { color: orange; }
   .note { color: red; } (a) orange (b) purple (c) red (d) green
4. 4.⚖️ What colour is the text of this element?
   <h2 class="red" id="hero">Hi</h2>
   CSS:
   .red { color: white; }
   #hero { color: orange; } (a) white (b) orange (c) green (d) blue
5. 5.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) turned off (c) 800px or narrower (d) 800px or wider
6. 6.🎯 Which CSS selector matches this element?
   <h2 class="star" id="intro">Hello</h2> (a) li (b) .intro (c) .star (d) #main
7. 7.Which of these is the content? (a) the text or picture (b) the line round the box (c) space outside the border (d) the gap round content
8. 8.⚖️ What colour is the text of this element?
   <p class="menu" id="intro">Hi</p>
   CSS:
   p { color: blue; }
   .menu { color: green; } (a) red (b) green (c) blue (d) white
9. 9.🎯 What kind of selector is #top? (a) a class selector (b) an id selector (c) an element selector
10. 10.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 130px;
      padding: 15px;
      border: 3px solid black;
      margin: 0px;
    }
11. 11.🧩 Which language makes headings and lists? (a) CSS (b) HTML (c) JavaScript
12. 12.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 8px;
      }
    }
13. 13.📱 What does a media query check? (a) the screen width (b) the page title (c) the time of day (d) the battery level
14. 14.🌈 Which hex code is bright green? (a) #00ff00 (b) #00ffff (c) #0000ff (d) #ffff00
15. 15.⚖️ What colour is the text of this element?
    <p class="big" id="logo">Hi</p>
    CSS:
    .big { color: green; }
    .big { color: orange; } (a) orange (b) green (c) black (d) red
16. 16.🌈 In #00a100 the green part is the hex number a1. What is it as a normal number?
17. 17.💪 Which justify-content value puts boxes in the middle? (a) center (b) flex-start (c) flex-end (d) space-between
18. 18.🖌️ Which CSS property sets the letter colour? (a) background-color (b) color (c) font-family (d) text-align
19. 19.📱 The screen is 1100px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 1024px) {
      p {
        font-size: 6px;
      }
    }
20. 20.🌈 In #002300 the green part is the hex number 23. What is it as a normal number?
21. 21.💪 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).
22. 22.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 190px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 50px wide (no margins).
23. 23.⚖️ What colour is the text of this element?
    <h2 class="red" id="main">Hi</h2>
    CSS:
    .red { color: yellow; }
    .red { color: red; } (a) blue (b) purple (c) yellow (d) red
24. 24.📱 Responsive design means a page ___. (a) has no pictures (b) fits every screen (c) never changes (d) is only for laptops
25. 25.💪 Which flexbox property picks row or column? (a) flex-direction (b) gap (c) align-items (d) display: flex
26. 26.True or false: CSS lays out the page. (a) False (b) True
27. 27.🌈 Which colour of light is strongest in rgb(140, 153, 84)? (a) blue (b) green (c) red
28. 28.🖌️ What colour are the letters?
    h2 {
      font-size: 24px;
      text-align: left;
      color: yellow;
      background-color: purple;
    } (a) orange (b) purple (c) yellow
29. 29.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 130px;
      padding: 10px;
      border: 4px solid black;
      margin: 15px;
    }
30. 30.✍️ Which property is set to 300px in this rule?
    #top {
      color: red;
      margin: 10px;
      padding: 8px;
      width: 300px;
    } (a) width (b) 300px (c) font-style (d) color
31. 31.✍️ Which property is set to italic in this rule?
    .note {
      font-weight: bold;
      font-style: italic;
      font-size: 20px;
      text-align: center;
    } (a) color (b) font-size (c) italic (d) font-style
32. 32.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      font-size: 20px;
      background-color: yellow;
      font-weight: bold;
    }
33. 33.✍️ What is the selector in this CSS rule?
    h1 {
      padding: 8px;
      color: red;
    } (a) p (b) padding (c) h1 (d) red
34. 34.True or false: CSS changes the text size. (a) True (b) False
35. 35.Which of these is margin? (a) a solid or dotted edge (b) the gap round content (c) space inside the border (d) the gap to other boxes
36. 36.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      background-color: yellow;
    }
37. 37.🧩 Which language lays out the page? (a) JavaScript (b) HTML (c) CSS
38. 38.🎨 One CSS file can style how many pages? (a) no pages (b) only one image (c) only one word (d) many pages
39. 39.True or false: HTML makes a form box. (a) False (b) True
40. 40.🎯 Which CSS selector matches this element?
    <div class="box" id="hero">Hello</div> (a) span (b) .star (c) #top (d) #hero

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