How to write comments in CSS?

By IncludeHelp Last updated : November 15, 2023

Comments play a crucial role when it comes to coding. They are really very informative as they are actually in human-readable form. If you always provide comments before or after writing them then it becomes easy to understand for the other developers or the people who are not from a technical background. So, what are the comments? What do we write comments in our code?

Comments

Comments are some lines that we include in our code to make our code understandable to everyone. In comments basically, we explain why a particular piece of code is written. Imagine a situation, where you are working in a company where the old developer who was developing the website has left for some reason, now you have to complete that website, and when you open the editor you don't find any comments, in this case it would be very difficult for you to understand the code manually also it will take a lot of time. In spite, if the old developer had used some comments explaining why a particular code in written then it would be a second's job for you to understand the code.

CSS Comments

CSS comments are the comments placed within the CSS styles and are used for explaining the code, and they are helpful for the designer during changing the source code later. CSS comments are the comments placed within the CSS styles and are used for explaining the code, and they are helpful for the designer during changing the source code later.

Writing CSS Comments

CSS comments are written in the <style> tag, by using the /* and */ characters. CSS comment starts with /* and ends with */. Comments never affect the flow of code.

Syntax

Syntax to write CSS comments is:

/*some text*/

CSS Comments in PYCHARM or VS CODE

If you are using editors like PYCHARM or VS CODE then in that case you can directly select a particular piece of code and press ctrl + /.

Example

Let us see an example where we will mention some comments and you will feel yourself how comments really help in understanding the whole code.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      /*How to center your website horizontally with CSS?*/
      .center {
      /*To center a website you just need to provide the max-width according to you preference */
      /*(here max-width is set to 800px) and give different background colors to body and content. */
      max-width: 800px;
      margin: auto;
      background: darkseagreen;
      color: white;
      padding: 10px;
      }
      /*This will easily center your website as well as you can easily distinguish between */
      /*the main body and the content body. */
      /*All of other properties can be set according to your creativity.*/
      p {font-size: 36px;font-weight: lighter;}
    </style>
  </head>
  
  <body style="background: whitesmoke;font-family:'Arial Rounded MT Bold';">
    <div class="center">
      <h1 style="text-align: center;">INCLUDE HELPS EXAMPLE</h1>
      <p>As we now know that we can not buy happiness with money and there is no other shortcut to happiness. <br>It is something that you feel from within.
        In addition, true happiness comes from within yourself.Happiness is basically a state of mind.Moreover, it can only be achieved by being positive and avoiding any negative thought in mind. And if we look at the bright side of ourselves only then we can be happy.
        True happiness means the satisfaction that you find worthy. The long-lasting true happiness comes from life experience, a feeling of purpose, and a positive relationship.
      </p>
    </div>
  </body>
  
</html>

Output

The output of the above example is:

Note: All the lines starting with a backslash are the comment part of the code, it will not affect the actual code.

How to create a pill navigation menu with CSS?

How to create a zebra striped table with CSS?