Blog

CSS (Cascading Style Sheets) Kya Hai – Introduction to CSS

CSS (Cascading Style Sheets) Kya Hai?

Aaj hum CSS ke baare mein seekhne wale hain. CSS ek styling language hai jo web pages ko sundar aur attractive banane ke kaam aati hai. Agar aapko ek plain HTML page diya jaye, toh wo sirf ek simple document ki tarah dikhega. CSS ka use karke webpage me bahut kuch add kar sakte hain, jo ek website ko visually appealing bana sakte hai.

CSS ka full form Cascading Style Sheets hota hai. Ye ek stylesheet language hai jo HTML elements ko style dene ke liye use hoti hai. CSS ka use karke hum text ka color, background, margins, spacing, layouts aur animations define kar sakte hain.

Example:

Agar aapne ek HTML page banaya hai jisme ek heading aur ek paragraph hai, toh bina CSS ke ye page normal lagega. Lekin jab aap CSS ka use karenge toh aap iska background color change kar sakte hain, font bada ya chhota kar sakte hain aur usse ek beautiful design de sakte hain.

CSS Kaise Kaam Karta Hai?

CSS ek rules-based language hai, matlab aap elements ke liye rules likhte ho aur browser unhe follow karta hai. Jab hum CSS ko HTML ke saath connect karte hain, tab browser CSS rules ko read karta hai aur page ko uske according style deta hai.

Basic Structure:

selector {
  property: value;
}

Example:

h1 {
  color: blue;
  font-size: 24px;
}

Yahan h1 ek selector hai, jo batata hai ki hum sabhi h1 headings ko style kar rahe hain.

  • color: blue; ka matlab hai ki heading ka color blue hoga.
  • font-size: 24px; ka matlab hai ki text bada hoga.

CSS Syntax (CSS ka Structure)

CSS ka ek specific syntax hota hai jo 3 main parts se bana hota hai:

  • Selector: Yeh batata hai ki kisme styling apply karni hai (e.g., h1, p, .class-name, #id-name).
  • Property: Yeh define karta hai ki kaunsa style apply hoga (e.g., color, font-size, background-color).
  • Value: Yeh property ka specific value hoti hai (e.g., red, 16px, bold).

Example:

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

Yahan p selector hai, color property hai, aur green uski value hai. Matlab sabhi paragraphs ka color green hoga aur font size 18px hoga.

Types of CSS (CSS ke Types)

CSS likhne ke 3 tareeke hote hain:

1. Inline CSS

Inline CSS ek aisa tarika hai jisme CSS properties directly kisi HTML element ke andar likhi jati hain. Isme style attribute ka use hota hai, jo kisi specific element par styling apply karta hai.

Example:

<h1 style="color: red; font-size: 20px;">Hello World!</h1>

Is method ka use sirf tab karna chahiye jab chhoti styling add karni ho.

2. Internal CSS

Internal CSS ek aisa tarika hai jisme CSS ko ek hi HTML file ke <style> tag ke andar define kiya jata hai. Ye HTML file ke <head> section me likha jata hai aur sirf usi page par apply hota hai.

Example:

<head>
<style>
h1 {
  color: blue;
  font-size: 30px;
}
</style>
</head>

Iska use tab hota hai jab ek single page ke liye styling karni ho.

3. External CSS

External CSS ek aisa tarika hai jisme CSS ko ek alag .css file me likha jata hai aur usse multiple HTML files me apply kiya jata hai. Ye <link> tag ka use karke HTML file ke <head> section me include hota hai.

Example:

CSS file (style.css):

h1 {
  color: green;
  font-size: 25px;
}

HTML file:

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

Advantages:

  • Ye alag CSS file hoti hai, isliye code clean aur manageable hota hai.
  • Iska use multiple pages me ek saath ho sakta hai.

Advantages of CSS (CSS ke Fayde)

  • Website ka Look aur Feel Improve hota hai.
  • Code clean aur organized hota hai.
  • Multiple pages ek hi CSS file se style ho sakte hain.
  • Responsive Design possible hota hai (mobile-friendly website ban sakti hai).
  • Loading speed fast hoti hai.

Agar aap ek ache web developer banna chahte hain, toh CSS seekhna bahut zaroori hai. Next step me hum advanced CSS topics ko explore karenge jaise Flexbox, Grid aur Animations!

Quiz: Test Your Knowledge on CSS Basics and Core Concepts

Bonus: Practical Application!

Try Implementing CSS in Your Webpage Today!

Choose technologies like Selectors, types of CSS, and structure your styles for better design.

Leave a Reply