CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 283 · 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.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the later one (b) neither (c) the shorter one (d) the first one
2. 2.🧩 Which language puts a picture on a page? (a) HTML (b) CSS (c) JavaScript
3. 3.✍️ Which sign ends each CSS declaration? (a) . (b) : (c) ; (d) ,
4. 4.What does justify-content: flex-end do? (a) packs boxes at the start (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the end
5. 5.⚖️ Which selector is the weakest? (a) an element selector (b) a class selector (c) an id selector
6. 6.✍️ CSS declarations go inside which brackets? (a) ( ) (b) { } (c) < > (d) [ ]
7. 7.📱 Responsive design means a page ___. (a) is only for laptops (b) fits every screen (c) has no pictures (d) never changes
8. 8.🎯 Which element does the selector h1 style? (a) <h2> (b) <li class="big"> (c) <div id="main"> (d) <h1 class="big">
9. 9.💪 Which flexbox property turns on flexbox? (a) gap (b) display: flex (c) justify-content (d) align-items
10. 10.True or false: padding is the gap round content. (a) True (b) False
11. 11.📦 In the box model, which part is a solid or dotted edge? (a) border (b) padding (c) content (d) margin
12. 12.⚖️ What colour is the text of this element?
    <p class="big" id="hero">Hi</p>
    CSS:
    p { color: white; }
    #hero { color: orange; } (a) black (b) white (c) orange (d) blue
13. 13.⚖️ What colour is the text of this element?
    <p class="menu" id="main">Hi</p>
    CSS:
    .menu { color: white; }
    p { color: purple; } (a) purple (b) black (c) white (d) orange
14. 14.✍️ What is the selector in this CSS rule?
    h1 {
      color: red;
      font-weight: bold;
    } (a) color (b) bold (c) h1 (d) p
15. 15.🎨 Which attribute adds CSS inside one tag? (a) style (b) src (c) alt (d) href
16. 16.📱 What does a media query check? (a) the page title (b) the battery level (c) the time of day (d) the screen width
17. 17.🖌️ What colour are the letters?
    li {
      color: green;
      font-size: 24px;
      text-align: right;
      background-color: orange;
    } (a) orange (b) blue (c) green
18. 18.🎯 Which element does the selector #end style? (a) <span class="red"> (b) <div id="end"> (c) <div class="end"> (d) <div id="hero">
19. 19.🎯 What kind of selector is .big? (a) a class selector (b) an element selector (c) an id selector
20. 20.✍️ What value is given to border in this rule?
    h1 {
      color: red;
      text-align: center;
      font-style: italic;
      border: 2px solid;
    } (a) 300px (b) italic (c) border (d) 2px solid
21. 21.🎯 Which sign starts a class selector? (a) & (b) . (c) @ (d) #
22. 22.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) 600px or narrower (c) turned off (d) 600px or wider
23. 23.🎯 Which element does the selector .star style? (a) <p class="menu"> (b) <p class="star"> (c) <h1 class="note"> (d) <p id="star">
24. 24.🎨 Which tag connects an outside CSS file? (a) <css> (b) <a> (c) <link> (d) <img>
25. 25.⚖️ What colour is the text of this element?
    <h1 class="box" id="top">Hi</h1>
    CSS:
    h1 { color: orange; }
    h1 { color: blue; } (a) yellow (b) green (c) blue (d) orange
26. 26.✍️ What value is given to font-size in this rule?
    p {
      color: red;
      font-size: 20px;
      padding: 8px;
    } (a) 20px (b) font-size (c) yellow (d) center
27. 27.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 16px;
      }
    } (a) No (b) Yes
28. 28.🔍 Which is the odd one out? (a) adds space around boxes (b) checks a quiz answer (c) shows a pop-up message (d) changes the page live
29. 29.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 22px;
      }
    } (a) No (b) Yes
30. 30.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the hr tag (c) the viewport meta tag (d) the br tag
31. 31.What does color do? (a) sets the letter colour (b) picks the font style (c) makes letters bigger (d) makes the text bold
32. 32.🔍 Which is the odd one out? (a) makes headings and lists (b) makes a link (c) puts a picture on a page (d) rounds box corners
33. 33.🎯 Which sign starts an id selector? (a) # (b) . (c) @ (d) &
34. 34.🖌️ How big is the text, in px?
    h1 {
      text-align: left;
      background-color: white;
      font-size: 16px;
      color: red;
    }
35. 35.🎯 Which CSS selector matches this element?
    <div class="big" id="intro">Hello</div> (a) #big (b) .intro (c) .red (d) .big
36. 36.📦 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: 25px;
      border: 4px solid black;
      margin: 5px;
    }
37. 37.Which of these does HTML do? (a) changes the text size (b) makes a form box (c) adds space around boxes (d) shows a pop-up message
38. 38.🖌️ What colour is behind the letters?
    p {
      font-size: 36px;
      text-align: right;
      color: purple;
      background-color: white;
    } (a) orange (b) white (c) purple
39. 39.🎯 Which CSS selector matches this element?
    <p class="box" id="main">Hello</p> (a) #logo (b) h1 (c) #box (d) p
40. 40.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 160px;
      padding: 20px;
      border: 5px solid black;
      margin: 10px;
    }

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