w3resource logo


CSS comments - CSS tutorials

CSS comments

rating Average rating 10 out of 10. Total 1 users rated.

<<PreviousNext>>

CSS comments

1. CSS comments stop the CSS style rules written within a CSS stylesheet, from being processed while displaying an HTML document in 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 form pre-HTML 3.2 user agents ( e.g. browsers ).

Pictorial presentation of CSS comment

css comments

 

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>

Result

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a interdum turpis. Sed viverra odio a leo aliquam 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, rutrum pulvinar eros. In hac habitasse platea dictumst.

Pictorial presentation

css comments browser

 

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



<<PreviousNext>>

Rate this tutorial


Your Rating: not set

Share this tutorial

RSS Feed