CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 250 · 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 flexbox property sets space between boxes? (a) gap (b) align-items (c) justify-content (d) flex-direction
2. 2.True or false: HTML gives the page structure. (a) True (b) False
3. 3.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) 600px or narrower (c) exactly 1000px (d) 600px or wider
4. 4.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 180px;
     justify-content: flex-end;
   }
   Inside are 2 boxes, each 50px wide (no margins).
5. 5.📱 What does a media query check? (a) the time of day (b) the battery level (c) the screen width (d) the page title
6. 6.✍️ In color: blue; which part is the value? (a) color (b) : (c) blue (d) ;
7. 7.Which of these does HTML do? (a) makes headings and lists (b) lays out the page (c) adds space around boxes (d) reacts to a button click
8. 8.🌈 Which colour is #ffffff? (a) blue (b) bright green (c) red (d) white
9. 9.🌈 In #8b0000 the red part is the hex number 8b. What is it as a normal number?
10. 10.✍️ Which property is set to 300px in this rule?
    h1 {
      width: 300px;
      color: red;
      margin: 10px;
    } (a) font-style (b) color (c) 300px (d) width
11. 11.Which of these is the content? (a) the gap round content (b) a solid or dotted edge (c) space outside the border (d) the text or picture
12. 12.⚖️ What colour is the text of this element?
    <h1 class="menu" id="logo">Hi</h1>
    CSS:
    h1 { color: orange; }
    h1 { color: blue; } (a) red (b) blue (c) white (d) orange
13. 13.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the later one (c) the first one (d) the shorter one
14. 14.Which of these does HTML do? (a) lays out the page (b) puts a picture on a page (c) shows a pop-up message (d) adds space around boxes
15. 15.🖌️ What colour are the letters?
    li {
      color: green;
      font-size: 28px;
      background-color: orange;
      text-align: right;
    } (a) orange (b) green (c) purple
16. 16.✍️ How many declarations (property: value pairs) are in this rule?
    h2 {
      background-color: yellow;
      width: 300px;
    }
17. 17.📱 The screen is 1100px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
18. 18.🖌️ Where does the text sit on its line?
    h2 {
      background-color: yellow;
      text-align: left;
      color: black;
      font-size: 24px;
    } (a) on the right (b) in the middle (c) on the left
19. 19.🎯 What kind of selector is h1? (a) an id selector (b) a class selector (c) an element selector
20. 20.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 100px;
      padding: 25px;
      border: 2px solid black;
      margin: 5px;
    }
21. 21.📦 In the box model, which part is the gap to other boxes? (a) content (b) border (c) margin (d) padding
22. 22.What does font-weight do? (a) sets the letter colour (b) makes letters bigger (c) colours behind the text (d) makes the text bold
23. 23.✍️ Which property is set to italic in this rule?
    .box {
      font-size: 20px;
      font-style: italic;
    } (a) color (b) font-size (c) font-style (d) italic
24. 24.✍️ Which property is set to 8px in this rule?
    p {
      padding: 8px;
      width: 300px;
    } (a) font-weight (b) border (c) 8px (d) padding
25. 25.🎨 Which tag connects an outside CSS file? (a) <css> (b) <link> (c) <img> (d) <a>
26. 26.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 30px;
      }
    }
27. 27.💪 Which justify-content value packs boxes at the start? (a) space-between (b) flex-start (c) center (d) flex-end
28. 28.🌈 Hex digits go 0 to 9, then A to which letter? (a) Z (b) F (c) G (d) J
29. 29.🎯 What kind of selector is #end? (a) a class selector (b) an id selector (c) an element selector
30. 30.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 310px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 100px wide (no margins).
31. 31.📦 In the box model, which part is the text or picture? (a) padding (b) margin (c) content (d) border
32. 32.⚖️ What colour is the text of this element?
    <p class="big" id="main">Hi</p>
    CSS:
    #main { color: orange; }
    .big { color: blue; }
    p { color: purple; } (a) purple (b) orange (c) blue (d) white
33. 33.🧩 Which language makes a link? (a) CSS (b) JavaScript (c) HTML
34. 34.✍️ What is the selector in this CSS rule?
    .note {
      font-weight: bold;
      background-color: yellow;
    } (a) yellow (b) .note (c) font-weight (d) #top
35. 35.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 8px;
      }
    } (a) No (b) Yes
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: 230px;
      padding: 20px;
      border: 2px solid black;
      margin: 5px;
    }
37. 37.✍️ What value is given to padding in this rule?
    h1 {
      padding: 8px;
      font-size: 20px;
    } (a) 8px (b) 2px solid (c) bold (d) padding
38. 38.🌈 Which hex code is bright green? (a) #00ffff (b) #000000 (c) #0000ff (d) #00ff00
39. 39.🎯 Which CSS selector matches this element?
    <h2 class="note" id="logo">Hello</h2> (a) .big (b) li (c) h2 (d) #end
40. 40.What does font-size do? (a) makes letters bigger (b) sets the letter colour (c) makes the text bold (d) colours behind the text

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