CSS Syntax

CSS syntax is built from rules. A rule has a selector that picks elements, followed by a declaration block in curly braces. Inside the block, each declaration is a property, a colon, a value and a semicolon.

For example, in h2 { color: green; } the selector is h2, the property is color and the value is green.

Parts of a CSS Rule

• Selector: which elements the rule applies to (h2, .card, #menu)
• Declaration block: everything between { and }
• Property: the thing you want to change, such as color or margin
• Value: the setting for that property, such as red or 12px
• Semicolon: ends each declaration; the last one is optional but always add it

Multiple Declarations

A rule can hold as many declarations as you like. Put each on its own line so the code is easy to scan.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
h2 {
  color: white;
  background-color: teal;
  padding: 10px 16px;
  border-radius: 8px;
  text-align: center;
}
</style>
</head>
<body>
<h2>One rule, five declarations</h2>
</body>
</html>

CSS Comments

Comments start with /* and end with */. The browser ignores them. Use them to explain why a rule exists or to switch a rule off while testing. CSS has no // single-line comments.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
/* Main text color for the whole page */
p {
  color: #1f2937;
  /* font-size: 30px;  temporarily disabled */
}
</style>
</head>
<body>
<p>The commented-out font size is not applied.</p>
</body>
</html>

Grouping Selectors

When several elements share the same styles, list the selectors separated by commas instead of repeating the rule.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
h1, h2, h3 {
  font-family: Georgia, serif;
  color: #7c3aed;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
</body>
</html>

What Happens With Mistakes

CSS is forgiving. If the browser does not understand a declaration (a typo in a property name, a missing unit), it skips just that declaration and keeps going. That is handy, but it also means errors are silent, so use your browser DevTools to check which styles actually applied.

Frequently asked questions

Is CSS case sensitive?

Property names and keywords are not case sensitive, but class and id names are, because they must match the HTML exactly. Lowercase everything to stay safe.

Do I need a semicolon after the last CSS declaration?

No, the last semicolon is optional. Adding it anyway prevents bugs when you add another declaration later.

How do you write a comment in CSS?

Wrap the text in /* and */. CSS only supports this block comment style; // does not work.