CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 993 · 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.What does font-size do? (a) sets the letter colour (b) picks the font style (c) centres a heading (d) makes letters bigger
2. 2.✍️ What value is given to font-style in this rule?
   li {
     margin: 10px;
     font-size: 20px;
     font-style: italic;
     width: 300px;
   } (a) italic (b) 20px (c) red (d) font-style
3. 3.🎯 How many elements on a page should have the same id? (a) 2 (b) any number (c) 5 (d) 1
4. 4.What does text-align do? (a) sets the letter colour (b) centres a heading (c) makes letters bigger (d) colours behind the text
5. 5.🧩 Which language gives the page structure? (a) JavaScript (b) CSS (c) HTML
6. 6.✍️ How many declarations (property: value pairs) are in this rule?
   h2 {
     font-style: italic;
     font-weight: bold;
     margin: 10px;
   }
7. 7.💪 How much empty space (px) is left after the last box?
   .row {
     display: flex;
     width: 250px;
     justify-content: flex-start;
   }
   Inside are 3 boxes, each 80px wide (no margins).
8. 8.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the first one (c) the later one (d) the shorter one
9. 9.🖌️ What colour are the letters?
   h1 {
     font-size: 12px;
     text-align: right;
     color: red;
     background-color: green;
   } (a) black (b) red (c) green
10. 10.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 200px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 80px wide (no margins).
11. 11.⚖️ What colour is the text of this element?
    <h2 class="note" id="intro">Hi</h2>
    CSS:
    .note { color: black; }
    .note { color: blue; } (a) purple (b) orange (c) blue (d) black
12. 12.📦 In the box model, which part is the line round the box? (a) border (b) content (c) padding (d) margin
13. 13.📱 The screen is 375px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 20px;
      }
    }
14. 14.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 2 (b) 4 (c) 6 (d) 3
15. 15.🎨 What does CSS stand for? (a) Cascading Style Sheets (b) Computer Style Sheets (c) Colourful Site Styles (d) Creative Sheet System
16. 16.🖌️ What colour are the letters?
    p {
      background-color: green;
      font-size: 24px;
      color: blue;
      text-align: left;
    } (a) black (b) green (c) blue
17. 17.🖌️ Which CSS property sets the letter colour? (a) color (b) font-family (c) text-align (d) font-size
18. 18.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 100px;
      padding: 25px;
      border: 5px solid black;
      margin: 5px;
    }
19. 19.What does justify-content: flex-end do? (a) packs boxes at the start (b) packs boxes at the end (c) equal gaps, none at ends (d) puts boxes in the middle
20. 20.🧩 Which language rounds box corners? (a) JavaScript (b) CSS (c) HTML
21. 21.Which of these is margin? (a) the gap round content (b) the line round the box (c) the text or picture (d) the gap to other boxes
22. 22.True or false: #hero is an element selector. (a) True (b) False
23. 23.🎯 Which sign starts a class selector? (a) & (b) . (c) # (d) @
24. 24.⚖️ What colour is the text of this element?
    <h2 class="note" id="top">Hi</h2>
    CSS:
    h2 { color: orange; }
    h2 { color: red; } (a) yellow (b) red (c) black (d) orange
25. 25.🧩 Which language lays out the page? (a) HTML (b) JavaScript (c) CSS
26. 26.🌈 Which colour of light is strongest in rgb(40, 129, 162)? (a) red (b) green (c) blue
27. 27.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 150px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 60px wide (no margins).
28. 28.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 170px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 80px wide (no margins).
29. 29.🔍 Which is the odd one out? (a) checks a quiz answer (b) gives the page structure (c) makes headings and lists (d) makes a link
30. 30.⚖️ Which selector is the strongest? (a) a class selector (b) an element selector (c) an id selector
31. 31.🎨 One CSS file can style how many pages? (a) many pages (b) only one image (c) no pages (d) only one word
32. 32.🖌️ What colour is behind the letters?
    p {
      text-align: left;
      font-size: 28px;
      background-color: green;
      color: purple;
    } (a) purple (b) red (c) green
33. 33.✍️ Which sign ends each CSS declaration? (a) . (b) : (c) , (d) ;
34. 34.🖌️ What colour is behind the letters?
    li {
      color: purple;
      font-size: 40px;
      background-color: yellow;
      text-align: center;
    } (a) purple (b) green (c) yellow
35. 35.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) 600px or wider (c) exactly 1000px (d) 600px or narrower
36. 36.⚖️ What colour is the text of this element?
    <h1 class="star" id="hero">Hi</h1>
    CSS:
    h1 { color: red; }
    .star { color: purple; }
    #hero { color: blue; } (a) blue (b) red (c) white (d) purple
37. 37.✍️ In color: blue; which part is the property? (a) ; (b) color (c) blue (d) :
38. 38.🌈 Which colour is rgb(0, 255, 0)? (a) yellow (b) white (c) bright green (d) magenta
39. 39.Which of these is padding? (a) space outside the border (b) a solid or dotted edge (c) the line round the box (d) space inside the border
40. 40.✍️ CSS declarations go inside which brackets? (a) < > (b) ( ) (c) { } (d) [ ]

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