bugl
bugl
HomeLearnPatternsSearch
HomeLearnPatternsSearch

Loading lesson path

Learn/CSS/CSS Foundations
CSS•CSS Foundations

CSS Comments

Concept visual

CSS Comments

Graph traversalgraph
ABCDE
current
queued
1
4

Start from A

Overview

Comments are used to explain the CSS code, and may help when you edit the source code at a later date. Comments are also used to temporarily disable sections of CSS code within a stylesheet. Comments are ignored by browsers! A CSS comment is placed inside the HTML <style> element, and starts with /* and ends with */

Example

Formula

/* This is a single - line comment */

p

{
color: red;
}

You can add comments wherever you want in the code:

Example p

{
color: red;

/* Set text color to red */

}

Even in the middle of a code line:

Example p

{
color: /*red*/blue;
}

Comments can also span multiple lines:

Example

Formula

/* This is a multi - line comment */

p

{
color: red;
}

HTML and CSS Comments

From the HTML tutorial, you learned that you can add comments to your HTML source by using the <!--...--> syntax. In the following example, we use a combination of HTML and CSS comments:

Example

<!DOCTYPE html> <html> <head> <style>

p {
color: red; /* Set text color to red */
}

</style> </head> <body>

Formula

< h2 > My

Heading</h2> <!-- These paragraphs will be red -->

Formula

< p > Hello

World!</p>

Formula

< p > This paragraph is styled with CSS.</p >
< p > HTML

and CSS comments are not shown in the output.</p> </body> </html>

Video: CSS Comments

Previous

Multiple Style Sheets & Cascading Order

Next

CSS Errors