Cambridge Syllabus Notes

ICT 0417 – Website Authoring: Attaching Comments to an External Stylesheet

ICT 0417 – Website Authoring

Objective

Be able to attach comments to an external stylesheet.

1. Why Use Comments in CSS?

Explain the purpose of the style rules.
Make the stylesheet easier to maintain and update.
Allow sections of code to be temporarily disabled without deleting them.
Provide information for other developers or future you.

2. Syntax for CSS Comments

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	`/* comment line 1 comment line 2 */`	`/* Header layout Adjust for mobile view */`

3. Attaching Comments to an External Stylesheet

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.

4. Practical Example

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>

5. Best Practices for Commenting CSS

Use clear, concise language.
Separate sections with a line of dashes or asterisks for readability.
Update comments whenever you modify the associated code.
Avoid leaving large blocks of commented‑out code in the final production file.

Suggested diagram: Flowchart showing the process from creating a CSS file, adding comments, linking it in HTML, and the browser rendering the page.