Notes/CSS3/CSS Syntax & Comments

beginner6 min read

CSS Syntax & Comments

Learn the strict anatomy of a CSS rule, how to group selectors to write clean code, write comments, and avoid common syntax mistakes.

1. The Anatomy of a CSS Rule

CSS follows a strict structure: Who you are styling (Selector) and What you are changing (Declaration).

Anatomy of a CSS Rule

h1{color:blue;}

SelectorPropertyValue

Selector: The HTML element you want to style (e.g., h1).
Property: The aspect you want to change (e.g., color, font-size).
Value: The setting for that property (e.g., blue, 18px).
Declaration: The Property + Value pair (color: blue;).

styles.css

1h1 {           /* h1 is the Selector */
2  color: red;  /* color is the Property, red is the Value */
3}

2. Comments (The Invisible Ink)

Comments are for humans only. The browser completely ignores them. CSS comments are multi-line, denoted with /* at the start and */ at the end.

What the browser sees

I am ignored (Commented Out)

I am Active!

styles.css

1/* This rule is ignored */
2/* .box { background: red; } */
3 
4.box {
5  color: green;
6}

3. Grouping Selectors (The "Combo" Move)

Instead of writing the same code 3 times, we list the selectors separated by commas to apply a shared style. The shapes below are different in HTML, but the color and border are shared in CSS.

.circle, .square, .pill — one shared style

Group Text

styles.css

1.circle, .square, .pill {
2  background-color: #f39c12;
3  border: 4px dashed #d35400;
4  box-shadow: 5px 5px 0px #333;
5}

Less code to write.
Easier to maintain (change the color in one place, update everything).
Cleaner stylesheet.

4. Common Syntax Mistakes

Always ensure every property ends with a semicolon (;) and rules are wrapped in curly braces { }.

styles.css

1/* BROKEN CSS */
2p {
3  color: red      /* <-- MISSING SEMICOLON (Error!) */
4  font-size: 12px;
5}
6 
7h1                 /* <-- MISSING CURLY BRACES */
8  color: blue;

5. Summary

The essential syntax rules at a glance:

Syntax: Selector { Property: Value; }
Comments: Start with /* and end with */.
Grouping: Use commas to select multiple elements at once (e.g., h1, h2, p).

Key Takeaways

1.Syntax: Selector { Property: Value; }
2.Comments start with /* and end with */, and are ignored by browsers.
3.Grouping: Use commas to select multiple elements at once (e.g., h1, h2, p).
4.Every declaration must end with a semicolon (;) and blocks are enclosed in curly braces {}.

CSS Selectors Basics Colors & Backgrounds

Notes/CSS3/CSS Syntax & Comments

beginner6 min read

CSS Syntax & Comments

Learn the strict anatomy of a CSS rule, how to group selectors to write clean code, write comments, and avoid common syntax mistakes.

1. The Anatomy of a CSS Rule

CSS follows a strict structure: Who you are styling (Selector) and What you are changing (Declaration).

Anatomy of a CSS Rule

h1{color:blue;}

SelectorPropertyValue

Selector: The HTML element you want to style (e.g., h1).
Property: The aspect you want to change (e.g., color, font-size).
Value: The setting for that property (e.g., blue, 18px).
Declaration: The Property + Value pair (color: blue;).

styles.css

1h1 {           /* h1 is the Selector */
2  color: red;  /* color is the Property, red is the Value */
3}

2. Comments (The Invisible Ink)

Comments are for humans only. The browser completely ignores them. CSS comments are multi-line, denoted with /* at the start and */ at the end.

What the browser sees

I am ignored (Commented Out)

I am Active!

styles.css

1/* This rule is ignored */
2/* .box { background: red; } */
3 
4.box {
5  color: green;
6}

3. Grouping Selectors (The "Combo" Move)

Instead of writing the same code 3 times, we list the selectors separated by commas to apply a shared style. The shapes below are different in HTML, but the color and border are shared in CSS.

.circle, .square, .pill — one shared style

Group Text

styles.css

1.circle, .square, .pill {
2  background-color: #f39c12;
3  border: 4px dashed #d35400;
4  box-shadow: 5px 5px 0px #333;
5}

Less code to write.
Easier to maintain (change the color in one place, update everything).
Cleaner stylesheet.

4. Common Syntax Mistakes

Always ensure every property ends with a semicolon (;) and rules are wrapped in curly braces { }.

styles.css

1/* BROKEN CSS */
2p {
3  color: red      /* <-- MISSING SEMICOLON (Error!) */
4  font-size: 12px;
5}
6 
7h1                 /* <-- MISSING CURLY BRACES */
8  color: blue;

5. Summary

The essential syntax rules at a glance:

Syntax: Selector { Property: Value; }
Comments: Start with /* and end with */.
Grouping: Use commas to select multiple elements at once (e.g., h1, h2, p).

Key Takeaways

1.Syntax: Selector { Property: Value; }
2.Comments start with /* and end with */, and are ignored by browsers.
3.Grouping: Use commas to select multiple elements at once (e.g., h1, h2, p).
4.Every declaration must end with a semicolon (;) and blocks are enclosed in curly braces {}.

CSS Selectors Basics Colors & Backgrounds