Be able to attach comments to an external stylesheet

Resources | Subject Notes | Information Communication Technology ICT

21 Website Authoring: Attaching Comments to an External Stylesheet

Objective

Be able to attach comments to an external stylesheet.

Understanding Stylesheets

A stylesheet is a separate file that contains the rules for how an HTML document should be displayed. Using external stylesheets is a good practice as it separates the presentation (styling) from the content (HTML), making websites easier to maintain and update.

External stylesheets are linked to HTML documents using the element within the section.

Adding Comments to Stylesheets

Comments in CSS stylesheets are used to provide explanations, notes, or to temporarily disable sections of code. They are ignored by the CSS parser and do not affect the rendering of the website.

Comments in CSS are enclosed within double hyphens (--).

How to Attach Comments

  1. Create a CSS file: Create a separate file with a .css extension (e.g., styles.css).
  2. Add Comments: Within the styles.css file, add comments using the double hyphen syntax.
  3. Link the CSS file: In your HTML document, use the element in the section to link the CSS file.

Example

Consider the following example:

HTML File (index.html) CSS File (styles.css)
My Website

Welcome to my website

This is a paragraph of text.

 		/* This is a comment in the CSS file */ body { font-family: Arial, sans-serif; /* Sets the default font */ background-color: #f0f0f0; } h1 { color: blue; /* Sets the heading color */ text-align: center; } p { line-height: 1.5; /* Improves readability */ }

Explanation of the Example

  • In styles.css, the line starting with /* and ending with */ is a comment.
  • The comment explains the purpose of the font-family property.
  • Other comments explain the purpose of the h1 and p styling.

Benefits of Using Comments

  • Code Clarity: Comments make your CSS code easier to understand.
  • Maintainability: They help you and others understand the purpose of different CSS rules, making it easier to modify the website later.
  • Debugging: Comments can be used to temporarily disable sections of CSS code during debugging.

Important Note

Comments are ignored by the browser and are only for human readability.