A CSS comment is a note in a stylesheet. You write it between /* and */. The browser skips that text, so a comment does not change the layout.
The same markers cover one line and many lines. Use a comment to explain a rule, or wrap a rule in /* */ so the browser stops applying it while you edit. A stylesheet has no // comment. The first */ ends the note, so comments do not nest.
/* outer /* inner */ ends at the first */. The second /* is just more comment text.
One form, used for a short note or a longer one:
/* A one-line comment */
/*
A comment
which stretches
over several
lines
*/
p {
color: teal; /* brand color */
}A comment is allowed wherever the stylesheet allows whitespace.
| Place | Example | Remember |
|---|---|---|
| Before a rule | /* nav */ nav { } | The rule still applies |
| Between declarations | color: teal; /* note */ | The declaration still applies |
| Around a whole rule | /* span { color: blue; } */ | That rule is turned off |
| Across lines | /* line one | Newlines stay inside the note |
| Nested note | /* a /* b */ c */ | The first */ ends it |
| Two slashes | // note | Not a comment in a .css file |
Three stylesheets. View Output shows what the page paints. The comment text itself stays off the page.
The comment names the color. The paragraph is still teal.
/* Brand color for body text */
p {
color: teal; /* #008080 */
}color: teal.Saved in teal. It does not show the words in the comments.Wrap the blue rule in a comment. The span keeps the color it inherited.
/*
span {
color: blue;
font-size: 1.5em;
}
*/
p {
color: #334155;
}/* and */, so the browser does not apply blue or 1.5em.#334155.A second /* does not open a nested comment. The teal rule sits after the first close, so it applies.
/* start
p { color: crimson; }
/* does not nest */
p { color: teal; }/* and includes the crimson rule.*/. The second /* was only text inside the note.Combine several pictures into one file and show a piece with CSS.
8 people found this page helpful