CSS Basics

🎨 CSS Kya Hai?

Hindi

CSS ka full form Cascading Style Sheets hai. CSS ka use HTML webpage ko design aur style karne ke liye hota hai.

CSS se hum color, font, size, spacing, background, border aur layout change kar sakte hain.

English

CSS stands for Cascading Style Sheets. It is used to style and design HTML webpages.

CSS can change colors, fonts, sizes, spacing, backgrounds, borders and layouts.

💡 CSS Ki Zarurat Kyu Hai?

Hindi

Sirf HTML se webpage ka basic structure banaya ja sakta hai, lekin CSS ki help se webpage ko professional aur attractive design diya ja sakta hai.

English

HTML creates the structure of a webpage, while CSS helps make that webpage attractive, organized and professional.

✏️ Inline CSS

Hindi

Inline CSS directly HTML element ke andar style attribute ke through likhi jati hai.

<h1 style="color:blue;">
    My Website
</h1>

English

Inline CSS is written directly inside an HTML element using the style attribute.

📄 Internal CSS

Hindi

Internal CSS ko HTML file ke <style> tag ke andar likha jata hai.

<style>

h1{
    color:blue;
}

p{
    color:gray;
}

</style>

English

Internal CSS is written inside the <style> element in the HTML file.

📁 External CSS

Hindi

External CSS ek separate .css file mein likhi jati hai. Phir us CSS file ko HTML page se connect kiya jata hai.

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

Example:

style.css

h1{
    color:blue;
}

English

External CSS is stored in a separate CSS file and connected to the HTML document.

🌈 Text Color Change Karna

Hindi

CSS mein color property ka use text ka color change karne ke liye hota hai.

h1{
    color:blue;
}

p{
    color:green;
}

English

The color property changes the color of text.

🖌️ Background Color

Hindi

background-color property se element ka background color change kiya ja sakta hai.

body{
    background-color:#f5f7fa;
}

h1{
    background-color:black;
}

English

The background-color property changes the background color of an element.

🔠 Font Size

Hindi

font-size property se text ka size change kiya jata hai.

h1{
    font-size:40px;
}

p{
    font-size:16px;
}

English

The font-size property changes the size of text.

⬜ Border

Hindi

border property ka use kisi element ke around border lagane ke liye kiya jata hai.

.card{
    border:1px solid #ddd;
}

English

The border property adds a border around an element.

💻 Complete Example

Hindi

HTML aur CSS ko ek saath use karke simple webpage:

<!DOCTYPE html>

<html>

<head>

    <title>My Website</title>

    <style>

        body{
            background:#f5f7fa;
        }

        h1{
            color:#008bb0;
            font-size:35px;
        }

        p{
            color:#475569;
            font-size:16px;
        }

    </style>

</head>

<body>

    <h1>My Website</h1>

    <p>
        Welcome to my website.
    </p>

</body>

</html>

English

This example uses CSS to change the webpage background, heading color, heading size and paragraph text size.