CSS Indentation and Comments

Keep your stylesheets clean and easy to navigate

Learn how to indent CSS properties and use comments to label sections of your stylesheet, so your code stays readable as it grows.

💡 The Concept

CSS indentation and comments keep your stylesheets readable as they grow, which makes maintenance and debugging much less frustrating. Just like HTML, well-indented CSS is much easier to read and debug. When a stylesheet grows to hundreds of lines, consistent indentation and clear comments are what keep it manageable.

CSS Indentation

In CSS, the properties inside a rule block should each be indented one level:

img {
   margin: 0 auto;
   border: 2px solid purple;
}

Each property sits on its own line, indented inside the curly braces. The closing brace goes back at the left margin. This makes it easy to scan which properties belong to which selector.

CSS Comments

CSS uses a different comment syntax than HTML. The double-slash // does not work in CSS. Use /* */ instead:

/* This is a CSS comment */

CSS comments are especially useful for labeling sections of a large stylesheet so you can find things quickly:

/* ── Navigation ── */
nav {
   background-color: #333;
}

/* ── Footer ── */
footer {
   padding: 20px;
}

You can also use a comment to temporarily disable a property while testing, without deleting it:

h1 {
   font-size: 3em;
   /* color: red; */
}

🎬 Video Demonstration

This video covers both CSS and HTML indentation and comments. It was recorded to cover both topics together, so you will also see the HTML portion, which is covered separately in Lesson 2.9.

❓ Frequently Asked Questions

Does indentation in CSS actually matter, or is it just a style preference?

CSS ignores whitespace, so indentation has no effect on how the browser reads your stylesheet. The browser will render the same result whether your code is neatly indented or crammed onto one line. Indentation is entirely for human readers: it makes it easy to see at a glance which properties belong to which rule, and it becomes increasingly important as stylesheets grow longer. A messy stylesheet is not broken — it is just much harder to maintain and debug.

Does the order of properties inside a CSS rule matter?

In most cases, no. The browser applies all properties in a rule regardless of order. However, there are a few situations where order matters: shorthand properties can override individual properties that come before them (for example, writing margin: 0 after margin-top: 20px will cancel the top margin). Within the same rule, the last declaration wins if two properties conflict. Beyond those edge cases, many developers sort properties alphabetically or by category (positioning, sizing, color, typography) just for readability.

Can I use comments to leave notes about why I wrote something a certain way?

Absolutely — that is one of the best uses for comments. A future version of you (or a teammate) will not always remember why a particular rule exists or why a value is set the way it is. Comments like /* 48px matches the nav height — do not change without updating nav too */ can prevent hours of confusion later. Short notes explaining the reasoning behind non-obvious decisions are far more valuable than comments that just restate what the code already says.

What is the difference between CSS comments and HTML comments?

They use completely different syntax. HTML comments look like this: . CSS comments look like this: /* this is a comment */. If you use an HTML comment inside a CSS file or a <style> block, it will not work as a comment — the browser will try to parse it as CSS and either ignore it or throw an error. Always use the right syntax for the context you are in.

Are there tools that auto-format CSS for me?

Yes. Most code editors can format CSS automatically. In VS Code, you can right-click in a CSS file and choose Format Document, or set the editor to format on save. Extensions like Prettier are popular for enforcing consistent formatting across HTML, CSS, and JavaScript in a project. These tools handle indentation, spacing, and line breaks so you do not have to think about it — your code comes out clean every time you save.

★ Key Takeaways

Clean CSS is easier to read and easier to fix when something breaks. This lesson covered CSS indentation and comments. Next, you will look at the difference between background images and embedded images. Knowing which to use for each situation is an important skill for any web developer.

Next Lesson: Background vs. Embedded Images

← Back to CSS Fundamentals Lessons

← Back to All Lessons