Day 22: CSS Basics – Complete Beginner Guide for Styling Websites (Hindi)

🎨 Day 22: CSS Basics

(Bug Hunting / Ethical Hacking Course – Day 22)

Kal humne HTML ka structure seekha tha.
Aaj hum seekhenge CSS, jo website ko design aur style deta hai 🔥

Agar HTML ghar ka structure hai,
to CSS us ghar ka paint, decoration aur design hai.

🔹 CSS Kya Hai?

CSS ka full form hai:

Cascading Style Sheets

Ye ek styling language hai jo HTML elements ko:

✔ Color deta hai
✔ Size change karta hai
✔ Layout set karta hai
✔ Spacing control karta hai

🔹 CSS Kyun Important Hai Bug Bounty Me?

✔ Website ka structure samajhne me help karta hai
✔ Hidden elements identify karne me useful
✔ Frontend manipulation samajhne me help karta hai
✔ Developer ki mistakes identify karne me help karta hai

Browser inspect tool me HTML ke saath CSS bhi dikhta hai, jaise:

Google Chrome

🔥 CSS Syntax

Basic syntax:

selector {
    property: value;
}

Example:

h1 {
    color: red;
}

👉 Iska matlab: sabhi h1 red color me ho jayenge.

🔥 CSS Use Karne Ke 3 Tarike

1️⃣ Inline CSS

Direct HTML tag ke andar:

<h1 style="color: blue;">Hello</h1>

2️⃣ Internal CSS

HTML file ke <head> ke andar:

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

3️⃣ External CSS (Best Method)

Ek alag file banate hain:

style.css

HTML me link karte hain:

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

style.css file:

h1 {
    color: purple;
}

👉 Real projects me external CSS use hota hai.

🔥 Important CSS Properties

🎨 1️⃣ Color

color: red;

background-color: yellow;

📏 2️⃣ Font Size

font-size: 20px;

🔠 3️⃣ Text Align

text-align: center;

📦 4️⃣ Margin & Padding

margin: 20px;
padding: 10px;

Margin → outside spacing
Padding → inside spacing

🔥 CSS Selectors

1️⃣ Element Selector

p {
    color: blue;
}

2️⃣ Class Selector

HTML:

<p class="text">Hello</p>

CSS:

.text {
    color: red;
}

3️⃣ ID Selector

HTML:

<p id="main">Hello</p>

CSS:

#main {
    color: green;
}

🧪 Practice Lab (Must Do)

Ek simple webpage banao:

<!DOCTYPE html>
<html>
<head>
<title>CSS Practice</title>
<style>
body {
    background-color: lightgray;
}

h1 {
    color: blue;
    text-align: center;
}

p {
    font-size: 18px;
    color: black;
}
</style>
</head>
<body>

<h1>Welcome Hacker</h1>
<p>I am learning CSS basics.</p>

</body>
</html>

Save karo → Browser me open karo.

🔎 Hacker Perspective

Inspect tool open karo (Right Click → Inspect)

Aap dekhoge:

HTML structure
CSS styling
Developer tools

Ye feature browsers me hota hai jaise: