Why do we add comments in CSS? Code explanations are provided through comments, which may be useful if you decide to alter the source code in the future. It is important to know that Browsers don’t read comments.
The /* */ comment syntax is used for both single and multi-line comments.
Single-line comment
You can add comments to your stylesheet in two ways. The most common format is a single-line comment, shown below:
/* This is a comment in CSS */
body {
line-height: 1.5;
text-align: left;
}
A single-line comment can have its own line, or it can be placed on a line with active code, as shown here:
.card h3 {
font-size: 1.2rem;
color: #333; /* set the text color to dark charcoal */
margin: 15px 0;
}
Multi-line comments
You can also format them as multi-line comments:
/*
A comment
which stretches
over several
lines
*/
Comments can also be used to disable specific styling in your CSS stylesheets so that they won’t run:
/* The comment below is used to
disable specific styling */
/*
h1 {
font-size: 3rem;
font-weight: 700;
}
*/
You can specify the start and the end of the styles for a section of the your web page with comments:
/* Contact section starts */
.contact-wrapper {
max-width: 700px;
margin: 0 auto;
background: #0b2535;
border-radius: 5px;
padding: 40px;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
/* Contact section ends */
You can also use comments to add notes to your CSS:
/* Don’t override this style. This makes images easier to work with */
Conclusion
When it comes to remembering what you were doing when you wrote the CSS, adding comments can be helpful.
Furthermore, adding comments correctly makes it easier to start working on a project if you haven’t looked at the code in a long time.
Want to learn more about CSS? Why not check out these articles:
How do you use Cascading Style Sheets (CSS)?
What are CSS Rules and Selectors?
What are the 4 properties in a CSS Box Model?
Top comments (0)