CSS Quiz

Are you ready to test your CSS skills? Whether you’re a beginner or an experienced developer, this quiz will help you assess your knowledge of CSS concepts, properties, and techniques. At The Coding College, we encourage continuous learning, and quizzes are a fun way to reinforce your understanding.

Let’s dive in!

CSS Quiz Instructions

  • Each question is multiple-choice or true/false.
  • Choose the correct answer based on your knowledge.
  • Check the answers at the end to see how you scored!

Question 1: What does CSS stand for?

  1. Computer Style Sheets
  2. Cascading Style Sheets
  3. Creative Style Sheets
  4. Colorful Style Sheets

Question 2: Which property is used to change the background color of an element?

  1. color
  2. background-color
  3. bgcolor
  4. background-style

Question 3: How do you select an element with the class header in CSS?

  1. header {}
  2. .header {}
  3. #header {}
  4. *header {}

Question 4: What is the correct syntax for adding an external CSS file to an HTML document?

  1. <link href="styles.css" rel="stylesheet" type="text/css">
  2. <style src="styles.css">
  3. <css href="styles.css">
  4. <stylesheet src="styles.css">

Question 5: Which property is used to control the text size?

  1. text-size
  2. font-style
  3. font-size
  4. text-style

Question 6: Which value is not valid for the position property?

  1. static
  2. relative
  3. block
  4. fixed

Question 7: How would you apply a bold font style to text?

  1. font-weight: bold;
  2. font-style: bold;
  3. font-size: bold;
  4. text-style: bold;

Question 8: What does the z-index property do?

  1. Changes the transparency of an element.
  2. Specifies the stacking order of elements.
  3. Defines the zoom level of an element.
  4. Controls the width of an element.

Question 9: How do you create a CSS comment?

  1. <!-- This is a comment -->
  2. // This is a comment
  3. /* This is a comment */
  4. # This is a comment

Question 10: What is the default value of the position property in CSS?

  1. absolute
  2. relative
  3. static
  4. fixed

Question 11: What is the difference between em and rem units in CSS?

  1. em is relative to the root element, while rem is relative to the parent element.
  2. em is relative to the parent element, while rem is relative to the root element.
  3. Both are relative to the viewport width.
  4. Both are absolute units.

Question 12: Which pseudo-class is used to style an element when the user hovers over it?

  1. :focus
  2. :hover
  3. :active
  4. :checked

Question 13: Which property is used to make a flex container?

  1. display: block;
  2. display: inline;
  3. display: flex;
  4. display: container;

Question 14: How can you make a website responsive using CSS?

  1. Use float for all elements.
  2. Use media queries and relative units.
  3. Use inline styles.
  4. Use fixed widths for layouts.

Question 15: Which of the following is a valid CSS media query?

  1. @media screen and (min-width: 768px) {}
  2. @media (min-width: 768px)
  3. @media screen {}
  4. @media width: 768px {}

Answers

  1. Cascading Style Sheets
  2. background-color
  3. .header
  4. font-size
  5. block
  6. font-weight: bold;
  7. Specifies the stacking order of elements.
  8. / This is a comment /
  9. static
  10. em is relative to the parent element, while rem is relative to the root element.
  11. :hover
  12. display: flex;
  13. Use media queries and relative units.
  14. @media screen and (min-width: 768px) {}

Your Score

  • 12–15: CSS Expert! You’re ready to tackle advanced web design challenges.
  • 8–11: Solid foundation. Keep practicing to refine your skills.
  • Below 8: Don’t worry! Explore our CSS tutorials at The Coding College to strengthen your understanding.

Leave a Comment