HTML Styles और CSS क्या है? वेब डिज़ाइनिंग की पूरी जानकारी?(Beginner to Advanced)

यह वेब डिज़ाइनिंग की एक संपूर्ण और त्वरित संदर्भ गाइड (Quick Reference Guide) है, जिसमें 1 से 40 तक के सभी कोर टॉपिक्स की सटीक वन-लाइनर जानकारी और कोडिंग उदाहरण शामिल हैं।

➜ [यहाँ आप बेहतर तरीक़े से सीखेंगे की कैसे उपयोग किया जाता है इन सभी को और इनका उपयोग करके आप बेहतर कोडर बन सकेगा|

1. परिचय (Introduction)

HTML क्या है? HTML एक मार्कअप लैंग्वेज है जो किसी भी वेबपेज का बुनियादी ढांचा (Structure) तैयार करती है।
CSS क्या है? CSS एक स्टाइल शीट लैंग्वेज है जो HTML एलिमेंट्स को रंग, रूप, फोंट और सुंदर लेआउट (Presentation) प्रदान करती है।
HTML और CSS में अंतर: HTML वेबपेज की सामग्री या कंकाल बनाता है, जबकि CSS उस सामग्री को सुंदर और आकर्षक डिज़ाइन देती है।
CSS क्यों आवश्यक है? बिना CSS के वेबसाइट्स बदसूरत और साधारण टेक्स्ट जैसी दिखेंगी, जिससे यूज़र एक्सपीरियंस पूरी तरह खत्म हो जाएगा।

➜ [यह ऐसो होता है जैसे आप एक थाली में बहुत सारे पकवान को रख दिए हैं और किसी व्यक्ति को दे दिए हैं और एक दूसरे थाली में सभी पकवान को अलग अलग कटोरी में रखकर उसी थाली में रखकर दे रहे हैं दोनों में से कौन से आपको पसंद है जो बेहतर लगेगा उसमें css उपयोग किया गया है और जो कम बेहतर लगेगा वह सिर्फ़ html इससे बना है

2. HTML Style Attribute क्या है?

style Attribute क्या है? यह HTML का एक विशेष एट्रिब्यूट है जिसका उपयोग किसी एक विशिष्ट एलिमेंट पर सीधे स्टाइलिंग लागू करने के लिए किया जाता है।
Syntax: इसका सिंटैक्स <tag style="property: value;"> होता है।
Inline CSS क्या है? जब हम बिना बाहरी फाइल के सीधे HTML टैग के अंदर स्टाइल एट्रिब्यूट लिखकर डिज़ाइन बदलते हैं, तो उसे इनलाइन सीएसएस कहते हैं।
उदाहरण: <h2 style="color: blue;">नीला हेडिंग</h2>

3. CSS क्या है? (Deep Dive)

CSS की Full Form: CSS का पूरा नाम Cascading Style Sheets होता है।
CSS कैसे काम करती है? ब्राउज़र HTML डॉक्यूमेंट को लोड करने के बाद उस पर लिखे गए CSS नियमों को लागू करके स्क्रीन पर रेंडर करता है।
CSS का इतिहास: इसे वेबपेजेस को कस्टमाइज़ करने के लिए W3C द्वारा पहली बार वर्ष 1996 में आधिकारिक रूप से लॉन्च किया गया था।
CSS के फायदे: यह एक ही कोड को बार-बार लिखने से बचाती है, वेबसाइट की लोडिंग स्पीड बढ़ाती है और पूरी साइट का डिज़ाइन एक जगह से बदलना संभव करती है।

➜ 19में प्रारंभ हुआ और उतना अच्छा दिखने में नहीं लग रहा था जिसे 20वे और विकास किया गया और इस समय कि 21वे में यह पूर्णता अलग अलग भाषा और अलग अलग तरीक़े से उपयोग किया जाने लगा||

4. CSS लगाने के 3 तरीके

Inline CSS: सीधे HTML टैग के भीतर style एट्रिब्यूट का उपयोग करके कोडिंग करना; जैसे- <p style="color: red;">।
Internal CSS (<style>): हेड सेक्शन में <style> टैग का उपयोग करके केवल एक सिंगल वेबपेज के लिए कोडिंग करना।
External CSS (style.css): सभी स्टाइल्स को एक अलग .css फाइल में सुरक्षित रखकर उसे HTML हेड में <link> टैग से जोड़ना।
तीनों में अंतर: इनलाइन की प्राथमिकता सबसे अधिक होती है, इंटरनल सिंगल पेज को संभालता है, और एक्सटर्नल पूरी वेबसाइट को एक साथ कंट्रोल करता है।

5. CSS Syntax और संरचना

Selector: वह HTML एलिमेंट या टैग जिसे आप स्टाइल या टारगेट करना चाहते हैं; जैसे- h1 या p।
Property: वह विजुअल विशेषता जिसे आप बदलना चाहते हैं; जैसे- color, font-size या background।
Value: चुनी गई प्रॉपर्टी को दिया जाने वाला वास्तविक मान या वैल्यू; जैसे- red, 20px या center।
Declaration: प्रॉपर्टी और वैल्यू के सम्मिलित जोड़े को डिक्लेरेशन कहते हैं; जैसे- color: blue;।
Ruleset: सेलेक्टर और कर्ली ब्रैकेट्स के अंदर लिखे गए सभी डिक्लेरेशन्स के पूरे समूह को रूल्सट कहते हैं; जैसे- h1 { color: red; }।

6. CSS Selectors (टारगेटिंग तकनीक)

Element Selector: सीधे HTML टैग का नाम लिखकर उस श्रेणी के सभी एलिमेंट्स को स्टाइल करना; जैसे- p { color: green; }।
Class Selector: डॉट (.) लगाकर किसी विशिष्ट क्लास वाले मल्टीपल एलिमेंट्स को टारगेट करना; जैसे- .my-card { padding: 10px; }।
ID Selector: हैश (#) लगाकर पूरे पेज पर मौजूद केवल एक यूनिक एलिमेंट को टारगेट करना; जैसे- #main-banner { width: 100%; }।
Universal Selector: एस्टरिस्क (*) का उपयोग करके पूरे वेबपेज के सभी एलिमेंट्स पर एक साथ नियम लागू करना; जैसे- * { margin: 0; }।
Group Selector: कॉमा (,) लगाकर कई अलग-अलग सिलेक्टर्स को एक ही कोड ब्लॉक से स्टाइल देना; जैसे- h1, h2, p { text-align: center; }।
Attribute Selector: किसी एलिमेंट को उसके एट्रिब्यूट या उसकी वैल्यू के आधार पर टारगेट करना; जैसे- input[type="text"] { border: 1px solid; }।

➜ [जब मैं कैलकुलेटर माना रहा था तो उसके सभी बटन को अलग अलग रंगों में देने के लिए मैंने इसका उपयोग किया था और उनके बटन के और बटन को कहा किस प्रकार से कितना बड़ा कितना होता और किस बटन को कहा रखना है इसके बारे में हम उपयोग करने के लिए इसी उपयोग किया था]

7. Colors (वेब कलर कोड्स)

Color Name: रंगों को सीधे उनके अंग्रेजी नामों से प्रदर्शित करना; जैसे- color: red; या color: blue;।
HEX: हैश (#) के साथ 6 अंकों के हेक्साडेसिमल कोड का उपयोग करना; जैसे शुद्ध लाल के लिए color: #ff0000;।
RGB: रेड, ग्रीन और ब्लू के मिश्रण (0-255) से रंग बनाना; जैसे नीले रंग के लिए color: rgb(0, 0, 255);।
RGBA: आरजीबी के साथ 'Alpha' जोड़कर रंग की ट्रांसपेरेंसी (धुंधलापन) कंट्रोल करना; जैसे- color: rgba(0, 0, 255, 0.5);।
HSL: ह्यू, सैचुरेशन और लाइटनेस प्रतिशत के आधार पर रंग तय करना; जैसे- color: hsl(0, 100%, 50%);।
HSLA: एचएसएल के साथ अल्फा वैल्यू जोड़कर उसकी पारदर्शिता को 0 से 1 के बीच सेट करना; जैसे- color: hsla(0, 100%, 50%, 0.3);।

8. Background (पृष्ठभूमि नियंत्रण)

background-color: वेबपेज या किसी विशिष्ट बॉक्स के बैकग्राउंड का रंग बदलता है; जैसे- background-color: yellow;।
background-image: बैकग्राउंड में कोई सुंदर इमेज या वॉलपेपर सेट करता है; जैसे- background-image: url('bg.png');।
background-repeat: बैकग्राउंड इमेज को बार-बार रिपीट होने से रोकता है; जैसे- background-repeat: no-repeat;।
background-size: इमेज का आकार तय करता है, पूरी स्क्रीन पर फिट करने के लिए background-size: cover; बेस्ट है।
background-position: बैकग्राउंड इमेज का शुरुआती स्थान अलाइन करता है; जैसे स्क्रीन के बीच के लिए background-position: center;।
background-attachment: यह तय करता है कि इमेज पेज के साथ स्क्रॉल होगी या एक जगह फिक्स रहेगी; जैसे- background-attachment: fixed;।

9. Text Styling (Typography Control)

color: अक्षरों या टेक्स्ट का रंग बदलता है; जैसे- color: #333;।
font-family: टेक्स्ट का फॉन्ट स्टाइल या लिखावट का प्रकार बदलता है; जैसे- font-family: Arial, sans-serif;।
font-size: अक्षरों के आकार को छोटा या बड़ा करता है; जैसे- font-size: 16px;।
font-weight: अक्षरों का गाढ़ापन या मोटाई तय करता है; जैसे बोल्ड लुक के लिए font-weight: bold;।
font-style: टेक्स्ट को तिरछा लुक देने के लिए उपयोग होता है; जैसे- font-style: italic;।
text-align: टेक्स्ट का अलाइनमेंट सेट करता है; जैसे अक्षरों को बीच में लाने के लिए text-align: center;।
text-decoration: टेक्स्ट के नीचे से अंडरलाइन हटाने या लगाने के लिए उपयोग होता है; जैसे- text-decoration: none;।
text-transform: अक्षरों को बड़े (Capital) या छोटे केस में ऑटो-कन्वर्ट करता है; जैसे- text-transform: uppercase;।
line-height: किसी पैराग्राफ की दो लाइनों के बीच की वर्टिकल दूरी तय करता है; जैसे- line-height: 1.6;।
letter-spacing: टेक्स्ट के दो व्यक्तिगत अक्षरों के बीच की खाली दूरी को बढ़ाता है; जैसे- letter-spacing: 2px;।
word-spacing: वाक्य में दो अलग-अलग शब्दों के बीच के स्पेस को मैनेज करता है; जैसे- word-spacing: 5px;।
text-shadow: अक्षरों के पीछे सुंदर परछाई या रिफ्लेक्शन प्रभाव डालता है; जैसे- text-shadow: 2px 2px #ccc;।

➜ [देखो जिस प्रकार तस्वीर देखते हैं तो अच्छा महसूस होता है वैसे टेक्स्ट के साथ अलग कर सकते हैं छाया बनाते हैं और कुछ जगह देते हैं चौड़ाई और गहराई और लंबाई इत्यादि टेक्स्ट के ट्रांसप्रेंट वह कहाँ रहेगा बीच, बायीं और उसका आकृति कैसा दिखेगा बनाते हैं

10. Borders (किनारे की रेखाएं)

border: एलिमेंट के चारों तरफ बॉर्डर लगाने का शॉर्टहैंड नियम है; जैसे- border: 2px solid red;।
border-width: बॉर्डर की रेखा की मोटाई या थिकनेस को सेट करता है; जैसे- border-width: 4px;।
border-style: बॉर्डर की रेखा का प्रकार तय करता है; जैसे- border-style: dashed; (बिंदुवार रेखा)।
border-color: बॉर्डर की बाहरी रेखा का रंग बदलता है; जैसे- border-color: green;।
border-radius: बॉक्स के तीखे कोनों को गोल या राउंड शेप देता है; जैसे- border-radius: 8px;।

11. Margin (बाहरी खाली जगह)

Margin क्या है? यह एलिमेंट के बॉर्डर के बाहर की वह खाली जगह है जो दो बॉक्स को आपस में चिपकने से दूर रखती है।
चारों दिशाओं की Margin: आप margin-top, margin-right, margin-bottom, और margin-left से चारों तरफ का स्पेस अलग-अलग सेट कर सकते हैं।

12. Padding (आंतरिक खाली जगह)

Padding क्या है? यह एलिमेंट के मुख्य कंटेंट और उसकी बाहरी बॉर्डर के बीच की अंदरूनी खाली जगह (Inner Space) होती है।
Padding और Margin में अंतर: पैडिंग बॉर्डर के अंदर खाली जगह बढ़ाती है, जबकि मार्जिन बॉर्डर के बाहर स्पेस बनाता है।

➜ [जब हम फोटो बनाते हैं तो फोटो के चारों तरफ़ एक सर्किल कर देते हैं वह सर्किल करते समय यह ध्यान देते हैं की उसे और व्यक्ति जो अंदर है कितनी दूरी होनी चाहिए यहाँ तक की उसके बाहरी ख़ाली जगह जो मार्जिन कहा जाता है उसे भी ध्यान देते हैं तो इस तरह टेक्स्ट में भी जगह देते हैं और दूसरे टेक्स्ट या तस्वीर या बाहरी किसी आवरण से आगे पीछे बीच में अपनी डिज़ाइन के मुताबिक़ होते हैं यही प्रयोग होता हैं.

13. Width और Height (इकाइयाँ)

px: एक फिक्स्ड पिक्सेल साइज है जो हर स्क्रीन पर एक समान रहता है; जैसे- width: 300px;।
%: अपने पैरेंट कंटेनर के कुल आकार के सापेक्ष प्रतिशत में काम करता है; जैसे- width: 50%;।
rem: रूट एलिमेंट (html) के डिफ़ॉल्ट फॉन्ट साइज के सापेक्ष स्केलेबल साइज तय करता है।
em: अपने तुरंत पैरेंट एलिमेंट के फॉन्ट साइज के सापेक्ष आकार की गणना करता है।
vw: पूरी स्क्रीन की कुल चौड़ाई (Viewport Width) के प्रतिशत पर काम करता है; जैसे- width: 100vw;।
vh: पूरी स्क्रीन की कुल ऊंचाई (Viewport Height) के प्रतिशत पर काम करता है; जैसे- height: 100vh;।

➜ [रिस्पॉन्सिव डिज़ाइन में vw और vh का उपयोग वेब पेज के मोबाइल टेबलेट लैपटॉप में खुलने पर कितना जगह ख़ाली कितना जगह ज़्यादा उसके मुताबिक़ से इसका उपयोग कर देते हैं]

14. CSS Units (मापन संदर्भ)

सीएसएस में px (फिक्स्ड), em/rem (फॉन्ट सापेक्ष), % (प्रतिशत), vh/vw (स्क्रीन सापेक्ष) के अलावा ch (अक्षर चौड़ाई), cm/mm (सेंटीमीटर/मिलीमीटर), in (इंच), और pt (पॉइंट्स) जैसी प्रिंट और डिजिटल इकाइयाँ शामिल हैं।

➜ [यूनिट्स के उपयोग से जुड़ा देखो हम वेब पेज के डिज़ाइन करते समय ध्यान रखते हैं. किसी टेबल के डिज़ाइन जिसमें पिक्सेल प्रयोग करते हैं और किसी वेबपेज के अंदर किसी बॉक्स से दूसरे बॉक्स में सभी चीज़ों को प्रयोग कर सकते हैं.

15. Display Property (व्यवहार नियंत्रण)

block: पूरी चौड़ाई घेरता है और हमेशा नई लाइन से शुरू होता है; जैसे- display: block; (<div> टैग)।
inline: केवल उतनी ही जगह लेता है जितनी कंटेंट को ज़रूरत हो और लाइन नहीं बदलता; जैसे- <span> टैग।
inline-block: लाइन में बना रहता है पर इस पर विड्थ, हाइट, मार्जिन Strain और पैडिंग पूरी तरह काम करते हैं।
none: एलिमेंट को वेबपेज से पूरी तरह गायब कर देता है और वह पेज पर अपनी जगह भी नहीं घेरता।
flex: यह वन-डायमेंशनल लेआउट अलाइनमेंट सिस्टम को तुरंत चालू कर देता है।
grid: यह जटिल टू-डायमेंशनल (रो और कॉलम) लेआउट ग्रिड सिस्टम को सक्षम करता है।

➜ [डिस्प्ले (Display) प्रॉपर्टी बदलने से किसी HTML एलिमेंट का लेआउट और दिखने का तरीका बदल जाता है। इससे यह तय होता है कि एलिमेंट block, inline, inline-block या none के रूप में दिखाई देगा]

16. Position Property (स्थान नियंत्रण)

static: यह डिफ़ॉल्ट पोजीशन है जो वेबपेज के सामान्य फ्लो के अनुसार एलिमेंट्स को व्यवस्थित रखती है।
relative: एलिमेंट अपनी सामान्य जगह के सापेक्ष टॉप, बॉटम, लेफ्ट या राइट खिसक सकता है।
absolute: एलिमेंट अपने करीबी पोजीशन वाले पैरेंट कंटेनर के सापेक्ष स्वतंत्र रूप से कहीं भी मूव कर सकता है।
fixed: एलिमेंट स्क्रीन के एक निश्चित स्थान पर चिपक जाता है और स्क्रॉल करने पर भी नहीं हिलता।
sticky: स्क्रॉल करते समय एक तय सीमा पर पहुँचकर एलिमेंट स्क्रीन पर फिक्स या स्टिकी हो जाता है।

➜ [Relative अपनी मूल (Original) जगह के अनुसार चलता है, जबकि Absolute अपने सबसे नज़दीकी position: relative वाले पैरेंट के अनुसार स्थान लेता है।

ट्रिक: "Relative = Parent, Absolute = Child" — यानी पैरेंट पर position: relative; और उसके अंदर वाले एलिमेंट पर position: absolute; लगाएँ।

17. Float और Clear

float: left/right; एलिमेंट को दायीं या बायीं ओर खिसकाकर टेक्स्ट को उसके चारों ओर लपेटता है, और इसके बिगड़े फ्लो को ठीक करने के लिए नीचे वाले बॉक्स पर clear: both; लगाया जाता है.

➜ [आज के समय में CSS Flexbox और CSS Grid का प्रयोग float की जगह लेआउट बनाने के लिए किया जाता है, क्योंकि ये अधिक आसान, आधुनिक और Responsive हैं।]

18. CSS Flexbox (1D Layout System)

Flex Container: वह मुख्य पैरेंट बॉक्स जिस पर display: flex; लगाकर फ्लेक्सबॉक्स एक्टिव किया जाता है।
Flex Item: फ्लेक्स कंटेनर के अंदर मौजूद वे सभी चाइल्ड एलिमेंट्स जो ऑटो-अलाइन होते हैं।
justify-content: फ्लेक्स आइटम्स को हॉरिजॉन्टल (क्षितिज) रूप से अलाइन करता है; जैसे- justify-content: space-between;।
align-items: फ्लेक्स आइटम्स को वर्टिकल (लंबवत) रूप से एक सीध में लाता है; जैसे- align-items: center;।
gap: फ्लेक्स या ग्रिड आइटम्स के बीच की आपसी खाली दूरी को सेट करता है; जैसे- gap: 15px;।
flex-wrap: स्क्रीन छोटी होने पर आइटम्स को सिकुड़ने के बजाय ऑटोमैटिक अगली लाइन में भेजता है; जैसे- flex-wrap: wrap;।

➜ [Flexbox में display: flex; लगाने के बाद justify-content और align-items की मदद से एलिमेंट्स को आसानी से बीच में (Center) या किसी भी दिशा में व्यवस्थित किया जा सकता है।

टिप: पहले display: flex; लगाएँ, फिर justify-content और align-items का अभ्यास करें।]

19. CSS Grid (2D Layout System)

Rows: ग्रिड लेआउट के अंदर बनने वाली आड़ी या क्षैतिज लाइनें (हॉरिजॉन्टल ब्लॉक्स)।
Columns: ग्रिड लेआउट के खड़े या लंबवत हिस्से; जैसे- grid-template-columns: repeat(3, 1fr);।
Grid Gap: ग्रिड के रो और कॉलम्स के बीच का आपसी खाली स्पेस या दूरी।
Grid Area: ग्रिड के अंदर किसी विशिष्ट आइटम को नाम देकर उसका लेआउट क्षेत्र निर्धारित करने की तकनीक।

➜ [CSS Grid की मदद से पंक्तियों (Rows) और स्तंभों (Columns) का उपयोग करके जटिल (Complex) और Responsive लेआउट आसानी से बनाया जा सकता है। यह वेब पेज के विभिन्न सेक्शनों को व्यवस्थित करने के लिए सबसे शक्तिशाली CSS तकनीकों में से एक है।]

20. Box Model Architecture

सीएसएस बॉक्स मॉडल के अनुसार हर एलिमेंट चार परतों से घिरा होता है जिसका क्रम अंदर से बाहर की ओर क्रमशः: Content ➜ Padding ➜ Border ➜ Margin होता है।

➜ [CSS Box Model में हर एलिमेंट Content, Padding, Border और Margin से मिलकर बना होता है।

टिप: box-sizing: border-box; का उपयोग करने से चौड़ाई (Width) और ऊँचाई (Height) को नियंत्रित करना आसान हो जाता है।]

21. Overflow (कंटेंट का बाहर बहना)

hidden: बॉक्स के साइज से बाहर निकले हुए अतिरिक्त कंटेंट को काटकर पूरी तरह छुपा देता है।
auto: केवल तभी स्क्रॉल बार दिखाता है जब कंटेंट बॉक्स के साइज से बड़ा हो जाता है।
scroll: बॉक्स के चारों तरफ हमेशा के लिए स्क्रॉल बार जोड़ देता है, चाहे कंटेंट छोटा हो या बड़ा।
visible: डिफ़ॉल्ट वैल्यू, जिसमें बाहर निकला कंटेंट बॉक्स के बाहर साफ दिखाई देता है।

➜ [overflow: hidden; का उपयोग करने से अतिरिक्त (Extra) कंटेंट एलिमेंट के बाहर दिखाई नहीं देता, जिससे लेआउट साफ़ और व्यवस्थित रहता है।

यह अनचाहे स्क्रॉलबार और बाहर निकले हुए कंटेंट को छिपाने के लिए उपयोगी है।]

22. Z-index (परतों का क्रम)

यह प्रॉपर्टी तय करती है कि ओवरलैप होने वाले एलिमेंट्स में से कौन सा बॉक्स स्क्रीन पर ऊपर दिखेगा और कौन सा नीचे (उदा: z-index: 10;)।

➜ [z-index का उपयोग position: relative, absolute, fixed या sticky के साथ किया जाता है ताकि कोई एलिमेंट अन्य एलिमेंट्स के ऊपर दिखाई दे।

पॉपअप या Sticky Header के लिए अधिक z-index (जैसे z-index: 1000;) देने से वह हमेशा सबसे ऊपर दिखाई देता है।]

23. Opacity (पारदर्शिता)

यह किसी भी एलिमेंट या इमेज के धुंधलेपन या पारदर्शिता को 0.0 (अदृश्य) से 1.0 (ठोस) के बीच सेट करती है; जैसे- opacity: 0.7;।

➜ [opacity पूरे एलिमेंट (टेक्स्ट, इमेज और बैकग्राउंड) को पारदर्शी बनाता है, जबकि rgba() केवल बैकग्राउंड का रंग पारदर्शी करता है और टेक्स्ट पर असर नहीं पड़ता।

24. Cursor (माउस पॉइंटर स्टाइल)

यह एलिमेंट पर माउस ले जाने पर कर्सर का लुक बदलती है, जैसे लिंक के लिए cursor: pointer; (हाथ का निशान)।

➜ [कस्टम इमेज कर्सर लगाने का कोड

body {

cursor: url("cursor.png"), auto;

}

]

25. Box Shadow (बॉक्स की परछाई)

यह किसी भी चौकोर बॉक्स या कार्ड के पीछे सुंदर 3D शैडो इफ़ेक्ट जोड़ती है; जैसे- box-shadow: 5px 5px 10px rgba(0,0,0,0.1);।

➜ [box-shadow या text-shadow का उपयोग करके ग्लोइंग (Glow) इफ़ेक्ट बनाया जाता है।

उदाहरण: box-shadow: 0 0 15px #00f; — इससे एलिमेंट के चारों ओर नीली चमक दिखाई देती है।]

26. Text Shadow (अक्षरों की परछाई)

यह हेडिंग्स या पैराग्राफ के व्यक्तिगत अक्षरों के पीछे छाया का प्रभाव डालती है; जैसे- text-shadow: 2px 2px black;।

➜ [

h1 {

color: #fff;

text-shadow:

1px 1px 0 #999,

2px 2px 0 #777,

3px 3px 5px rgba(0, 0, 0, 0.5);

}

टिप: कई text-shadow लेयर जोड़ने से टेक्स्ट पर 3D जैसा प्रभाव बनता है।

27. Transform (रूपांतरण तकनीक)

rotate(): एलिमेंट को किसी निश्चित कोण पर क्लॉकवाइज़ या एंटी-क्लॉकवाइज़ घुमाना; जैसे- transform: rotate(45deg);।
scale(): एलिमेंट के मूल आकार को छोटा या बड़ा (ज़ूम) करना; जैसे दुगना करने के लिए- transform: scale(2);।
translate(): एलिमेंट को उसकी मूल पोजीशन से X या Y एक्सिस पर खिसकाना; जैसे- transform: translate(20px, 10px);।
skew(): एलिमेंट के कोनों को खींचकर उसे स्क्रीन पर तिरछा या टेढ़ा प्रदर्शित करना; जैसे- transform: skew(15deg);।

➜ [transform का उपयोग बटन पर hover होने पर scale(), translate() या rotate() इफ़ेक्ट देने के लिए किया जाता है, जिससे बटन अधिक आकर्षक और इंटरैक्टिव दिखता है।

उदाहरण: transform: scale(1.1); से बटन थोड़ा बड़ा दिखाई देता है।

28. Transition (स्मूथ इफ़ेक्ट)

यह सीएसएस प्रॉपर्टीज में होने वाले बदलावों को झटके के बजाय एक निश्चित समय में अत्यंत स्मूथ और धीमा बनाती है; जैसे- transition: all 0.3s ease;।

➜ [

button {

background: blue;

color: white;

transition: all 0.3s ease;

}

button:hover {

background: red;

transform: scale(1.1);

}

टिप: transition: all 0.3s ease; से होवर इफ़ेक्ट स्मूथ (Smooth) दिखाई देता है।

29. Animation (एनीमेशन क्रिएशन)

@keyframes: यह वह नियम है जहाँ एनीमेशन के बदलने के चरणों (Stages) को परिभाषित किया जाता है।
animation-name: कीफ्रेम्स में बनाए गए एनीमेशन के नाम को एलिमेंट से जोड़ना; जैसे- animation-name: slide;।
animation-duration: एनीमेशन को एक चक्र पूरा करने में लगने वाला कुल समय; जैसे- animation-duration: 2s;।
animation-delay: एनीमेशन को कमांड मिलने के कितनी देर बाद शुरू होना है; जैसे- animation-delay: 1s;।

➜ [इनफिनिटी (अनंत) लूप एनीमेशन बनाने के लिए CSS की animation-iteration-count: infinite; प्रॉपर्टी का उपयोग किया जाता है।

30. Responsive Web Design (मोबाइल-फ्रेंडली डिज़ाइन)

Viewport: मोबाइल स्क्रीन के आकार के अनुसार वेबपेज के स्केल और विड्थ को ऑटो-एडजस्ट करने का मेटा टैग।
Media Query: अलग-अलग स्क्रीन रेजोल्यूशन (मोबाइल, टैबलेट, डेस्कटॉप) के लिए विशिष्ट सीएसएस नियम लिखना; जैसे- @media (max-width: 768px) { }।
Mobile First Design: कोडिंग करते समय सबसे पहले मोबाइल स्क्रीन का लेआउट बनाना और बाद में बड़ी स्क्रीन्स के लिए कोड जोड़ना।

➜ [मुख्य CSS Media Query Breakpoints:

मोबाइल: max-width: 576px

टैबलेट: 577px – 768px

लैपटॉप: 769px – 992px

डेस्कटॉप: 993px – 1200px

बड़ी स्क्रीन: 1200px+

31. CSS Variables (रीयूजेबल कोड)

किसी कलर या वैल्यू को एक नाम में स्टोर करके पूरी स्टाइलशीट में बार-बार रीयूज़ करने की तकनीक; जैसे- --main-color: red; और उपयोग के लिए color: var(--main-color);।

➜ [CSS Variables (--variable-name) का उपयोग करके Light और Dark Mode के लिए अलग-अलग रंग निर्धारित किए जाते हैं।

फिर :root और .dark में वैरिएबल की वैल्यू बदलकर पूरी वेबसाइट का रंग आसानी से बदल सकते हैं।

उदाहरण:

:root {

--bg: white;

--text: black;

}

.dark {

--bg: #121212;

--text: white;

}

body {

background: var(--bg);

color: var(--text);

}

32. Pseudo Classes (विशेष अवस्थाएं)

:hover: जब यूज़र अपना माउस पॉइंटर किसी एलिमेंट के ऊपर ले जाता है तब स्टाइल बदलना; जैसे- a:hover { color: red; }।

33. Pseudo Elements

बिना नया HTML टैग बनाए किसी एलिमेंट के विशिष्ट हिस्से (जैसे पहली लाइन या एलिमेंट के ठीक आगे-पीछे) को स्टाइल करना; जैसे- p::first-letter { font-size: 30px; } या div::after { content: ""; }।

➜ [::before और ::after का उपयोग HTML बदले बिना टेक्स्ट के पहले या बाद में आइकन, चिन्ह या सजावटी तत्व जोड़ने के लिए किया जाता है।

उदाहरण:

.icon::before {

content: "✓ ";

color: green;

}

34. Comments (कोडर नोट्स)

सीएसएस कोड के बीच में अपनी समझ के लिए नोट्स लिखना जो ब्राउज़र में रेंडर नहीं होते; इसका सिंटैक्स /* कमेंट टेक्स्ट */ होता है।

➜ [कोड में लिखे गए Comments यह बताते हैं कि कोई हिस्सा क्या काम करता है, जिससे बाद में कोड को समझना, संशोधित करना और डिबग करना आसान हो जाता है।

यह टीम में काम करने और लंबे समय तक प्रोजेक्ट की देखभाल (Maintenance) के लिए भी बहुत उपयोगी होते हैं।

35. Best Practices (व्यावसायिक नियम)

Clean Code: कोड को हमेशा सही इंडेंटेशन और पठनीय फॉर्मेट में व्यवस्थित रखना चाहिए।
Reusable CSS: एक ही कोड बार-बार लिखने के बजाय कॉमन और यूटिलिटी क्लासेस का उपयोग करना चाहिए।
Naming Convention: क्लासेस के नामों के लिए हमेशा स्पष्ट और मानक हाइफन फॉर्मेट (जैसे- .main-sidebar) का प्रयोग करें।
Performance Tips: वेबसाइट लोड स्पीड बढ़ाने के लिए प्रोडक्शन पर लाइव करने से पहले सीएसएस फाइल को मिनिफाई (Compress) करें।

➜ [कोड ऑप्टिमाइजेशन के लिए Visual Studio Code (VS Code) मेरा पसंदीदा टूल है। इसमें Prettier, ESLint और Minify जैसी एक्सटेंशन कोड को साफ़, व्यवस्थित और तेज़ बनाने में मदद करती हैं।

36. सामान्य गलतियाँ (Common Mistakes)

सीएसएस प्रॉपर्टी के अंत में सेमीकोलन (;) लगाना भूल जाना या क्लास के आगे डॉट (.) और आईडी के आगे हैश (#) का गलत उपयोग करना सबसे आम गलतियाँ हैं।

➜ [शुरुआती डेवलपर्स की एक बड़ी गलती अर्थपूर्ण (Meaningful) नाम न रखना और कोड को बिना व्यवस्थित किए लिखना है। इससे कोड पढ़ना, डिबग करना और भविष्य में संशोधित करना कठिन हो जाता है।

37. Interview Questions (साक्षात्कार के सवाल)

Q. display: none और visibility: hidden में क्या अंतर है?
उत्तर: display: none एलिमेंट को पेज से पूरी तरह हटाकर उसकी जगह भी मुक्त कर देता है, जबकि visibility: hidden एलिमेंट को केवल छुपाता है पर वह अपनी जगह घेरे रखता है।

➜ [इंटरव्यू प्रश्न: CSS में display: none; और visibility: hidden; में क्या अंतर है?

वन-लाइनर जवाब: display: none; एलिमेंट को लेआउट से पूरी तरह हटा देता है, जबकि visibility: hidden; एलिमेंट को छिपाता है लेकिन उसकी जगह (Space) बनी रहती है।]

38. Practice Exercises (अभ्यास कार्य)

➜ [Flexbox का उपयोग करके एक सुंदर और मोबाइल-रिस्पॉन्सिव Header Navbar तैयार करें।

Navbar में Logo तथा Home, About, Services और Contact जैसे मेनू शामिल करें।

मोबाइल स्क्रीन पर मेनू को वर्टिकल (Column) लेआउट में दिखाने के लिए Media Query का उपयोग करें।

डिज़ाइन को आकर्षक बनाने के लिए उचित रंग, स्पेसिंग और Hover Effect जोड़ें।

]

39. FAQ (अक्सर पूछे जाने वाले सवाल)

Q. क्या एक्सटर्नल सीएसएस फाइल का उपयोग करना एसईओ के लिए अच्छा है?
उत्तर: हाँ, यह आपके HTML कोड को साफ रखता है जिससे सर्च इंजन क्रॉलर्स आपके पेज को तेजी से क्रॉल और रैंक कर पाते हैं।

➜ [सवाल: CSS और JavaScript में क्या अंतर है?

वन-लाइनर जवाब: CSS वेबसाइट की डिज़ाइन और स्टाइलिंग के लिए उपयोग होती है, जबकि JavaScript वेबसाइट में इंटरैक्टिव और डायनेमिक फीचर जोड़ने के लिए उपयोग की जाती है।]

40. निष्कर्ष (Conclusion)

HTML के बुनियादी ढांचे को एक व्यावसायिक और आधुनिक रूप देने के लिए सीएसएस की इन सभी कोर प्रॉपर्टीज और लेआउट तकनीकों पर मजबूत पकड़ होना अनिवार्य है।

➜ [आशा है कि यह लेख आपके लिए उपयोगी रहा होगा। यदि आपके मन में कोई प्रश्न या सुझाव हो, तो कृपया कमेंट करें। ऐसी ही उपयोगी वेब डिज़ाइनिंग और प्रोग्रामिंग जानकारी के लिए हमारे ब्लॉग से जुड़े रहें।]

स्टाइल CSS क्यों आवश्यक है??

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>लिखो </h1> नीला दिखेगा
<p>कुछ भी </p> लाल dikhega

</body>
</html>

<div style="background-color: #fcff01; color: red;">कुछ भी लिखो </div>

CSS लगाने के 3 तरीके

Inline CSS
Internal CSS (<style>)
External CSS (style.css)

color

RGB values के लिए rgb(255, 99, 71),

rgb(255, 0, 0) लाल

rgb(0, 0, 255) नीला

rgb(60, 179, 113) हरा

rgb(238, 130, 238) बैंगनी

rgb(255, 165, 0) पीला

rgb(106, 90, 205) गहरा nila

HEX values, के लिए #ff6347

#ff0000 लाल

#0000ff नीला

#3cb371 हरा

#ee82ee बैंगनी

#ffa500 पीला

#6a5acd गहरा nila

HSL values, के लिए hsl(9, 100%, 64%)

RGBA values, के लिए rgba(255, 99, 71, 0.5)

and HSLA values. के लिए hsla(9, 100%, 64%, 0.5)

<p style="font-family:courier;">font जो चाहें लिख सकते है </p>

1बार में एक को प्रयोग कर सकते हैं अगर चाहे तो बहुत ज़्यादा भी कर सकते है जैस की मैंने सब से ऊपर दिखा है।

<p style="text-align:center;">बीच मे paragraph.</p> दिखेगा बायीं दाईं ऊपर नीचे जाना चाहिए उसके साथ padding px रिम rm और भी चीज़ें लगाकर आगे कर सकते हैं।

text formatting क्या हैं?

<b> - Bold text

<strong> bold text से ज़्यादा महत्वपूर्ण हो तो उपयोग

<u> - अंडरलाइन text

<strong> - Important text

<i> - Italic text

<em> - Emphasized text इटैलिक से महत्वपूर्ण

<mark> - Marked text

<small> - Smaller text

<del> - Deleted text

<ins> - Inserted text

<sub> - Subscript text गणित में वर्ग

<sup> - Superscript text जल का सूत्र में

और भी है जिसे वह पिछले क्लास में बताए था और भी अभी आगे क्लास में बताएगे

HTML Quotation and Citation Elements वचन वाक्य शायरी नारे को या महत्वपूर्ण कैसे दिखायें?

<abbr title="new html code sikhe aasan hindi me">NHC</abbr> जब आपका नाम पर पॉइंट जाएगा तो आपने जो लिखा है वह दिखा देगा और Yehshabd के नीचे dotdot. लिखा हुआ दिखेगा

Written by lovly.<br>

Visit us at:<br>

पप्पू.com<br>

आईडी 2, uk <br>

इंडिया

</address>

इसका प्रयोग पत्र लिखते समय किया जाता है ऐसेभी लिख सकते हैं लेकिन बड़ी स्क्रीन या कहीं देखने पर इधर उधर हो जाता है इसलिए इसका प्रयोग किया जाता है।

<bdo dir="rtl">काकी काका </bdo> काका कीका : सीधे लिखा शब्द उल्टा हो जाता है।

HTML Comment Tag कोड बड़ा होने पर उसमें यह अलग अलग बाँट कर समझने के लिए प्रयोग होता है।  नहीं दिखेगा पेज पर लेकिन कोडिंग में रहेगा

<p>This is a paragraph too.</p> यह दिखेगा।