☜ ☞

Comments in html and css

Comments are essential in both CSS and HTML for documenting your code and making it more readable for yourself and others who might work on it in the future. Here’s how you can add comments in both:

HTML Comments

In HTML, comments are added between . Anything between these tags will be ignored by the browser.

<!-- This is a single-line comment in HTML -->
<!-- 
   This is a multi-line comment in HTML.
   It can span multiple lines.
-->

CSS Comments

In CSS, comments are added between /* and */. Similarly, anything between these symbols will be ignored by the browser.

/* This is a single-line comment in CSS */
/* 
   This is a multi-line comment in CSS.
   It can span multiple lines.
*/

Example of Comments in HTML and CSS

Here is a simple example that shows how to use comments in both HTML and CSS:

HTML Example

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <!-- Link to external CSS file -->
   <link rel="stylesheet" href="styles.css">
</head>
<body>
   <!-- Main container for the page content -->
   <div class="container">
       <!-- Heading for the page -->
       <h1>Welcome to My Website</h1>
       <!-- Paragraph with some text -->
       <p>This is a sample paragraph.</p>
   </div>
</body>
</html>

CSS Example

/* Reset some default styles */
body {
   margin: 0;
   padding: 0;
   font-family: Arial, sans-serif; /* Set default font */
}
/* Main container styling */
.container {
   padding: 20px;
   background-color: #f0f0f0; /* Light gray background */
}
/* Heading style */
h1 {
   color: #333; /* Dark gray text color */
}
/* Paragraph style */
p {
   font-size: 16px; /* Set font size */
   color: #666; /* Medium gray text color */
}

Comments are a good practice in coding as they help clarify the purpose of the code, especially for complex sections or for team projects.

☜ ☞