CSS Comments

CSSWeb DevelopmentFront End Technology

<p style="">We can write comments for CSS declarations to help improve readability and make it more understandable. CSS follows C language style syntax for comments which start and end with forward slash between which the content is enclosed in asterisks. Any declaration written inside /**/ is ignored.</p><h2>Syntax</h2><p>The syntax of CSS comments is as follows &minus;</p><pre class="result notranslate">/*Comments*/</pre><p>The following examples illustrate CSS comments &minus;</p><h2>Example</h2><p><a class="demo" href="http://tpcg.io/cLpE9qzK" rel="nofollow" target="_blank">&nbsp;Live Demo</a></p><pre class="prettyprint notranslate" style="">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; ul { &nbsp; &nbsp;list-style: none; /*To remove the solid circles*/ } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;ul&gt; &lt;li&gt;&Sigma;1&lt;/li&gt; &lt;li&gt;&Sigma;2&lt;/li&gt; &lt;li&gt;&Sigma;3&lt;li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt;</pre><h2>Output</h2><p>This gives the following output &minus;</p><p style=""><img src="https://www.tutorialspoint.com/assets/questions/media/33934/CSS_Comments.jpg" class="fr-fic fr-dib" style="width: 485px; height: 112.358px;" width="485" height="112.358"></p><h2>Example</h2><p><a class="demo" href="http://tpcg.io/fxfY9pCS" rel="nofollow" target="_blank">&nbsp;Live Demo</a></p><pre class="prettyprint notranslate" style="">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; div {/*this &lt;div&gt; selects all &gt;div&gt; elements and the declares the following*/ &nbsp; &nbsp;margin: 8px; &nbsp; &nbsp;float: left; &nbsp; &nbsp;width: 100px; &nbsp; &nbsp;height: 100px; &nbsp; &nbsp;/*border: 2px solid black;*/ &nbsp; &nbsp;/*removed border*/ &nbsp; &nbsp;background-color: lightpink; } div + div { /*this makes a circle*/ &nbsp; &nbsp;border-radius: 50%; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt;&lt;/div&gt; &lt;div&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><h2>Output</h2><p>This gives the following output &minus;</p><p style=""><img src="https://www.tutorialspoint.com/assets/questions/media/33934/CSS_Comments1.jpg" class="fr-fic fr-dib" style="width: 450px; height: 123.957px;" width="450" height="123.957"></p>
raja
Updated on 06-Jan-2020 10:58:54

Advertisements