CSS complete course in hindi
CSS का फुल फॉर्म “Cascading Style Sheet” है। कैस्केडिंग स्टाइल शीट का उपयोग वेब pages के लेआउट को स्टाइल करने के लिए किया जाता है। CSS का उपयोग वेबसाइट को सुंदर और आकर्षक बनाने में किया जाता है।CSS को W3C – (World Wide Web Consortium) द्वारा विकसित किया गया था। इसका पहला version 1996 में प्रकाशित किया गया था। इसका सबसे latest version CSS 4.15 दिसंबर 2020 प्रकाशित किया गया है।
CSS Syntax
CSS में coding करना HTML से बिलकुल अलग है और आसान भी है। CSS Syntax को CSS rules भी कहते हैं। CSS rule हमेशा selector से start होता है जिससे यह पता चलता है कि आप HTML के किस Element में CSS style apply करना चाहते हैं। आप नीचे CSS code का CSS Apply का नियम देख सकते हैं।
यहां पर h1 एक selector जिसके लिए CSS Apply करनी है। यहां पर h1 का color blue और text font size 12px (pixel) करना है इसलिये यहां पर color तथा font - size property हैं और blue तथा 12px value हैं।
उदाहरण :
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-size: 12px;
}
</style>
</head>
<body>
<h1>CSS Complete course in hindi</h1>
</body>
</html>Output :
किसी web page या website में CSS को तीन प्रकार लिख सकते हैं।
- External CSS
- Internal CSS
- Inline CSS
1. External CSS
External CSS द्वारा किसी अन्य वेबपेज पेज पर लिखे गए
CSS code को हम अपने HTML webpage से जोड़ सकते हैं। इसे html के head section में एक लिंक द्वारा जोड़ा जाता है। अब आपके मन में सवाल आ रहा होगा । (How to add external CSS in html) मतलब External CSS file को html webpage में कैसे जोड़ें ?
जैसे :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>यहां पर एक CSS stylesheet को <link> element द्वारा html webpage से जोड़ा गया है।
2. Internal CSS
Internal CSS को हम HTML webpage में ही लिख सकते हैं। इसको लिखने के लिए html के head section में <style> का उपयोग किया जाता है ।
जैसे :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>3. Inline CSS
Inline CSS का उपयोग html के element में ही "style" attribute उपयोग करके लिख सकते हैं।
जैसे :
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>यहां पर <h1> tag में ही "style" attribute का उपयोग करके CSS को लिखा गया है।
CSS Comments
CSS में comments का उपयोग code को समझने के लिए किया जाता है। html webpage में एक से अधिक headings, paragraphs आदि हो सकते हैं। html webpage को style करते समय कोन सी heading या paragraph कहां पर है याद रखने के लिए CSS में comments लिखे जाते हैं । CSS में comments को /* से शुरू तथा */ के बीच में लिख सकते हैं ।
जैसे :
/* यह एक Comment है */
p {
color: red;
}जो text comments में लिखा जाता है। वह text browser में दिखाई नहीं देता।
CSS Colors
CSS में Color Declare करने के लिए Color Property का इस्तेमाल किया जाता है। CSS द्वारा आप Foreground और Background दोनों के लिए Color Declare कर सकते हैं। यहां पर Foreground Color मतलब Font Color, Border Color, Outlines, Text Color आदि change कर सकते हैं। Background color मतलब किसी element के background का color change करना है।
मुख्य रूप CSS में color change करने के लिए तीन प्रकार color value का उपयोग किया जाता है।
- Color Value
- RGB Value
- Hex Value
Color Value
आप Color Value को Color Name से भी Declare कर सकते हैं। जो सबसे आसान तरीका है। लेकिन, आप सभी Colors को उनके नाम से Declare नहीं कर सकते, Color को उनके नाम से Declare करना सरल तो है। लेकिन Color Name को सभी ब्राउजर Support नहीं करते हैं। इसलिए इस विधि को ज्यादा इस्तेमाल नहीं किया जाता है।
जैसे :
<h3 style="color: red;">Hello I'm Maxon</h3>Output:
Hello I'm Maxon
RGB Value
RGB तीन शब्दों से बना है। जिसमें R का मतलब Red, G का मतलब Green और B का मतलब Blue होता है। RGB द्वारा Colors की RGB Value को लिखा जाता है। आप RGB Value को प्रतिशत में भी Declare कर सकते हैं। RGB द्वारा 0 से 255 के बीच में किसी Color की Intensity दर्शायी जाती है। आप जितनी ज्यादा Value किसी Color की Declare करेंगे वह Color उतना ही ज्यादा दिखाई देगा।
Hex Value
Hex की full form Hexadecimal होती है। Hexadecimal Code एक 6 अंकों का कोड होता है। जिसमें क्रमश: Red, Green और Blue Colors की Hex Value होती हैं। पहले दो अंक Red, मध्य के दो अंक Green और अंतिम दो अंक Blue को Represent करते हैं। Hexadecimal Value Alphanumeric होती है। जिसमें Alphabets और Numbers दोनों शामिल होते हैं।
जैसे :
RGB और Hex Color Value कहां से प्राप्त करें।
आप Colors की Hex Value और RGB Value बहुत सारे ऑनलाईन Color Mixers के द्वारा बना सकते हैं। आपको Color Mixer Tool मुफ्त में मिल जाएंगे। आप इनकी मदद से अपने लिए मन पसंद कलर बना सकते हैं।
अगर आपको यह पोस्ट 📑 पसंद आई हो तो अपने मित्रों के साथ जरूर शेयर करें। धन्यवाद !
Tags:
CSS
