0
0
CSSmarkup~5 mins

Comments in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction
Comments help you write notes inside your CSS code. They make it easier to understand and remember what your styles do.
To explain why a style is used for a certain element.
To leave reminders for yourself or others working on the code.
To temporarily disable a style without deleting it.
To organize your CSS by sections with headings.
To clarify complex or unusual style rules.
Syntax
CSS
/* This is a comment in CSS */
Comments start with /* and end with */.
Anything between these symbols is ignored by the browser.
Examples
A comment before a CSS rule to explain what it does.
CSS
/* This comment explains the body styles */
body {
  background-color: lightblue;
}
A comment placed after a style on the same line.
CSS
p {
  color: red; /* This makes text red */
}
A comment that covers multiple lines for longer explanations.
CSS
/*
  This is a multi-line comment.
  It can span several lines.
*/
h1 {
  font-size: 2rem;
}
Sample Program
This example shows comments before CSS rules and inside a rule to explain styles. The comments do not affect how the page looks.
CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>CSS Comments Example</title>
  <style>
    /* Set background color for the whole page */
    body {
      background-color: #f0f8ff;
    }

    /* Style for main heading */
    h1 {
      color: #333;
      /* Use a friendly font */
      font-family: Arial, sans-serif;
    }

    /* Paragraph text color */
    p {
      color: #666;
    }
  </style>
</head>
<body>
  <h1>Welcome to CSS Comments</h1>
  <p>This page shows how comments work in CSS.</p>
</body>
</html>
OutputSuccess
Important Notes
Never nest comments inside each other; CSS does not support nested comments.
Use comments to keep your code clean and easy to understand.
Comments do not appear on the webpage; they are only visible in the code.
Summary
Comments in CSS start with /* and end with */.
They help explain and organize your styles without affecting the page.
Use comments to make your CSS easier to read and maintain.