CSS Worksheet: Practice Test

HTML and CSS lesson 20: CSS test · Set 201 · 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 rgb(255, 255, 0)? (a) blue (b) magenta (c) yellow (d) black
2. 2.📱 What does a media query check? (a) the time of day (b) the page title (c) the screen width (d) the battery level
3. 3.⚖️ Two rules with the same selector set a colour. Which one wins? (a) neither (b) the first one (c) the shorter one (d) the later one
4. 4.✍️ What is the selector in this CSS rule?
   #top {
     margin: 10px;
     background-color: yellow;
     font-weight: bold;
   } (a) margin (b) yellow (c) li (d) #top
5. 5.✍️ How many declarations (property: value pairs) are in this rule?
   h2 {
     font-style: italic;
     background-color: yellow;
   }
6. 6.🖌️ Which CSS property centres a heading? (a) font-weight (b) color (c) text-align (d) font-family
7. 7.🔍 Which is the odd one out? (a) makes a link (b) makes headings and lists (c) puts a picture on a page (d) checks a quiz answer
8. 8.What does color do? (a) sets the letter colour (b) makes letters bigger (c) centres a heading (d) makes the text bold
9. 9.Which of these is the content? (a) the gap round content (b) the gap to other boxes (c) space inside the border (d) the text or picture
10. 10.✍️ How many declarations (property: value pairs) are in this rule?
    p {
      padding: 8px;
      margin: 10px;
      font-style: italic;
      color: red;
    }
11. 11.🧩 Which language adds space around boxes? (a) JavaScript (b) CSS (c) HTML
12. 12.What does font-family do? (a) makes letters bigger (b) picks the font style (c) makes the text bold (d) centres a heading
13. 13.✍️ What is the selector in this CSS rule?
    h1 {
      font-size: 20px;
      border: 2px solid;
      color: red;
    } (a) p (b) font-size (c) 2px solid (d) h1
14. 14.🎨 Which tag connects an outside CSS file? (a) <css> (b) <img> (c) <a> (d) <link>
15. 15.✍️ How many declarations (property: value pairs) are in this rule?
    #top {
      padding: 8px;
      margin: 10px;
    }
16. 16.🔍 Which is the odd one out? (a) checks a quiz answer (b) reacts to a button click (c) shows a pop-up message (d) makes a form box
17. 17.🌈 In #00f800 the green part is the hex number f8. What is it as a normal number?
18. 18.✍️ In color: blue; which part is the value? (a) ; (b) : (c) color (d) blue
19. 19.📱 The screen is 700px wide. Does the rule inside @media apply?
    p {
      font-size: 24px;
    }
    @media (max-width: 600px) {
      p {
        font-size: 18px;
      }
    } (a) No (b) Yes
20. 20.🌈 Which hex code is white? (a) #ffffff (b) #0000ff (c) #000000 (d) #00ff00
21. 21.🎯 Which CSS selector matches this element?
    <span class="note" id="end">Hello</span> (a) .big (b) .end (c) #hero (d) .note
22. 22.What does justify-content: flex-start do? (a) packs boxes at the end (b) equal gaps, none at ends (c) puts boxes in the middle (d) packs boxes at the start
23. 23.🎯 Which CSS selector matches this element?
    <h2 class="box" id="intro">Hello</h2> (a) .box (b) #main (c) li (d) .star
24. 24.🌈 Hex digits go 0 to 9, then A to which letter? (a) J (b) Z (c) G (d) F
25. 25.⚖️ What colour is the text of this element?
    <p class="note" id="hero">Hi</p>
    CSS:
    .note { color: white; }
    #hero { color: purple; }
    p { color: orange; } (a) white (b) orange (c) green (d) purple
26. 26.📱 The screen is 700px wide. What font-size (px) does the paragraph get?
    p {
      font-size: 24px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 30px;
      }
    }
27. 27.📱 The screen is 320px wide. Does the rule inside @media apply?
    p {
      font-size: 20px;
    }
    @media (min-width: 480px) {
      p {
        font-size: 22px;
      }
    } (a) Yes (b) No
28. 28.🌈 Which hex code is black? (a) #ffffff (b) #000000 (c) #0000ff (d) #00ffff
29. 29.✍️ Which property is set to 2px solid in this rule?
    p {
      border: 2px solid;
      width: 300px;
    } (a) 2px solid (b) width (c) border (d) font-style
30. 30.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 250px;
      padding: 15px;
      border: 1px solid black;
      margin: 5px;
    }
31. 31.🖌️ Which CSS property picks the font style? (a) font-weight (b) font-family (c) font-size (d) text-align
32. 32.🎯 Which CSS selector matches this element?
    <h1 class="big" id="top">Hello</h1> (a) #intro (b) h2 (c) .big (d) .top
33. 33.💪 Which justify-content value packs boxes at the end? (a) space-between (b) flex-start (c) flex-end (d) center
34. 34.🔍 Which is the odd one out? (a) makes headings and lists (b) changes the text size (c) rounds box corners (d) adds space around boxes
35. 35.⚖️ What colour is the text of this element?
    <p class="star" id="hero">Hi</p>
    CSS:
    .star { color: green; }
    p { color: orange; }
    #hero { color: red; } (a) green (b) blue (c) red (d) orange
36. 36.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 110px;
      padding: 15px;
      border: 5px solid black;
      margin: 10px;
    }
37. 37.📦 How much space across (px) does this box take in all, margin included?
    .box {
      width: 190px;
      padding: 30px;
      border: 2px solid black;
      margin: 0px;
    }
38. 38.📱 max-width: 600px applies when the screen is ___. (a) 600px or wider (b) exactly 1000px (c) turned off (d) 600px or narrower
39. 39.⚖️ What colour is the text of this element?
    <p class="box" id="main">Hi</p>
    CSS:
    .box { color: orange; }
    p { color: blue; } (a) green (b) blue (c) orange (d) red
40. 40.🌈 Which colour is #0000ff? (a) magenta (b) bright green (c) black (d) blue

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