CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 777 · 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 colour is #ffff00? (a) black (b) blue (c) yellow (d) red
2. 2.💪 Which justify-content value packs boxes at the end? (a) flex-end (b) space-between (c) center (d) flex-start
3. 3.💪 Which flexbox property spaces boxes along a row? (a) flex-direction (b) justify-content (c) display: flex (d) align-items
4. 4.✍️ What is the selector in this CSS rule?
   p {
     padding: 8px;
     width: 300px;
     border: 2px solid;
     margin: 10px;
   } (a) padding (b) p (c) 300px (d) .note
5. 5.🧩 Which language makes headings and lists? (a) CSS (b) JavaScript (c) HTML
6. 6.✍️ What value is given to color in this rule?
   .note {
     background-color: yellow;
     color: red;
     font-size: 20px;
   } (a) red (b) 20px (c) center (d) color
7. 7.True or false: padding is the text or picture. (a) False (b) True
8. 8.🌈 What is the biggest number one colour can have in rgb()? (a) 255 (b) 99 (c) 100 (d) 1000
9. 9.True or false: HTML puts a picture on a page. (a) True (b) False
10. 10.🎯 What kind of selector is .star? (a) an element selector (b) a class selector (c) an id selector
11. 11.⚖️ What colour is the text of this element?
    <p class="star" id="top">Hi</p>
    CSS:
    .star { color: black; }
    #top { color: blue; }
    p { color: yellow; } (a) yellow (b) black (c) blue (d) green
12. 12.🎨 Which tag connects an outside CSS file? (a) <a> (b) <link> (c) <img> (d) <css>
13. 13.📱 max-width: 600px applies when the screen is ___. (a) turned off (b) 600px or wider (c) exactly 1000px (d) 600px or narrower
14. 14.✍️ Which sign goes between a property and its value? (a) - (b) = (c) : (d) ;
15. 15.✍️ What is the selector in this CSS rule?
    h2 {
      font-size: 20px;
      background-color: yellow;
    } (a) h1 (b) font-size (c) yellow (d) h2
16. 16.🌈 Which colour is #0000ff? (a) red (b) black (c) bright green (d) blue
17. 17.Which of these is the content? (a) the text or picture (b) space outside the border (c) the gap round content (d) a solid or dotted edge
18. 18.🎯 Can many elements share the same class? (a) Yes (b) No
19. 19.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 200px;
      padding: 15px;
      border: 4px solid black;
      margin: 15px;
    }
20. 20.What does font-family do? (a) centres a heading (b) makes the text bold (c) colours behind the text (d) picks the font style
21. 21.📦 In the box model, which part is the gap to other boxes? (a) padding (b) border (c) margin (d) content
22. 22.🌈 Which colour is rgb(255, 255, 0)? (a) blue (b) yellow (c) magenta (d) bright green
23. 23.🔍 Which is the odd one out? (a) puts a picture on a page (b) gives the page structure (c) makes headings and lists (d) counts down a timer
24. 24.📱 What does a media query check? (a) the battery level (b) the screen width (c) the time of day (d) the page title
25. 25.✍️ What is the selector in this CSS rule?
    h2 {
      text-align: center;
      width: 300px;
    } (a) text-align (b) 300px (c) h2 (d) h1
26. 26.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      border: 2px solid;
      width: 300px;
      text-align: center;
      font-size: 20px;
    }
27. 27.⚖️ Two rules with the same selector set a colour. Which one wins? (a) the first one (b) neither (c) the later one (d) the shorter one
28. 28.What does text-align do? (a) sets the letter colour (b) picks the font style (c) colours behind the text (d) centres a heading
29. 29.What does justify-content: flex-start do? (a) equal gaps, none at ends (b) packs boxes at the end (c) puts boxes in the middle (d) packs boxes at the start
30. 30.📦 How much space top to bottom (px) does this box take in all, margin included?
    .box {
      height: 110px;
      padding: 30px;
      border: 2px solid black;
      margin: 20px;
    }
31. 31.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 12px;
    }
    @media (min-width: 768px) {
      p {
        font-size: 14px;
      }
    }
32. 32.🌈 Which hex code is blue? (a) #0000ff (b) #ffff00 (c) #000000 (d) #00ffff
33. 33.🧩 Which language counts down a timer? (a) HTML (b) JavaScript (c) CSS
34. 34.⚖️ Which selector is the strongest? (a) a class selector (b) an id selector (c) an element selector
35. 35.Which of these is padding? (a) the text or picture (b) the line round the box (c) a solid or dotted edge (d) space inside the border
36. 36.🔍 Which is the odd one out? (a) checks a quiz answer (b) shows a pop-up message (c) changes the text size (d) reacts to a button click
37. 37.🌈 How many pairs of hex digits are in a colour like #ff8800? (a) 4 (b) 6 (c) 2 (d) 3
38. 38.🎯 Which CSS selector matches this element?
    <h2 class="big" id="intro">Hello</h2> (a) #big (b) .intro (c) h2 (d) #main
39. 39.🔍 Which is the odd one out? (a) adds space around boxes (b) makes headings and lists (c) sets colours and fonts (d) changes the text size
40. 40.📱 The screen is 820px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (max-width: 768px) {
      p {
        font-size: 16px;
      }
    } (a) No (b) Yes

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