CSS comments

Last update on August 19 2022 21:50:52 (UTC/GMT +8 hours)

CSS comments

1. CSS comments stop the CSS style rules written within a CSS stylesheet, from being processed while displaying an HTML document in the browser.

2. CSS comments start with "/*" and end with "*/". You can use this both

3. CSS comments can be placed anywhere in a CSS stylesheet.

4. CSS comment can not be nested, i.e. a comment can not hold another comment within it.

5. You can use HTML style comment ( "" ) in a CSS stylesheet also. But it does not have anything to do with CSS comments. This is allowed just to hide style rules from pre-HTML 3.2 user agents ( e.g. browsers ).

Pictorial presentation of CSS comment

Now, look at the example bellow:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>CSS syntax example</title>
<style type="text/css">
p {
/*background-color: #FDD017;
color: #003366;*/
font-weight: bold;
width: 500px;
/*padding: 5px; */
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a interdum turpis. Sed viverra odio a leoaliquam porttitor. Duis sed sodales purus. Vestibulum lacus lorem, aliquam ut tincidunt a, pretium id ante. Duis eget nisi sem, eu dignissim lorem. Suspendisse sit amet lorem leo. Nullam euismod posuere turpis, et sollicitudin elit hendrerit ac.Vestibulum sit amet mauris elit, vitae convallis neque. Vivamus at mattis ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam non magna nec ipsum pharetra posuere. Proin libero arcu, rutrum non convallis vitae, rutrumpulvinar eros. In hac habitasse platea dictumst></p>
</body>
</html>

Pictorial presentation

Conditional comments are very useful for loading a separate stylesheet for IE.

Previous: CSS statements, rules, declaration blocks and selectors
Next: CSS values