CSS Comments Tutorial - We Work Worldwide

In this section, we will learn how to create comments in CSS.

Comments in CSS

Comments are a set of text description that we set inside a CSS source code. Note that browsers don’t care about comments! Basically, comments are for developers and not browsers! So anything we put into a source code as a comment, will be skipped.

There are lots of reason why we use comments in CSS! Some of them are:

To explain the structure of the source code for the future
reference.
To explain a potential bug in a code that needs to be solved to
other developers that are going to work on the code.
To comment out part of a source code that we don’t need without
actually removing it.
To set an opinion on part of a source code (perhaps a suggestion
on how to make the code better etc.) for other developers to
read.

Comments in CSS Syntax:

This is the syntax of creating a comment in a CSS source code:

/* comments…. */

A comment in CSS is surrounded with the opening /* symbol and closing */ symbol. Note that there’s no space between / and * for neither opening nor closing borders.

Now within the provided space, we can add comments.

Note that comments in CSS can take multiple lines! To write a multiline comment, put the closing */ symbol in a few lines below the /* symbol and the space you get in between, becomes the commenting area for adding new comments to the source code.

comment…

Note: If you’re familiar with programming languages like Java, C#, C, C++ or JavaScript, the syntax of comments in CSS is exactly the same as multiline commenting in these languages.

Example: single line comment in CSS

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
/*changing the font size of the body element to 60px */
body{
font-size: 60px;
}
/* Setting the font size of the <p> element to its initial value */
p{
font-size: initial;
}
</style>
</head>
<body>
<h3>This is a h3 header</h3>
<div>
<p>This is a simple paragraph</p>
</div>
</div>
</body>
</html>

Example: multilines comment in CSS

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
/*This
is
a
multiline
comment
in
CSS
*/
body{
font-size: 60px;
}
/* Setting the font size of the <p> element to its initial value */
p{
font-size: initial;
}
</style>
</head>
<body>
<h3>This is a h3 header</h3>
<div>
<p>This is a simple paragraph</p>
</div>
</div>
</body>
</html>

Commenting Out in CSS

As mentioned before, using comments we can comment out those parts of a CSS source code that we don’t need, without actually removing the part of the code so that if we need them again, we can simply uncomment the code so that it becomes part of the source-code again.

Example: CSS comment out

<!DOCTYPE html>
<html>
<head>
<title>CSS is fun :)</title>
<style type="text/css">
/*
body{
font-size: 60px;
}
p{
font-size: initial;
}
*/
</style>
</head>
<body>
<h3>This is a h3 header</h3>
<div>
<p>This is a simple paragraph</p>
</div>
</div>
</body>
</html>

In this example, we’ve commented out the entire CSS source code and so no style applied to the HTML elements other than their initial styles.