CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 990 · 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 tag holds CSS inside the head? (a) <script> (b) <css> (c) <body> (d) <style>
2. 2.Which of these does JavaScript do? (a) checks a quiz answer (b) puts a picture on a page (c) makes a link (d) sets colours and fonts
3. 3.📱 The screen is 700px wide. Does the rule inside @media apply?
   p {
     font-size: 24px;
   }
   @media (max-width: 600px) {
     p {
       font-size: 18px;
     }
   } (a) Yes (b) No
4. 4.⚖️ Which selector is the weakest? (a) an id selector (b) an element selector (c) a class selector
5. 5.What does font-size do? (a) colours behind the text (b) makes the text bold (c) centres a heading (d) makes letters bigger
6. 6.⚖️ What colour is the text of this element?
   <h2 class="menu" id="intro">Hi</h2>
   CSS:
   .menu { color: green; }
   .menu { color: purple; } (a) black (b) green (c) red (d) purple
7. 7.📱 The screen is 414px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (min-width: 480px) {
     p {
       font-size: 14px;
     }
   } (a) Yes (b) No
8. 8.🌈 In #rrggbb, which colour do the first two digits give? (a) blue (b) black (c) red (d) green
9. 9.🎯 Which sign starts a class selector? (a) & (b) @ (c) . (d) #
10. 10.What does color do? (a) makes letters bigger (b) sets the letter colour (c) picks the font style (d) makes the text bold
11. 11.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      font-style: italic;
      color: red;
    }
12. 12.🎯 Which sign starts an id selector? (a) & (b) @ (c) . (d) #
13. 13.✍️ Which sign ends each CSS declaration? (a) : (b) , (c) . (d) ;
14. 14.✍️ What value is given to font-weight in this rule?
    p {
      font-weight: bold;
      border: 2px solid;
      width: 300px;
    } (a) 300px (b) 2px solid (c) font-weight (d) bold
15. 15.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 340px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 80px wide (no margins).
16. 16.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 20px;
      }
    } (a) Yes (b) No
17. 17.⚖️ What colour is the text of this element?
    <h1 class="note" id="hero">Hi</h1>
    CSS:
    .note { color: orange; }
    .note { color: blue; } (a) yellow (b) orange (c) green (d) blue
18. 18.🎯 Which element does the selector #intro style? (a) <h1 id="intro"> (b) <h1 class="intro"> (c) <h2 class="note"> (d) <h1 id="main">
19. 19.🌈 Which hex code is bright green? (a) #000000 (b) #00ff00 (c) #ffffff (d) #ff0000
20. 20.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 340px;
      justify-content: flex-end;
    }
    Inside are 4 boxes, each 80px wide (no margins).
21. 21.🖌️ What colour are the letters?
    h1 {
      color: white;
      font-size: 36px;
      background-color: purple;
      text-align: right;
    } (a) white (b) blue (c) purple
22. 22.🔍 Which is the odd one out? (a) puts a picture on a page (b) makes a link (c) changes the page live (d) makes headings and lists
23. 23.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) the shorter one (c) neither (d) the later one
24. 24.⚖️ What colour is the text of this element?
    <h1 class="box" id="hero">Hi</h1>
    CSS:
    #hero { color: blue; }
    h1 { color: red; }
    .box { color: orange; } (a) orange (b) red (c) blue (d) white
25. 25.🎯 What kind of selector is body? (a) an element selector (b) a class selector (c) an id selector
26. 26.🌈 In #d10000 the red part is the hex number d1. What is it as a normal number?
27. 27.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
28. 28.✍️ What value is given to background-color in this rule?
    h1 {
      font-style: italic;
      background-color: yellow;
    } (a) background-color (b) yellow (c) 8px (d) 10px
29. 29.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 210px;
      padding: 5px;
      border: 2px solid black;
      margin: 10px;
    }
30. 30.🖌️ Which CSS property centres a heading? (a) text-align (b) font-weight (c) color (d) background-color
31. 31.🌈 In #00ef00 the green part is the hex number ef. What is it as a normal number?
32. 32.💪 Which justify-content value packs boxes at the start? (a) space-between (b) flex-end (c) center (d) flex-start
33. 33.💪 How much empty space (px) is before the first box?
    .row {
      display: flex;
      width: 150px;
      justify-content: flex-end;
    }
    Inside are 2 boxes, each 60px wide (no margins).
34. 34.⚖️ What colour is the text of this element?
    <h2 class="note" id="end">Hi</h2>
    CSS:
    h2 { color: yellow; }
    h2 { color: blue; } (a) white (b) blue (c) red (d) yellow
35. 35.🧩 Which language adds space around boxes? (a) JavaScript (b) HTML (c) CSS
36. 36.🌈 In #001200 the green part is the hex number 12. What is it as a normal number?
37. 37.📦 In the box model, which part is space inside the border? (a) padding (b) content (c) margin (d) border
38. 38.🖌️ What colour is behind the letters?
    h2 {
      color: black;
      background-color: purple;
      text-align: left;
      font-size: 24px;
    } (a) black (b) blue (c) purple
39. 39.🖌️ Which CSS property makes letters bigger? (a) font-size (b) color (c) font-weight (d) text-align
40. 40.🧩 Which language changes the page live? (a) HTML (b) CSS (c) JavaScript

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