Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How to add comments in the style sheet blocks
You may need to put additional comments in your stylesheet blocks. Therefore, it is very easy to comment any part of the style sheet. You can simply put your comments inside /*...this is a comment in style sheet...*/.
You can use /* ... */ to comment multi-line blocks in a similar way you do in C and C++ programming languages.
Syntax
/* Single-line comment */ /* Multi-line comment can span multiple lines */
Example: Adding Comments to CSS
<!DOCTYPE html>
<html>
<head>
<style>
/* Main paragraph styling */
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/*
This is a multi-line comment
that explains complex styling rules
and can span multiple lines
*/
h1 {
font-size: 24px; /* Inline comment for font size */
}
</style>
</head>
<body>
<h1>Welcome</h1>
<p>Hello World!</p>
</body>
</html>
Key Points
- CSS comments start with
/*and end with*/ - Comments can be placed anywhere in CSS ? between selectors, properties, or values
- Multi-line comments are useful for detailed explanations or temporarily disabling code blocks
- Comments are ignored by browsers and won't affect styling
Common Use Cases
/* Section divider */
/* ================================ */
/* HEADER STYLES */
/* ================================ */
.header {
background: blue;
/* TODO: Change to brand color */
}
/*
.old-styles {
display: none;
}
*/
Conclusion
CSS comments using /* */ syntax help document your stylesheets and temporarily disable code. Use them for better code organization and team collaboration.
Advertisements
