CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 373 · 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 sign goes between a property and its value? (a) ; (b) = (c) : (d) -
2. 2.What does font-weight do? (a) picks the font style (b) colours behind the text (c) makes the text bold (d) sets the letter colour
3. 3.📱 The screen is 414px wide. Does the rule inside @media apply?
   p {
     font-size: 12px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 10px;
     }
   } (a) Yes (b) No
4. 4.💪 How much empty space (px) is before the first box?
   .row {
     display: flex;
     width: 200px;
     justify-content: flex-end;
   }
   Inside are 3 boxes, each 60px wide (no margins).
5. 5.🎯 Which CSS selector matches this element?
   <span class="menu" id="main">Hello</span> (a) span (b) #menu (c) .main (d) p
6. 6.⚖️ What colour is the text of this element?
   <h2 class="star" id="hero">Hi</h2>
   CSS:
   h2 { color: blue; }
   #hero { color: green; } (a) white (b) blue (c) green (d) orange
7. 7.✍️ What value is given to text-align in this rule?
   li {
     text-align: center;
     width: 300px;
     font-style: italic;
   } (a) center (b) yellow (c) text-align (d) 10px
8. 8.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
   p {
     font-size: 12px;
   }
   @media (max-width: 480px) {
     p {
       font-size: 10px;
     }
   }
9. 9.🎯 Which sign starts an id selector? (a) & (b) # (c) . (d) @
10. 10.📱 Responsive design means a page ___. (a) fits every screen (b) is only for laptops (c) has no pictures (d) never changes
11. 11.🌈 In #000006 the blue part is the hex number 06. What is it as a normal number?
12. 12.🎯 What kind of selector is p? (a) an element selector (b) an id selector (c) a class selector
13. 13.Which of these does HTML do? (a) sets colours and fonts (b) changes the text size (c) changes the page live (d) puts a picture on a page
14. 14.🌈 Which colour is rgb(255, 255, 255)? (a) magenta (b) bright green (c) cyan (d) white
15. 15.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 200px;
      padding: 15px;
      border: 2px solid black;
      margin: 0px;
    }
16. 16.⚖️ Which selector is the strongest? (a) an element selector (b) an id selector (c) a class selector
17. 17.✍️ What is the selector in this CSS rule?
    p {
      font-weight: bold;
      font-style: italic;
    } (a) .note (b) italic (c) p (d) font-weight
18. 18.True or false: the content is space outside the border. (a) True (b) False
19. 19.Which of these is margin? (a) a solid or dotted edge (b) the line round the box (c) the gap round content (d) space outside the border
20. 20.✍️ In color: blue; which part is the value? (a) blue (b) : (c) color (d) ;
21. 21.⚖️ What colour is the text of this element?
    <h1 class="red" id="intro">Hi</h1>
    CSS:
    .red { color: orange; }
    .red { color: black; } (a) green (b) black (c) orange (d) purple
22. 22.🧩 Which language checks a quiz answer? (a) HTML (b) JavaScript (c) CSS
23. 23.🖌️ What colour are the letters?
    h1 {
      background-color: green;
      text-align: left;
      color: yellow;
      font-size: 16px;
    } (a) blue (b) green (c) yellow
24. 24.✍️ How many declarations (property: value pairs) are in this rule?
    .note {
      font-style: italic;
      font-weight: bold;
    }
25. 25.📱 min-width: 800px applies when the screen is ___. (a) exactly 100px (b) turned off (c) 800px or narrower (d) 800px or wider
26. 26.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the later one (c) the shorter one (d) the first one
27. 27.🖌️ Where does the text sit on its line?
    h2 {
      text-align: right;
      font-size: 16px;
      background-color: white;
      color: orange;
    } (a) in the middle (b) on the left (c) on the right
28. 28.True or false: HTML makes a link. (a) True (b) False
29. 29.🎨 Which tag connects an outside CSS file? (a) <css> (b) <link> (c) <img> (d) <a>
30. 30.What does justify-content: flex-end do? (a) puts boxes in the middle (b) packs boxes at the end (c) equal gaps, none at ends (d) packs boxes at the start
31. 31.Which of these is the border? (a) the text or picture (b) the gap round content (c) space inside the border (d) the line round the box
32. 32.🎯 Which sign starts a class selector? (a) @ (b) # (c) & (d) .
33. 33.🎯 Which CSS selector matches this element?
    <span class="big" id="intro">Hello</span> (a) .intro (b) span (c) #big (d) .red
34. 34.✍️ Which property is set to 300px in this rule?
    h1 {
      margin: 10px;
      padding: 8px;
      width: 300px;
    } (a) 300px (b) width (c) font-style (d) color
35. 35.🖌️ What colour is behind the letters?
    li {
      font-size: 12px;
      color: purple;
      text-align: right;
      background-color: yellow;
    } (a) purple (b) green (c) yellow
36. 36.True or false: img is an id selector. (a) False (b) True
37. 37.🌈 In #00b400 the green part is the hex number b4. What is it as a normal number?
38. 38.True or false: JavaScript makes headings and lists. (a) True (b) False
39. 39.🌈 Which colour of light is strongest in rgb(188, 13, 128)? (a) blue (b) green (c) red
40. 40.📦 In the box model, which part is the gap to other boxes? (a) content (b) padding (c) margin (d) border

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