CSS के कितने parts होते हैं?

CSS के मुख्य parts हैं Syntax, Selector, Property और Value।

CSS क्यों जरूरी है?

CSS वेबसाइट को attractive और responsive बनाता है।

27 Apr

Basic CSS Parts क्या हैं?

Q: CSS क्या है?

CSS एक styling language है जो HTML को design करने के लिए उपयोग होती है।

CSS (Cascading Style Sheets) वेब डिजाइनिंग का एक महत्वपूर्ण हिस्सा है, जिसका उपयोग HTML elements को सुंदर और आकर्षक बनाने के लिए किया जाता है। यदि HTML वेबसाइट का ढांचा है, तो CSS उसकी सजावट (Design) है।

इस लेख में हम CSS के सभी Basic Parts को विस्तार से समझेंगे ताकि आप आसानी से एक professional वेबसाइट डिजाइन कर सकें।

CSS क्या है? (What is CSS?)

CSS एक styling language है जिसका उपयोग HTML elements के रंग, आकार, spacing, layout आदि को नियंत्रित करने के लिए किया जाता है।

मुख्य उपयोग:

Text का रंग बदलना
Background सेट करना
Layout बनाना
Responsive design बनाना

Basic CSS Parts क्या होते हैं?

CSS के मुख्य भाग निम्नलिखित हैं:

Ordered List (CSS Parts):

CSS Syntax
CSS Selector
CSS Properties
CSS Values
CSS Comments
CSS Units
CSS Colors
CSS Box Model
CSS Display
CSS Position

1. CSS Syntax (CSS का ढांचा)

CSS का basic structure कुछ इस प्रकार होता है:

selector {
property: value;
}

Explanation:

Selector → HTML element को select करता है
Property → क्या बदलना है
Value → कैसे बदलना है

Example:

p {
color: red;
}

2. CSS Selector (CSS Selector क्या होता है?)

Selector HTML element को target करता है।

Types of Selectors:

Unordered List:

Element Selector
Class Selector
ID Selector
Universal Selector
Group Selector

Examples:

p { color: blue; } /* Element Selector */
.classname { color: red; } /* Class Selector */
#idname { color: green; } /* ID Selector */
* { margin: 0; } /* Universal Selector */
h1, p { color: black; } /* Group Selector */

3. CSS Properties (CSS Properties क्या हैं?)

Properties बताते हैं कि आप क्या बदलना चाहते हैं।

Common Properties:

Unordered List:

color
background-color
font-size
margin
padding
border

Example:

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

4. CSS Values (CSS Values क्या हैं?)

Values बताते हैं कि property को क्या value देनी है।

Examples:

color: red;
font-size: 20px;
width: 100%;

5. CSS Comments (Comments क्या हैं?)

Comments code को समझाने के लिए होते हैं।

/* यह एक comment है */
p {
color: black;
}

6. CSS Units (Units क्या होते हैं?)

Units size define करने के लिए इस्तेमाल होते हैं।

Types of Units:

Ordered List:

px (pixels)
% (percentage)
em
rem
vw
vh

Example:

div {
width: 100%;
height: 50vh;
}

7. CSS Colors (Colors कैसे इस्तेमाल करें?)

CSS में colors को कई तरीकों से define किया जा सकता है।

Types:

Unordered List:

Color Name (red, blue)
HEX (#ff0000)
RGB (rgb(255,0,0))
RGBA

8. CSS Box Model (Box Model क्या है?)

Box Model हर element के चारों तरफ space define करता है।

Parts of Box Model:

Ordered List:

Content
Padding
Border
Margin

Example:

div {
padding: 10px;
border: 1px solid black;
margin: 20px;
}

9. CSS Display Property

Display property element के behavior को control करता है।

Types:

Unordered List:

block
inline
inline-block
none

10. CSS Position Property

Position property element की position को define करती है।

Types:

Ordered List:

static
relative
absolute
fixed
sticky

CSS का उपयोग कैसे करें? (Ways to Apply CSS)

Types of CSS:

Ordered List:

Inline CSS
Internal CSS
External CSS

Example:

<p style="color:red;">Text</p>


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


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

Best Practices (CSS Best Practices)

Unordered List:

Clean और readable code लिखें
Class का उपयोग ज्यादा करें
Inline CSS avoid करें
External CSS file use करें
Responsive design बनाएं

Practice Section (Practice Questions)

Basic Practice:

Ordered List:

एक paragraph का color red करें
एक div को center में रखें
background color बदलें
margin और padding apply करें

Advanced Practice:

Unordered List:

Flexbox layout बनाएं
Navigation bar design करें
Responsive webpage बनाएं
Grid system implement करें

Example Project (Mini Practice)

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial;
}
.container {
width: 80%;
margin: auto;
}
h1 {
color: blue;
}
p {
color: gray;
}
</style>
</head>
<body>

<div class="container">
<h1>My Website</h1>
<p>This is a paragraph.</p>
</div>

</body>
</html>

Common Mistakes (गलतियां जो beginners करते हैं)

Unordered List:

Semicolon भूल जाना
Selector गलत लिखना
Units नहीं देना
गलत property use करना

Conclusion (निष्कर्ष)

Basic CSS Parts को समझना वेब डेवलपमेंट की पहली और सबसे महत्वपूर्ण सीढ़ी है। यदि आप CSS के syntax, selector, properties और layout को अच्छी तरह समझ लेते हैं, तो आप किसी भी वेबसाइट को सुंदर और professional बना सकते हैं।