CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 841 · 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 property is set to 2px solid in this rule?
   .box {
     border: 2px solid;
     color: red;
     padding: 8px;
     font-style: italic;
   } (a) width (b) 2px solid (c) border (d) font-style
2. 2.⚖️ What colour is the text of this element?
   <p class="menu" id="hero">Hi</p>
   CSS:
   .menu { color: green; }
   .menu { color: blue; } (a) blue (b) green (c) white (d) red
3. 3.🔍 Which is the odd one out? (a) reacts to a button click (b) makes a form box (c) gives the page structure (d) makes a link
4. 4.🎨 One CSS file can style how many pages? (a) only one word (b) no pages (c) many pages (d) only one image
5. 5.💪 How wide (px) is each gap between two boxes?
   .row {
     display: flex;
     width: 210px;
     justify-content: space-between;
   }
   Inside are 2 boxes, each 80px wide (no margins).
6. 6.🎨 Which attribute adds CSS inside one tag? (a) href (b) alt (c) src (d) style
7. 7.🎨 What does CSS stand for? (a) Computer Style Sheets (b) Creative Sheet System (c) Colourful Site Styles (d) Cascading Style Sheets
8. 8.True or false: CSS rounds box corners. (a) True (b) False
9. 9.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 6 (b) 3 (c) 2 (d) 4
10. 10.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 120px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 50px wide (no margins).
11. 11.🌈 Which colour is #ff00ff? (a) bright green (b) magenta (c) red (d) blue
12. 12.✍️ Which sign goes between a property and its value? (a) : (b) = (c) ; (d) -
13. 13.🖌️ What colour are the letters?
    li {
      text-align: right;
      background-color: blue;
      font-size: 28px;
      color: black;
    } (a) purple (b) blue (c) black
14. 14.✍️ What is the selector in this CSS rule?
    h2 {
      text-align: center;
      margin: 10px;
    } (a) 10px (b) h1 (c) h2 (d) text-align
15. 15.🌈 In #900000 the red part is the hex number 90. What is it as a normal number?
16. 16.🖌️ Which CSS property makes letters bigger? (a) font-family (b) background-color (c) font-weight (d) font-size
17. 17.What does color do? (a) centres a heading (b) makes the text bold (c) makes letters bigger (d) sets the letter colour
18. 18.🧩 Which language changes the page live? (a) CSS (b) HTML (c) JavaScript
19. 19.🎯 Which element does the selector div style? (a) <h1 id="logo"> (b) <div class="box"> (c) <p class="box"> (d) <span>
20. 20.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      background-color: yellow;
    }
21. 21.✍️ CSS declarations go inside which brackets? (a) [ ] (b) < > (c) ( ) (d) { }
22. 22.🎯 How many elements on a page should have the same id? (a) 5 (b) any number (c) 1 (d) 2
23. 23.🖌️ Where does the text sit on its line?
    h1 {
      color: red;
      text-align: left;
      font-size: 20px;
      background-color: purple;
    } (a) on the right (b) in the middle (c) on the left
24. 24.🖌️ Which CSS property sets the letter colour? (a) background-color (b) color (c) font-weight (d) text-align
25. 25.💪 Which flexbox property spaces boxes along a row? (a) gap (b) justify-content (c) display: flex (d) flex-direction
26. 26.📦 In the box model, which part is the line round the box? (a) border (b) padding (c) margin (d) content
27. 27.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (min-width: 600px) {
      p {
        font-size: 24px;
      }
    }
28. 28.📱 The screen is 320px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 1024px) {
      p {
        font-size: 30px;
      }
    }
29. 29.📱 Responsive design means a page ___. (a) fits every screen (b) is only for laptops (c) has no pictures (d) never changes
30. 30.💪 Which flexbox property turns on flexbox? (a) justify-content (b) align-items (c) gap (d) display: flex
31. 31.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 320px;
      justify-content: flex-end;
    }
    Inside are 3 boxes, each 100px wide (no margins).
32. 32.✍️ Which property is set to 2px solid in this rule?
    h2 {
      font-size: 20px;
      text-align: center;
      border: 2px solid;
      width: 300px;
    } (a) border (b) font-style (c) width (d) 2px solid
33. 33.💪 Which flexbox property sets space between boxes? (a) gap (b) align-items (c) justify-content (d) display: flex
34. 34.🌈 Which colour is #ffffff? (a) blue (b) cyan (c) red (d) white
35. 35.✍️ Which property is set to 10px in this rule?
    #top {
      font-size: 20px;
      margin: 10px;
      font-weight: bold;
    } (a) margin (b) font-weight (c) padding (d) 10px
36. 36.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) turned off (c) 800px or wider (d) exactly 100px
37. 37.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 180px;
      padding: 20px;
      border: 4px solid black;
      margin: 0px;
    }
38. 38.⚖️ What colour is the text of this element?
    <h1 class="star" id="top">Hi</h1>
    CSS:
    h1 { color: purple; }
    h1 { color: blue; } (a) purple (b) blue (c) orange (d) green
39. 39.💪 How wide (px) is each gap between two boxes?
    .row {
      display: flex;
      width: 230px;
      justify-content: space-between;
    }
    Inside are 2 boxes, each 100px wide (no margins).
40. 40.📱 Which tag helps phones show a page at the right size? (a) the viewport meta tag (b) the hr tag (c) the br tag (d) the title tag

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