CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 501 · 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.📱 Responsive design means a page ___. (a) has no pictures (b) never changes (c) fits every screen (d) is only for laptops
2. 2.📱 The screen is 540px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 10px;
     }
   } (a) No (b) Yes
3. 3.True or false: margin is the gap to other boxes. (a) False (b) True
4. 4.🎯 Can many elements share the same class? (a) No (b) Yes
5. 5.🖌️ What colour is behind the letters?
   h2 {
     color: blue;
     background-color: yellow;
     text-align: center;
     font-size: 28px;
   } (a) blue (b) red (c) yellow
6. 6.🧩 Which language gives the page structure? (a) HTML (b) JavaScript (c) CSS
7. 7.True or false: h1 is an element selector. (a) False (b) True
8. 8.Which of these is the border? (a) the gap to other boxes (b) space inside the border (c) the line round the box (d) the gap round content
9. 9.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 290px;
     padding: 15px;
     border: 3px solid black;
     margin: 15px;
   }
10. 10.Which of these does HTML do? (a) sets colours and fonts (b) lays out the page (c) makes a form box (d) counts down a timer
11. 11.⚖️ What colour is the text of this element?
    <h2 class="box" id="hero">Hi</h2>
    CSS:
    h2 { color: blue; }
    #hero { color: white; } (a) yellow (b) blue (c) black (d) white
12. 12.🎨 Which tag connects an outside CSS file? (a) <a> (b) <img> (c) <link> (d) <css>
13. 13.✍️ What value is given to background-color in this rule?
    li {
      padding: 8px;
      width: 300px;
      font-size: 20px;
      background-color: yellow;
    } (a) background-color (b) yellow (c) 8px (d) 10px
14. 14.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      color: red;
    }
15. 15.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) 800px or narrower (c) turned off (d) 800px or wider
16. 16.🎯 Which CSS selector matches this element?
    <h1 class="menu" id="logo">Hello</h1> (a) .logo (b) .menu (c) h2 (d) #menu
17. 17.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) neither (c) the later one (d) the first one
18. 18.✍️ CSS declarations go inside which brackets? (a) ( ) (b) { } (c) [ ] (d) < >
19. 19.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 6px;
      }
    } (a) No (b) Yes
20. 20.🌈 In #0000c6 the blue part is the hex number c6. What is it as a normal number?
21. 21.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
22. 22.✍️ What value is given to padding in this rule?
    h1 {
      padding: 8px;
      font-size: 20px;
    } (a) padding (b) 2px solid (c) bold (d) 8px
23. 23.✍️ What value is given to width in this rule?
    p {
      background-color: yellow;
      color: red;
      width: 300px;
      text-align: center;
    } (a) red (b) width (c) 300px (d) italic
24. 24.🧩 Which language puts a picture on a page? (a) CSS (b) JavaScript (c) HTML
25. 25.🎯 Which element does the selector li style? (a) <span class="star"> (b) <li class="star"> (c) <div> (d) <p id="top">
26. 26.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      border: 2px solid;
      margin: 10px;
      background-color: yellow;
    }
27. 27.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 210px;
      padding: 10px;
      border: 5px solid black;
      margin: 15px;
    }
28. 28.🌈 Which colour is rgb(0, 0, 255)? (a) cyan (b) yellow (c) white (d) blue
29. 29.True or false: the border is a solid or dotted edge. (a) False (b) True
30. 30.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 370px;
      justify-content: space-between;
    }
    Inside are 4 boxes, each 40px wide (no margins).
31. 31.Which of these does CSS do? (a) makes headings and lists (b) puts a picture on a page (c) gives the page structure (d) changes the text size
32. 32.What does color do? (a) makes letters bigger (b) makes the text bold (c) picks the font style (d) sets the letter colour
33. 33.📦 In the box model, which part is space inside the border? (a) padding (b) margin (c) border (d) content
34. 34.🌈 Which colour is #00ffff? (a) cyan (b) black (c) bright green (d) yellow
35. 35.✍️ Which property is set to center in this rule?
    li {
      font-size: 20px;
      margin: 10px;
      text-align: center;
    } (a) margin (b) text-align (c) background-color (d) center
36. 36.🎯 Which sign starts an id selector? (a) . (b) & (c) # (d) @
37. 37.🎯 What kind of selector is .big? (a) an id selector (b) an element selector (c) a class selector
38. 38.🖌️ What colour are the letters?
    h1 {
      background-color: orange;
      font-size: 20px;
      color: red;
      text-align: left;
    } (a) green (b) red (c) orange
39. 39.✍️ In color: blue; which part is the value? (a) : (b) ; (c) color (d) blue
40. 40.🌈 Which hex code is cyan? (a) #00ff00 (b) #ffff00 (c) #000000 (d) #00ffff

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