Comments in CSS | Types, Example
Comments in CSS are lines of text within the CSS stylesheet that are used to explain the code. They provide extra information about the code, such as what the styles do, where they to apply, or other helpful explanations.
Comments are non-executable statements that are ignored by web browsers. Therefore, browsers will not display them on the web page. You can also use a comment to identify that you are the author of the web page.
Comments make the CSS code easier to understand and maintain because they help you understand the code when you edit it later. If you are a member of a team, comments help your teammates understand the code you have written. It’s a good practice to put comments in your code.
Syntax to Write Comments in CSS
Writing comments in the CSS code is very simple and straightforward. We place a CSS comment inside the <style> element. It starts with /* and ends with */. The general syntax to write a simple comment in style sheet is as follows:
/* Place your comment here */
In the above syntax, there is a forward slash at the beginning and at the end of the comment. After the first forward slash, insert an asterisk (*), followed by the comment text. Close the comment by adding another asterisk, followed by a forward slash. The syntax of the comment starts with a forward slash (/), followed by an asterisk (*).
After the forward slash and an asterisk (/*), you write your comment text. Then, close the comment by adding an asterisk, followed by a forward slash (*/). You can use this syntax for both single-line and multi-line comments. Let’s take an example to write a single line comment.
Example 1:
<style>
/* Set the background color of the body to light blue */
body {
background-color: lightblue;
}
</style>Types of CSS Comments
There are two types of comments in CSS. They are as:
- Single-line comment
- Multi-line comments
1. Single-line Comments:
A single-line comment is used to comment out a single line or a part of a line. They start with /* and end with */.
Example 2:
/* This is a single-line comment */
body {
color: black;
}
We can add a single-line comment in the line of code.
Example 3:
p {
color: green; /* Set the text color to green */
}We can also write a single-line comment in the CSS rule like this:
Example 4:
/* This comment is explaining the color of the paragraph.*/
p {
color: /*blue*/green;
}
In this example, the comment /*red*/ is placed within the color property value. It tells the text color was initially to be blue but has been changed to green.
2. Multi-line Comments:
We can also span comments into multiple lines. Generally, they are useful when you want to write comment out for blocks of CSS code.
Example 5:
/*
This is a multi-line comment.
It spans multiple lines.
*/
body {
font-family: Arial, sans-serif;
}
Why Use Comments in CSS?
1. Code Documentation: Comments help to explain the purpose of specific styles or sections in the code. This is especially useful when you revisit your code after some time.
Example 6:
/* This sets the text color of the paragraph to green. */
p {
color: green;
}
2. Debugging and Troubleshooting: When you debug your CSS code, you can temporarily disable the code without deleting it using comments, helping you isolate issues.
Example 7:
/* Temporarily disabling the margin to debug layout issues */ /* margin: 20px; */
3. Organization and Readability: For larger style sheets, comments can help organize CSS code into sections, making it easier to navigate, understand, and manage.
Example 8:
/* Header Styles */
header {
background-color: navy;
color: white;
}
/* Main Content Styles */
main {
padding: 20px;
}
Best Practices for Writing Comments in Code
1. Always write comments in CSS code that are easy to understand and to the concise. Avoid overly verbose comments that can clutter your style sheet.
2. Write comments to explain why, not what is.
3. Always try to keep comments up to date in your code.
HTML and CSS Comments
In HTML, you have learned that you add comments to the HTML source code by using the following syntax as:
<!--Your Comments-->
Let us take an example in which we will write both HTML and CSS comments in the HTML document.
Example 9:
<!DOCTYPE html>
<html>
<head>
<style>
/* Internal CSS style for paragraphs */
p {
color: green; /* Set text color to green */
}
</style>
</head>
<body>
<!-- This is the main content of the HTML document -->
<h2>This is a Heading.</h2>
<!-- These paragraphs will be red -->
<p>Hello World!</p>
<p>This paragraph is styled with CSS internal style sheet.</p>
</body>
</html>
