Commenting CSS Code

Similar to HTML code, CSS code allows you to include comments that describe or otherwise include notations about the style sheet. Unlike HTML, however, comments in CSS use a different approach to specifying comments. More specifically, you enclose CSS comments inside /* and */. So a simple CSS comment looks like this:

/* This is a CSS comment. */

It is very important to always start a CSS comment with /* and then end it with */. Also, CSS comments can appear only in style sheets (internal or external), not inline styles.

By the Way

If you've done any programming in the C, C++, or Java programming languages, the /* */ format of CSS comments will be very familiarCSS borrowed its commenting syntax from those languages.

Listing 13.2 contains modified style sheet code from the Waldorf School sample pages shown in the preceding hour. This version of the style sheet is just like the previous version except for the new comments that help to explain the meaning of the styles.

Listing 13.2. CSS Comments Can Be Helpful in Explaining the Meaning of Style Rules

/* Make all body text maroon-colored 12-point Book Antiqua
   with 16-point vertical spacing between lines of text
   and 10-point margins. Use parchment.gif as the background. */
body {
  font-size:12pt;
  font-family:Book Antiqua;
  color:maroon;
  line-height:16pt;
  margin-left:10pt;
  margin-right:10pt;
  background:url(parchment.gif);
}

/* Indent paragraphs */
p {
  margin-left:24pt;
  margin-right:24pt;
}

/* Make headings Prose Antique bold with generous line spacing.
   If user doesn't have Prose Antique, use Lucida Handwriting. */
h1 {
  font:24pt Prose Antique, Lucida Handwriting;
  font-weight:bold;
  line-height:30pt;
}

h2 {
  font:18pt Prose Antique, Lucida Handwriting;
  font-weight:bold;
  line-height:22pt;
}

/* Don't underline links, and make all links red.
   Make links flash black when activated. */
a {
  text-decoration:none;
}

a:link {
  color:red;
}

a:visited {
  color:red;
}

a:active {
  color:black;
}

/* Format footnotes as 9-point Book Antiqua, and center them. */
div.footnote {
  font-size:9pt;
  line-height:12pt;
  text-align:center
}

This code demonstrates the usefulness of comments in CSS style sheets, and how they can be used to help paint a more detailed picture of what is going on with each style rule.

Table of Contents