CSS Syntax and Comments

What Is It?

A CSS rule contains a selector and a declaration block. Each declaration pairs a property with a value, separated by a colon and ended with a semicolon.

Properties, Tags and Attributes Explained

• selector: Chooses the elements to style, such as p or .note.
• property: value;: A declaration, such as font-size: 20px;.
• /* comment */: A note ignored by the CSS parser. CSS comments do not nest.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Read a rule

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Syntax and Comments</title>
  <style>
    /* Make this paragraph easy to read. */
    p { color: #334155; font-size: 20px; }
  </style>
</head>
<body>
  <p>A selector chooses me.</p>
</body>
</html>

What you see: The paragraph is 20 pixels tall in its font size and uses slate text.

Example 2: Combine declarations

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Syntax and Comments</title>
  <style>
    .note { background: #fef3c7; padding: 12px; border-radius: 8px; }
  </style>
</head>
<body>
  <p class="note">One rule, three declarations.</p>
</body>
</html>

What you see: A yellow note has padding and rounded corners.

When and Where to Use It

Use one declaration per line in real stylesheets to make changes and debugging easier.

Common Mistake or Useful Tip

A missing closing brace can affect following rules. An invalid property or value is usually ignored.

Try It Yourself

Add a border declaration to the note.