CSS Comments

CSS Comments అంటే ఏమిటి?

CSS Comments అనేవి CSS codeలో developer కోసం రాసే notes. Browser commentsను చదివినా, వాటిని pageపై చూపించదు మరియు వాటి ఆధారంగా styling చేయదు.

CSS comment రాయడానికి /* మరియు */ symbols ఉపయోగిస్తాం. Comment ఈ రెండు symbols మధ్యలో ఉంటుంది.

CSS Comment Syntax

/* This is a CSS comment */

CSS Comments ఎందుకు ఉపయోగించాలి?

• Codeలోని భాగం ఏమి చేస్తుందో గుర్తుంచుకోవడానికి.
• Long CSS fileను sectionsగా విభజించడానికి.
• కొంతకాలం ఒక CSS declarationను తాత్కాలికంగా disable చేయడానికి.
• Teamలోని ఇతర developersకు code గురించి వివరించడానికి.

Single-line మరియు multi-line comments

CSSలో ప్రత్యేకమైన single-line comment syntax లేదు. /* ... */ syntaxను ఒక lineలో లేదా అనేక linesలో ఉపయోగించవచ్చు.

/* Header styles */

/* These styles control the main card.
   The comment can continue across multiple lines. */

Commentను CSS declaration మధ్యలో కూడా ఉంచవచ్చు. కానీ comment symbols సరిగ్గా close చేయాలి.

Commentతో CSSను తాత్కాలికంగా disable చేయడం

ఒక declarationను commentలో పెట్టినప్పుడు browser దాన్ని ignore చేస్తుంది. అందువల్ల ఆ style ప్రస్తుతం apply కాదు. ఇది testingలో ఉపయోగకరం.

Simple Explanation

CSS comment అనేది browser కోసం కాదు, developer కోసం రాసే note. Comment ఎప్పుడూ /*తో మొదలై */తో ముగుస్తుంది.

ఉదాహరణకు, /* Make the heading blue */ అనేది browser pageపై కనిపించదు. Commentలో ఉన్న CSS declaration కూడా apply కాదు.

HTML commentsలా CSSలో // ఉపయోగించకండి. CSSలో సరైన syntax /* comment */ మాత్రమే.

Real-Life Example

ఒక notebookలో ప్రతి chapterకు చిన్న note లేదా label రాస్తే, తర్వాత ఆ chapterను సులభంగా అర్థం చేసుకోవచ్చు. అదే విధంగా CSS comments codeలోని sectionsను గుర్తించడానికి సహాయపడతాయి.

ఉదాహరణకు, ఒక websiteలో header styles, card styles, footer styles వేరుగా ఉంటే, ప్రతి section ముందు comment రాస్తే codeను edit చేయడం సులభం అవుతుంది.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Comments</title>
  <style>
    /* Set the page background and text font */
    body {
      background-color: #f2f7ff;
      font-family: Arial, sans-serif;
    }

    /* Style the main heading */
    h1 {
      color: #123b72;
    }

    /* This paragraph color is temporarily disabled */
    p {
      /* color: #333333; */
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>CSS Comments</h1>
  <p>Comments help developers understand CSS code.</p>
</body>
</html>

The page has a light blue background. The heading is dark blue. The paragraph is 18 pixels in size and uses the browser's default text color because its color declaration is commented out.

Line-by-Line Explanation

Try It

Try this CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Comment Practice</title>
  <style>
    /* Add a note about the heading style here */
    h1 {
      color: darkgreen;
    }

    /* Temporarily disable this declaration and compare the result */
    p {
      color: #333333;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>My CSS Note</h1>
  <p>Try commenting and uncommenting the color declaration.</p>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• CSS comment syntax: /* comment */.
• Comments browserలో కనిపించవు.
• Commentలో ఉన్న CSS declaration apply కాదు.
• CSSలో // ఉపయోగించకండి.
• Code explanation, section labels మరియు temporary testing కోసం comments ఉపయోగించండి.
• ప్రతి commentను */తో సరిగ్గా close చేయండి.