MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Welcome to Chapter 2! 🎉
Now that you understand how CSS pairs up with HTML, it is time to master the exact writing rules of CSS so your stylesheets stay clean, organized, and error-free.
Think of CSS syntax like English grammar: if you forget a full stop at the end of a sentence or misplace quotation marks, your sentence becomes confusing. In CSS, forgetting a semicolon or curly bracket can make an entire section of your design fail to load!
Let us learn how to write neat, professional CSS code.
In most real websites, an element has more than one style applied to it. For example, a heading might have a custom color, a bigger font size, and centered alignment all at once:
Let us look at how this is structured:
;).Imagine you are studying your Science textbook. You use a pencil to write little notes in the margin: "Important for Half-Yearly Exam!" or "Remember formula for chapter 4".
When your teacher reads the textbook aloud in class, they skip your personal pencil notes!
CSS Comments work the exact same way. They are notes you write for yourself (or your team) inside the code. The web browser completely ignores them when styling the webpage.
In CSS, all comments start with /* and end with */:
// Does Not Work in CSS!In languages like C++, Java, or JavaScript, people write single-line comments using double slashes (//). CSS does NOT support // comments! If you write // color: red;, the browser will fail to parse that line and may break the rules below it. Always use /* ... */.
/* ... */.Is CSS case-sensitive?
| CSS Part | Case Sensitivity | Example | Recommendation |
|---|---|---|---|
| Property Names | Case-insensitive | color is the same as COLOR or Color | Always write lowercase (color: red;) |
| Values & Units | Mostly case-insensitive | px, PX, Px are treated the same | Always write lowercase (16px, blue) |
| Class & ID Names | Strictly Case-Sensitive! | .menu-card is NOT the same as .Menu-Card | Stick to lowercase with hyphens (kebab-case) |
COLOR: RED; looks unprofessional and can cause subtle bugs.There are two common ways developers format their CSS:
When learning, always write Expanded CSS. Once you launch a real website, build tools (like Next.js) automatically compress your CSS behind the scenes!
| What Beginners Do (Don't ❌) | What You Should Do Instead (Do ✅) | Why? |
|---|---|---|
// Style the button | /* Style the button */ | Double slashes // are invalid syntax in CSS. |
p { Color: Blue; Font-Size: 16PX; } | p { color: blue; font-size: 16px; } | Capital letters make CSS hard to read and look unpolished. |
h1 { color: red font-size: 20px } | h1 { color: red; font-size: 20px; } | Missing semicolons will cause the browser to ignore the second property. |
Putting space between number and unit (16 px). | Write unit immediately after number (16px). | 16 px is invalid and will be ignored by the browser. |
{ ... }, each ending with a semicolon (;)./* and */.// single-line comments.24px, not 24 px).Test your understanding with these multiple-choice questions:
margin: 20 px;?clean-code.html.<style> block:letter-spacing rule by wrapping it in /* ... */. Save and refresh your browser to see the effect! 🚀In the next lesson, we will continue your web styling journey with Universal and Element Selectors (CSS Syntax & Selectors Basics).
👉 Continue to Next Lesson: Universal and Element Selectors →
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| Inline, Internal, External CSS | Universal and Element Selectors |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.