CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 588 · 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.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 4 (b) 2 (c) 3 (d) 6
2. 2.💪 Which flexbox property lines boxes up across? (a) align-items (b) display: flex (c) justify-content (d) flex-direction
3. 3.🔍 Which is the odd one out? (a) changes the text size (b) sets colours and fonts (c) reacts to a button click (d) adds space around boxes
4. 4.🎯 Which CSS selector matches this element?
   <div class="star" id="logo">Hello</div> (a) .menu (b) .logo (c) div (d) span
5. 5.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 150px;
     justify-content: space-between;
   }
   Inside are 2 boxes, each 40px wide (no margins).
6. 6.Which of these does JavaScript do? (a) adds space around boxes (b) makes headings and lists (c) shows a pop-up message (d) rounds box corners
7. 7.✍️ Which sign ends each CSS declaration? (a) : (b) , (c) . (d) ;
8. 8.What does color do? (a) makes the text bold (b) picks the font style (c) makes letters bigger (d) sets the letter colour
9. 9.🖌️ What colour is behind the letters?
   p {
     color: blue;
     background-color: yellow;
     text-align: center;
     font-size: 24px;
   } (a) blue (b) white (c) yellow
10. 10.⚖️ What colour is the text of this element?
    <h2 class="note" id="top">Hi</h2>
    CSS:
    #top { color: red; }
    #top { color: white; } (a) white (b) yellow (c) orange (d) red
11. 11.What does text-align do? (a) makes letters bigger (b) makes the text bold (c) sets the letter colour (d) centres a heading
12. 12.⚖️ What colour is the text of this element?
    <h2 class="big" id="main">Hi</h2>
    CSS:
    .big { color: green; }
    .big { color: red; } (a) blue (b) red (c) green (d) yellow
13. 13.⚖️ What colour is the text of this element?
    <h2 class="red" id="intro">Hi</h2>
    CSS:
    h2 { color: orange; }
    h2 { color: purple; } (a) orange (b) purple (c) green (d) red
14. 14.✍️ What value is given to background-color in this rule?
    #top {
      border: 2px solid;
      background-color: yellow;
      text-align: center;
    } (a) background-color (b) 10px (c) 8px (d) yellow
15. 15.Which of these is margin? (a) the gap round content (b) the gap to other boxes (c) space inside the border (d) the line round the box
16. 16.🌈 Which colour is #00ffff? (a) black (b) bright green (c) magenta (d) cyan
17. 17.🖌️ Where does the text sit on its line?
    h1 {
      color: black;
      font-size: 16px;
      background-color: yellow;
      text-align: center;
    } (a) on the right (b) in the middle (c) on the left
18. 18.🎯 Which CSS selector matches this element?
    <p class="big" id="hero">Hello</p> (a) #big (b) #top (c) #hero (d) h1
19. 19.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 150px;
      padding: 5px;
      border: 2px solid black;
      margin: 5px;
    }
20. 20.✍️ Which sign goes between a property and its value? (a) = (b) : (c) - (d) ;
21. 21.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 10px;
      }
    }
22. 22.🖌️ Which CSS property colours behind the text? (a) color (b) text-align (c) background-color (d) font-size
23. 23.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 260px;
      padding: 30px;
      border: 5px solid black;
      margin: 5px;
    }
24. 24.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) neither (c) the first one (d) the later one
25. 25.🎨 One CSS file can style how many pages? (a) only one word (b) only one image (c) no pages (d) many pages
26. 26.🎯 Which element does the selector .menu style? (a) <div class="menu"> (b) <div id="menu"> (c) <div class="note"> (d) <span class="big">
27. 27.🧩 Which language counts down a timer? (a) CSS (b) JavaScript (c) HTML
28. 28.📱 max-width: 600px applies when the screen is ___. (a) exactly 1000px (b) turned off (c) 600px or wider (d) 600px or narrower
29. 29.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 460px;
      justify-content: center;
    }
    Inside are 3 boxes, each 100px wide (no margins).
30. 30.Which of these does HTML do? (a) shows a pop-up message (b) makes headings and lists (c) reacts to a button click (d) lays out the page
31. 31.⚖️ What colour is the text of this element?
    <h2 class="box" id="main">Hi</h2>
    CSS:
    #main { color: black; }
    #main { color: red; } (a) black (b) orange (c) red (d) yellow
32. 32.⚖️ What colour is the text of this element?
    <h1 class="red" id="intro">Hi</h1>
    CSS:
    #intro { color: green; }
    .red { color: yellow; }
    h1 { color: white; } (a) purple (b) yellow (c) green (d) white
33. 33.🎨 A CSS file usually ends with which extension? (a) .png (b) .html (c) .css (d) .js
34. 34.✍️ CSS declarations go inside which brackets? (a) [ ] (b) < > (c) { } (d) ( )
35. 35.🔍 Which is the odd one out? (a) lays out the page (b) rounds box corners (c) sets colours and fonts (d) puts a picture on a page
36. 36.🎯 Which element does the selector #intro style? (a) <h1 class="intro"> (b) <h1 id="main"> (c) <h2 class="big"> (d) <h1 id="intro">
37. 37.🎯 Which CSS selector matches this element?
    <span class="big" id="intro">Hello</span> (a) .red (b) p (c) #intro (d) #main
38. 38.📦 In the box model, which part is space inside the border? (a) padding (b) content (c) border (d) margin
39. 39.🎨 Which tag holds CSS inside the head? (a) <script> (b) <css> (c) <style> (d) <body>
40. 40.⚖️ What colour is the text of this element?
    <h1 class="red" id="intro">Hi</h1>
    CSS:
    .red { color: yellow; }
    .red { color: orange; } (a) white (b) purple (c) orange (d) yellow

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