CSS Comments

Used to add explanatory or informational notes within your stylesheet that are ignored by the browser when rendering the web page.
Comments are helpful for providing context to your code or for temporarily disabling certain styles without removing them entirely.
There are two types of comments:
  1. Single-line comments
  2. Multi-line comments

Single-line comments

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple HTML Page</title>
  <style>
    /* h1 styles */
    h1 {
      background-color: #333;
      color: #fff;
      padding: 1em;
    }
  </style>
</head>
<body>
    <h1>Simple HTML Page</h1>
</body>
</html>
Run

Multi-line comments

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multiple CSS Comments</title>

  <style>
    /*
      h1 styles:
      keep background color, color and padding styles in it.
    */
    h1 {
      background-color: #333;
      color: #fff;
      padding: 1em;
    }
  </style>
</head>
<body>
    <h1>Multiple CSS Comments</h1>
    <p>This is a simple example demonstrating the use of multiple CSS comments.</p>
</body>
</html>
Run

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multiple CSS Comments</title>

  <style>
    /* Global styles */
    body {
      font-family: 'Arial', sans-serif;
      background-color: #f2f2f2; /* Background color for the entire page */
      margin: 0;
      padding: 0;
    }

    /* Header styles */
    header {
      background-color: #333;
      color: #fff;
      padding: 1em;
    }

    /* Navigation menu styles */
    nav {
      display: flex;
      justify-content: space-around;
      background-color: #444;
      padding: 0.5em;
    }

    /* Main content area */
    main {
      max-width: 800px;
      margin: 0 auto;
      padding: 1em;
    }

    /*
      Footer styles:
      - Center-align text
      - Provide padding
      - Set background and text color
    */
    footer {
      text-align: center;
      padding: 1em;
      background-color: #333;
      color: #fff;
    }
  </style>
</head>
<body>

  <header>
    <h1>Multiple CSS Comments</h1>
  </header>

  <main>
    <p>This is a simple example demonstrating the use of multiple CSS comments.</p>
  </main>

  <footer>
    <p>&copy; 2024 Multiple CSS Comments</p>
  </footer>

</body>
</html>
Run

Quick Recap - Topics Covered

CSS Comments

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compile or Try on own Now

Example js

Example 1 Example 2 Example 3 Example 4 Example 5


Quiz


FEEDBACK