Introduction to CSS

What is CSS

CSS ki full form hai Cascading Style Sheets. Ye ek styling language hai jo HTML documents ko design aur layout deti hai.

Agar HTML ko hum ek building ka structure samjhein, toh CSS us building ka paint, decoration, aur interior design hai.

HTML content banata hai, aur CSS us content ko beautiful aur attractive banata hai.

CSS Ka Role

HTML me sirf structure hota hai: headings, paragraphs, images, tables, etc.
CSS decide karti hai ki ye sab kaise dikhna chahiye:
Color kaisa hoga ?
Font ka style kya hoga ?
Layout kaise arrange hogi ?
Margin/Padding kiya hoga ?
Background kaise hoga ?

Example:

<!-- HTML -->
<h1>Welcome to My Website</h1>

<!-- CSS -->
<style>
  h1 {
    color: blue;
    text-align: center;
    font-family: Arial, sans-serif;
  }
</style>

Yahaan HTML sirf heading banata hai, lekin CSS usko blue color aur center align bana deta hai.

CSS Kaise Kaam Karti Hai?

CSS kaam karti hai selectors aur properties ke through.

Selector: HTML element jisko aap style dena chahte ho (jaise <h1>, <p>, <div>).
Property: Wo feature jo aap change karna chahte ho (jaise color, font-size).
Value: Property ki specific value (jaise red, 20px).

Example:

p {
  color: red;
  font-size: 18px;
}

Yahaan p selector hai, color aur font-size properties hain, aur red & 18px unki values hai.

Types of CSS

CSS ko HTML me add karne ke teen main tareeke hote hain:

1. Inline CSS

Direct HTML tag ke andar style lagana.

<p style="color: green; font-size: 20px;">Hello World</p>

Pros: Simple aur quick.
Cons: Reuse nahi ho paata, messy code ho jata hai.

2. Internal CSS

HTML ke <head> section me <style> tag ke andar likhna.

<style>
  h1 {
    color: blue;
  }
</style>

Pros: Single page me control easy hota hai.
Cons: Har page ke liye alag-alag likhni padti hai.

External CSS

CSS ko ek separate .css file me likhna aur HTML file se link karna.

<link rel="stylesheet" href="style.css">

Pros: Puri website ka design ek hi file se control hota hai, clean code.
Cons: File load hone me thoda time lag sakta hai.

CSS Kyun Zaroori Hai?

Presentation Control: Website ko professional aur attractive banati hai.
Separation of Concerns: Structure (HTML) aur design (CSS) ko alag rakhta hai.
Consistency: Ek hi CSS file se poori website ka ek jaisa design maintain hota hai.
Responsive Design: Mobile, tablet, aur desktop ke liye alag layouts banana easy hota hai.

Conclusion

CSS web development ka ek essential skill hai. Ye aapke HTML content ko ek beautiful, organized aur user-friendly look deta hai.