Published by Patrick Mutisya · 14 days ago
Be able to attach comments to an external stylesheet.
CSS comments start with /* and end with */. Everything between these delimiters is ignored by the browser.
| Comment Type | Syntax | Example |
|---|---|---|
| Single‑line comment | /* comment */ | /* Main navigation styles */ |
| Multi‑line comment | /* | /* |
Create the external stylesheet. Save the file with a .css extension, e.g., styles.css.
Insert comments directly in the CSS file. Place them before, after, or between rule sets to describe their purpose.
Link the stylesheet to your HTML document. Use the <link> element inside the <head> section.
Optionally comment out the <link> element. This is useful for testing or when you want to temporarily disable the stylesheet without removing the code.
Below is a complete example showing how comments are added to an external stylesheet and how the stylesheet is linked to an HTML page.
/* styles.css – External stylesheet */
/* -------------------------------------------------
Global page settings
------------------------------------------------- */
body {
margin: 0;
font-family: Arial, sans-serif;
}
/* -------------------------------------------------
Header styles
------------------------------------------------- */
header {
background-color: #003366;
color: #ffffff;
padding: 20px;
}
/* -------------------------------------------------
Navigation menu – comment out to test layout
------------------------------------------------- */
/* nav {
background-color: #005599;
padding: 10px;
} */
HTML file linking the stylesheet (with an optional comment around the link):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample Page</title>
<!-- Link to external stylesheet -->
<link rel="stylesheet" href="styles.css">
<!-- To disable the stylesheet temporarily, comment the line above:
<!-- <link rel="stylesheet" href="styles.css"> -->
-->
</head>
<body>
<header>My Website Header</header>
<!-- Content goes here -->
</body>
</html>