CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 246 · 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 CSS selector matches this element?
   <p class="star" id="end">Hello</p> (a) .end (b) p (c) #star (d) .menu
2. 2.🌈 Which hex code is blue? (a) #ffffff (b) #00ff00 (c) #0000ff (d) #ff00ff
3. 3.True or false: HTML makes a form box. (a) True (b) False
4. 4.⚖️ What colour is the text of this element?
   <p class="box" id="top">Hi</p>
   CSS:
   .box { color: orange; }
   #top { color: blue; } (a) orange (b) blue (c) yellow (d) white
5. 5.⚖️ What colour is the text of this element?
   <p class="box" id="end">Hi</p>
   CSS:
   p { color: purple; }
   p { color: red; } (a) blue (b) black (c) purple (d) red
6. 6.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 250px;
     padding: 25px;
     border: 1px solid black;
     margin: 5px;
   }
7. 7.📦 How much space across (px) does this box take in all, margin included?
   .box {
     width: 140px;
     padding: 30px;
     border: 4px solid black;
     margin: 15px;
   }
8. 8.📱 What does a media query check? (a) the screen width (b) the battery level (c) the page title (d) the time of day
9. 9.⚖️ What colour is the text of this element?
   <h2 class="big" id="main">Hi</h2>
   CSS:
   #main { color: purple; }
   h2 { color: yellow; } (a) yellow (b) white (c) green (d) purple
10. 10.🎯 What kind of selector is #end? (a) a class selector (b) an id selector (c) an element selector
11. 11.✍️ Which sign ends each CSS declaration? (a) , (b) . (c) ; (d) :
12. 12.📦 How wide (px) is this box from the outer edge of its left border to the outer edge of its right border?
    .box {
      width: 110px;
      padding: 5px;
      border: 1px solid black;
      margin: 15px;
    }
13. 13.Which of these does CSS do? (a) reacts to a button click (b) makes headings and lists (c) makes a form box (d) rounds box corners
14. 14.📱 The screen is 414px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 16px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 12px;
      }
    }
15. 15.📱 The screen is 1366px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 26px;
      }
    }
16. 16.🌈 Which hex code is white? (a) #0000ff (b) #000000 (c) #ff00ff (d) #ffffff
17. 17.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      font-weight: bold;
    }
18. 18.✍️ How many declarations (property: value pairs) are in this rule?
    .box {
      width: 300px;
      padding: 8px;
      color: red;
    }
19. 19.True or false: body is an element selector. (a) True (b) False
20. 20.Which of these does HTML do? (a) makes a link (b) shows a pop-up message (c) rounds box corners (d) sets colours and fonts
21. 21.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the shorter one (b) neither (c) the later one (d) the first one
22. 22.🎯 What kind of selector is #hero? (a) a class selector (b) an element selector (c) an id selector
23. 23.🌈 What is the biggest number one colour can have in rgb()? (a) 99 (b) 1000 (c) 100 (d) 255
24. 24.🧩 Which language makes headings and lists? (a) JavaScript (b) HTML (c) CSS
25. 25.🎯 Which CSS selector matches this element?
    <h2 class="big" id="main">Hello</h2> (a) .red (b) #logo (c) li (d) h2
26. 26.✍️ What is the selector in this CSS rule?
    .box {
      text-align: center;
      color: red;
      font-style: italic;
      padding: 8px;
    } (a) red (b) .box (c) h2 (d) text-align
27. 27.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 210px;
      justify-content: flex-start;
    }
    Inside are 2 boxes, each 80px wide (no margins).
28. 28.💪 Which justify-content value equal gaps, none at ends? (a) flex-end (b) center (c) space-between (d) flex-start
29. 29.🎯 Which element does the selector .menu style? (a) <li class="big"> (b) <h2 class="note"> (c) <h2 id="menu"> (d) <h2 class="menu">
30. 30.💪 Which flexbox property sets space between boxes? (a) align-items (b) gap (c) display: flex (d) justify-content
31. 31.📱 The screen is 375px wide. Does the rule inside @media apply?
    p {
      font-size: 12px;
    }
    @media (max-width: 480px) {
      p {
        font-size: 6px;
      }
    } (a) No (b) Yes
32. 32.🌈 In #f50000 the red part is the hex number f5. What is it as a normal number?
33. 33.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 270px;
      justify-content: flex-start;
    }
    Inside are 3 boxes, each 80px wide (no margins).
34. 34.🖌️ Which CSS property colours behind the text? (a) font-weight (b) text-align (c) color (d) background-color
35. 35.📱 min-width: 800px applies when the screen is ___. (a) 800px or narrower (b) 800px or wider (c) turned off (d) exactly 100px
36. 36.What does color do? (a) colours behind the text (b) picks the font style (c) centres a heading (d) sets the letter colour
37. 37.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 250px;
      padding: 5px;
      border: 2px solid black;
      margin: 0px;
    }
38. 38.💪 How much empty space (px) is left after the last box?
    .row {
      display: flex;
      width: 400px;
      justify-content: flex-start;
    }
    Inside are 4 boxes, each 80px wide (no margins).
39. 39.🧩 Which language puts a picture on a page? (a) HTML (b) JavaScript (c) CSS
40. 40.🎨 What does CSS stand for? (a) Cascading Style Sheets (b) Colourful Site Styles (c) Computer Style Sheets (d) Creative Sheet System

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