What is CSS & how it works in hindi?
I am working as freelancer. I am a experienced full stack web developer. My lovely stack is MERN but I am open for new tech. I love to work with teammates for achieve goals. I love researches to find specific new things.
वह जो web development में कैरियर बनाना चाहते हैं न कि सिर्फ पैसा कमाना चाहते हैं, उन्हें css जरूर सीखनी चाहिए। क्योंकि यह अच्छी रंगोली बनाने जैसा है। अगर आपको इसमे दिलचस्पी है, तो इसे जरूर सीखें। यह आपके किसी रंगीन दुनिया की तरह है कि दुनिया आप जितनी रंगीन देखते हैं, उतनी ही रंगीन वेबसाइट भी बनाना चाहेंगे।
CSS क्या है?
Css, html के styles की एक सूची है। CSS का मतलब है Cascading Style Sheet, जिसका हिन्दी मतलब है- styles की बड़ी सी sheet। यह तय करता है कि वेब पेज या वेबसाइट का दिखावा कैसा होगा। यह <style> टैग के अंदर लिखी जाती है।
Why use CSS and its advantages?
किसी चीज का इस्तेमाल तभी किया जाता है जब उससे लाभ हो। जितनी अच्छी वेबसाइट की या web application की look होगी, उतनी ही उसकी पहुंच होगी यानी उतने ही users उसपर आएंगे और कंपनी उतनी ज्यादा कमाई करेगी। यह एक रंगोली बनाने जैसा है, जितना सुंदर रंगोली दिखेगी, उतनी ही ज्यादा लोग उसको देखना चाहेंगे।
CSS Html पेज में कैसे लगाएं?
Css को html पेज में implement करना तीन तरीकों से होता है-
Inline css
Internal css
External css
What is inline css in hindi?
Html फाइल बनाते समय जब हमें कहीं रंग, बैकग्राउंट रंग, बार्डर या फिर और दूसरे appearence बदलने होते हैं, तो फाइल में style लगानी होती है अलग से। यह किसी लाइन में जब लिखी जाती है, तो यह inline css कहलाती है। जैसे-
<p style="color:red">Hello duniya</p>
Advantages and disadvantages of inline css in Hindi:
Inline css उस लाइन के टैग की property बदल देती है, लेकिन फिर कहीं वही कोड प्रयोग करने के लिए फिर से कोड लिखना पड़ता है। यानि अगर सिर्फ एक ही लाइन में style की जरूरत है,तो inline css बेहतर है। लेकिन अगर कई जगह वहीं कोड लिखना है, तो यह ठीक नहीं होता। इसकी सबसे बड़ी उपलब्धि यह है कि उसी वेब पेज में होता है, तो इसे रखने के लिए अलग से किसी फाइल की जरूरत नहीं पड़ती है। और अगर कहीं Internal css भी लिखा गया है उसी टैग के लिए, तो inline css को first priorty मिलती है और उसी की style दिखती है।
What is Internal css in html?
Inline css के अलावा उसी फाइल में Internal css भी लिखी जा सकती है। यह <head> टैग के अंदर <style> टैग बनाकर लिखी जाती है। इसमें एक नयी चीज आ जाती है class और id । उदाहरण के लिए यदि हमें पैराग्राफ टैग में style लगानी है internal css से, तो
<html>
<head>
<title> Document</title>
<style>
.para
{
color:red;
}
</head>
<body>
<p class="para">hello duniya</p>
</body>
</html>
लिखा जाता है।
Advantages and disadvantages of Internal CSS
इसे कई लाइनों में class के द्वारा आसानी से लगाया जा सकता है। इसकी सबसे बड़ी विशेषता यह है कि यह उसी फाइल में लिखी होती है, बाहर कहीं फाइल बनाने की जरूरत नहीं होती है। यह एक छोटे html फाइल में आसानी से फिट हो जाती है, लेकिन अगर बड़ी फाइल बनानी है html की तो यह काफी दिक्कत वाली हो जाती है। उसी फाइल में होने की वजह से इसके को ड आसानी से लोड हो जाते हैं।
What is External CSS?&How it works?
External css जैसा कि इसके नाम से ही स्पष्ट है कि यह एक बाहरी फाइल बनेगी। इसकी फाइल को stylesheet भी कहते हैं। इसे html फाइल के अतिरिक्त एक दूसरी .css वाली extension फाइल में बनानी पड़ती है। और फिर इसे मेन html फाइल से लिंक कराया जाता है। जैसे मान लीजिए दो फाइल हैं एक html की मेन फाइल index.html और दूसरी css की style.css है। नाम बदला जा सकता है, यहां समझाने के लिए सिर्फ है। तो मेन फाइल में इस तरह लिंक बनाई जाती है-
<html>
<head>
<title> Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="para">hello duniya</p>
</body>
</html>
इसके अलावा style.css फाइल में इस तरह से लिखा जाता है-
.para
{
color:red;
}
और पैराग्राफ का कलर लाल हो जाता है। उसमे लाल अक्षर दिखते हैं।
Advantages and disadvantages of external CSS
External css फाइल कई सारे html फाइल के साथ आसानी से काम कर सकती है, लेकिन अगर html की एक दो छोटी फाइल है, तो इसे बनाना ठीक नहीं है। यह अलग से फाइल बनती है, कभी-कभी ऐसा होता है कि html फाइल के लोड होते समय यह फाइल नहीं मिलती, तो सारी style गायब हो जाती है। अतः इस फाइल को मेन फाइल के साथ ही होना चाहिए।
Specificity in CSS:
CSS में specificity का काफी महत्व है। यह तय करता है कि दी गई कई style में से कौन सी style उस टैग एलीमेंट पर apply होगी। सबसे ज्यादा specificity inline css की होती है। उसके बाद internal css की और सबसे बाद में external css होती है। इसके अलावा id और class में id की specificity ज्यादा होती है। इसका मतलब यह है कि id और class दोनो लिखे होने पर id की स्टाइल अप्लाई होगी।
