CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 144 · 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) cyan (b) magenta (c) red (d) bright green
2. 2.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 290px;
     padding: 15px;
     border: 4px solid black;
     margin: 10px;
   }
3. 3.⚖️ What colour is the text of this element?
   <p class="red" id="hero">Hi</p>
   CSS:
   #hero { color: blue; }
   p { color: yellow; }
   .red { color: white; } (a) blue (b) orange (c) white (d) yellow
4. 4.🎯 What kind of selector is #top? (a) an element selector (b) an id selector (c) a class selector
5. 5.🎯 Can many elements share the same class? (a) Yes (b) No
6. 6.True or false: #main is an id selector. (a) False (b) True
7. 7.🧩 Which language makes a link? (a) JavaScript (b) CSS (c) HTML
8. 8.📱 What does a media query check? (a) the page title (b) the time of day (c) the battery level (d) the screen width
9. 9.📦 How much space top to bottom (px) does this box take in all, margin included?
   .box {
     height: 80px;
     padding: 10px;
     border: 5px solid black;
     margin: 10px;
   }
10. 10.✍️ What value is given to background-color in this rule?
    body {
      font-style: italic;
      background-color: yellow;
      border: 2px solid;
    } (a) background-color (b) 10px (c) yellow (d) 8px
11. 11.🎨 Which tag holds CSS inside the head? (a) <style> (b) <script> (c) <css> (d) <body>
12. 12.Which of these does JavaScript do? (a) puts a picture on a page (b) gives the page structure (c) makes a form box (d) shows a pop-up message
13. 13.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 110px;
      padding: 20px;
      border: 1px solid black;
      margin: 20px;
    }
14. 14.What does font-family do? (a) centres a heading (b) picks the font style (c) colours behind the text (d) makes the text bold
15. 15.📱 Which tag helps phones show a page at the right size? (a) the title tag (b) the viewport meta tag (c) the br tag (d) the hr tag
16. 16.🎨 A CSS file usually ends with which extension? (a) .html (b) .js (c) .png (d) .css
17. 17.📱 Responsive design means a page ___. (a) never changes (b) has no pictures (c) is only for laptops (d) fits every screen
18. 18.Which of these is the content? (a) the line round the box (b) the gap to other boxes (c) the text or picture (d) space outside the border
19. 19.📱 The screen is 820px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 8px;
      }
    }
20. 20.⚖️ What colour is the text of this element?
    <h2 class="menu" id="intro">Hi</h2>
    CSS:
    .menu { color: black; }
    .menu { color: red; } (a) yellow (b) white (c) black (d) red
21. 21.🎨 What does CSS stand for? (a) Cascading Style Sheets (b) Creative Sheet System (c) Colourful Site Styles (d) Computer Style Sheets
22. 22.🖌️ Which CSS property sets the letter colour? (a) color (b) text-align (c) background-color (d) font-weight
23. 23.🌈 Hex digits go 0 to 9, then A to which letter? (a) J (b) F (c) Z (d) G
24. 24.🎯 What kind of selector is body? (a) a class selector (b) an element selector (c) an id selector
25. 25.🎨 Which tag connects an outside CSS file? (a) <css> (b) <img> (c) <link> (d) <a>
26. 26.🖌️ Which CSS property picks the font style? (a) font-size (b) font-family (c) font-weight (d) text-align
27. 27.🎯 Which CSS selector matches this element?
    <span class="red" id="top">Hello</span> (a) #red (b) .red (c) #intro (d) p
28. 28.📱 The screen is 540px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 18px;
      }
    }
29. 29.⚖️ What colour is the text of this element?
    <p class="box" id="logo">Hi</p>
    CSS:
    p { color: white; }
    #logo { color: green; } (a) green (b) white (c) blue (d) yellow
30. 30.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 220px;
      justify-content: center;
    }
    Inside are 2 boxes, each 100px wide (no margins).
31. 31.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 230px;
      padding: 5px;
      border: 1px solid black;
      margin: 15px;
    }
32. 32.⚖️ What colour is the text of this element?
    <p class="menu" id="intro">Hi</p>
    CSS:
    p { color: white; }
    .menu { color: purple; } (a) purple (b) white (c) blue (d) orange
33. 33.Which of these is padding? (a) the gap to other boxes (b) the text or picture (c) the line round the box (d) space inside the border
34. 34.✍️ What value is given to width in this rule?
    li {
      font-style: italic;
      width: 300px;
    } (a) 300px (b) red (c) italic (d) width
35. 35.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      margin: 10px;
      font-size: 20px;
    }
36. 36.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) the later one (c) the first one (d) neither
37. 37.⚖️ What colour is the text of this element?
    <h1 class="menu" id="logo">Hi</h1>
    CSS:
    h1 { color: green; }
    h1 { color: orange; } (a) orange (b) green (c) purple (d) white
38. 38.True or false: HTML adds space around boxes. (a) False (b) True
39. 39.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      padding: 8px;
      border: 2px solid;
    }
40. 40.✍️ How many declarations (property: value pairs) are in this rule?
    body {
      font-size: 20px;
      text-align: center;
    }

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