Transcript for:

हाय कोडर्स मैं हूं आपकी श्रद्धा दीदी एंड वेलकम टू अपना कॉलेज आज की वीडियो के अंदर हम जीरो से लेकर हीरो तक पूरी की पूरी सीएसएस को कंप्लीट करने वाले हैं और साथ के साथ उसको यूज करके हम एक अच्छे लेवल का प्रोजेक्ट भी बनाने वाले हैं अब सीएसएस की बात करें तो सीएसएस का काम होता है वेबसाइट्स के ऊपर स्टाइल को ऐड करना यानी हमने हम सीएसएस के डिफरेंट डिफरेंट कॉन्सेप्ट्स को पढ़ेंगे लेक्चर की फॉर्म में हम पांच लेवल्स को कंप्लीट करेंगे एंड इन पांचों लेवल्स में हम जीरो से लेकर मतलब बिल्कुल बेसिक से लेवल से लेकर अपने एडवांस लेवल तक के कॉन्सेप्ट्स पढ़ेंगे और साथ के साथ उनके प्रैक्टिस क्वेश्चंस को भी सॉल्व करेंगे एंड एंड में इन सारे कांसेप्ट को यूज करके हम बनाने वाले हैं एज अ प्रोजेक्ट अपनी amazonbusiness.in आप अपने रिज्यूमे के अंदर भी ऐड कर सकते हैं जो आपके एक्सपीरियंस को दिखाएगा एंड सिर्फ यही प्रोजेक्ट नहीं जितने लेवल का हम सीएसएस सीखेंगे उसको यूज करके आप चाहे तो अपने अच्छे खासे लेवल के प्रोजेक्ट्स भी बना सकते हैं आगे जाकर इस वीडियो को हमने ये अज्यू करके बनाया है कि आपको एज अ स्टूडेंट बिल्कुल भी सीएसएस की नॉलेज नहीं है तो बिल्कुल जरो लेवल के साथ हम स्टार्ट कर रहे होंगे अच्छी खासी प्रैक्टिस कर रहे होंगे डिफरेंट डिफरेंट कांसेप्ट सीख रहे होंगे और एंड में एज अ रिजल्ट हम सीख रहे होंगे कि कैसे वेबसाइट के क्लोन को बनाते हैं और खुद भी एक क्लोन बनाकर उसको एज अ प्रोजेक्ट हम प्रिपेयर कर रहे होंगे अब जितनी भी चीजें इस पूरे के पूरे लेक्चर सीरीज में डिस्कस हैं उन सबके नोट्स आपको नीचे डिस्क्रिप्शन बॉक्स के अंदर मिल जाएंगे तो उनको आप कभी भी जाकर रेफर कर सकते हैं तो शुरुआत करते हैं अपनी बहुत ही मजेदार बहुत ही खूबसूरत सीएसएस जर्नी के साथ अब जब भी हम एक प्रोग्राम एक कोड लिखना होता है तो हमें कोड एडिटर की जरूरत पड़ती है कोड लिखने के लिए हम विजुअल स्टूडियो यानी वीएस कोड नाम के कोड एडिटर का इस्तेमाल करेंगे कोड एडिटर्स को हम इमेजिन कर सकते हैं कि वो एक नोटबुक की तरह है जैसे नोटबुक के अंदर हम डिफरेंट डिफरेंट चीजें लिखा करते ते हैं वैसे ही जब भी हमें कोड लिखना होता है तो उसके लिए कोड एडिटर का हम इस्तेमाल कर लेते हैं जिसके साथ काफी सारे रिसोर्सेस काफी सारी चीजें हैं यूज़फुल चीजें जो हमें मिल जाती हैं पर कोड एडिटर जो है हमें काफी सारी एक्सटर्नल फंक्शनैलिटी देगा साथ के साथ शुरुआत से ही हम आपका वो एनवायरमेंट प्रिपेयर करा देंगे कि आगे जाकर अगर आपको प्रोजेक्ट्स करने हैं जिन प्रोजेक्ट्स को हम इस वीडियो में डिस्कस कर रहे होंगे या फिर आपको खुद का अपना कुछ बिल्ड करना है आगे जाक एक वेबसाइट बिल्ड करनी है और ज्यादा सॉफ्टवेयर सिस्टम्स बनाने हैं तो वो आपके लिए बनाना पहले से ही आसान हो जाएगा क्योंकि पहले से ही सबसे जो सीमलेस प्रोसेस वाली चीज होती है ना सबसे एफिशिएंसी वाली चीज उनको हम यूज़ करवा देंगे अब वीएस कोड माइक्रोसॉफ्ट की तरफ से फ्रीली अवेलेबल है तो इसको कोई भी जाकर इस्तेमाल कर सकता है तो सबसे पहले इसको डाउनलोड करने के लिए हम सर्च करेंगे इंटरनेट पर डाउनलोड वीएस कोड तो ये फर्स्ट जो लिंक आएगा इस पर हमें चले जाना है यहां पर साइट भी मैं बता देती हूं c.v. क डनलोड अब इसमें काफी सारे ऑप्शन आ गए आ गया अब आप विज मशीन पर हैं windows7 8 10 11 पर तो यहां पे आप अपने सिस्टम के हिसाब से कि 64 बिट सिस्टम है तो कौन सा डाउनलोड करना है 32 बिट है तो कौन सा डाउनलोड करना है मोस्टली लोगों का जो है 64 बिट सिस्टम होता है तो इसको आप यहां पे क्लिक करके डाउनलोड कर सकते हैं अगर आप कर देना है जैसे ही टिक करेंगे हमारा विजुअल स्टूडियो कोड पूरी तरह इंस्टॉल हो जाएगा और इसको अब हम फर्स्ट टाइम खोल सकते हैं हाय एवरीवन तो अब हम शुरुआत करने वाले हैं अपनी सीएसएस के साथ तो सीएसएस को शुरू करने से पहले एक बार जो हमारी तीन बेसिक टेक्नोलॉजीज होती हैं उनका हम ओवरव्यू ले लेते हैं यानी जब भी हम वेब डेवलपमेंट की शुरुआत करते हैं हम तीन लैंग्वेजेस को सीखते हैं जिनमें सबसे पहली है हमारी एचटीएमएल जिसको हम ऑलरेडी कंप्लीट कर चुके हैं दूसरी है सीएसएस जिसको हम आज की वीडियो में कंप्लीट करेंगे एंड तीसरी होती है हमारे पास जावास्क्रिप्ट जिसको हम नेक्स्ट लेक्चर के अंदर वेब डेवलपमेंट जब पढ़ रहे होंगे तब कंप्लीट कर रहे होंगे अब html-pdf हमें ईट लगानी पड़ेंगी छत बनानी पड़ेगी लेंटर डालना पड़ेगा तो वो होता है बेसिक लेआउट बेसिक स्ट्रक्चर जिसके ऊपर हम पेंटिंग भी कर सकते हैं जिसके अंदर हम लाइट पंखे भी लगा सकते हैं तो जो बेसिक स्ट्रक्चर या बेसिक लेआउट हमारी वेब पेज का तैयार होता है हमारी वेबसाइट का तैयार होता है उसको तैयार करवाता है हमारी एटीएमएल एटीएमएल होती थी हाइपरटेक्स्ट मार्कअप लैंग्वेज उसको हमने काफी डिटेल में पढ़ा है दो घंटे का हमारा वन शॉट था जिसके नोट्स भी आपको दिए गए हैं तो आप चाहे तो सिर्फ जाकर नोट्स से ही एक बार थोड़ा सा रिवीजन मार सकते हैं बाकी एचटीएमएस चीज है जिसके साथ आप शुरुआत कर सकते हैं तो इतनी मुश्किल नहीं होगी बहुत थोड़े से टाइम में हम कंप्लीट कर सकते हैं आज हम फोकस करने वाले हैं सीएसएस के ऊपर अब जैसे ही मेरे घर का स्ट्रक्चर तैयार हो गया अब उसके ऊपर कलर कौन सा अप्लाई होना है उसके ऊपर जो सोफे हैं उनका कलर क्या मेरी दीवारों के कलर के साथ मैच करेगा अगर दीवार ग्रे कलर की है तो सोफों का कलर वाइट हो सकता है या दीवार अगर वाइट कलर की सोफा का कलर ग्रे हो सकता है इस तरीके से कम्प्लीनोस कितने साइज का खरीदना चाहिए अगर मेरे लिविंग रूम का साइज बड़ा है तो उसमें किस साइज का सोफा आएगा या कितना छोटा कितना बड़ा होगा लैंप जो है उसका कलर क्या मेरी दीवारों के साथ कॉम्प्लीयंट लाइट्स चाहिए ये सारे ऐसे डिसीजंस होते हैं जो हम घर बनाते टाइम सोचते हैं तो वही सारे स्टाइलिंग के डिसीजंस हमें वेब पेज बनाते टाइम भी सोचने पड़ेंगे तो हमारी वेबसाइट को स्टाइल देने का काम करती है हमारी सीएसएस यानी कैस्केडिंग स्टाइल शीट्स इनको भी हम आगे देखने वाले हैं डिटेल में एंड उसके बाद हमारी जावास्क्रिप्ट होती है जिसका लॉजिक का काम होता है यानी अगर लाइटें लगानी है तो स्विच ऑन करें तो लाइटें जल जाए और स्विच ऑफ करें तो लाइटें बंद हो जाए पंखा जो है हम रेगुलेटर से उसकी स्पीड को सेट कर सकते हैं कि एक नंबर पे चल रहा है पंखा या मेरा पांच नंबर पे चल रहा है तो इस तरीके का जितना भी लॉजिक होता है वेबसाइट के अंदर कि चीजें काम कैसे कर रही हैं वो सारा का सारा मेरा जावास्क्रिप्ट सेट करता है तो आज का जो हमारा लेक्चर होगा उसके अंदर हम स्टाइलिंग खूबसूरती मेकअप पेंट इन सारी चीजों कलर्स टेक्स्ट इन सब चीजों के ऊपर फोकस कर रहे होंगे जो पार्ट है मेरे सीएसएस का अब सीएसएस वन ऑफ द इंपॉर्टेंट चीज है जब हम फ्रंट एंड डेवलपमेंट की बात करते हैं इंपॉर्टेंट क्यों है बहुत बेसिक सा एग्जांपल लेते हैं जब भी हम किसी वेबसाइट पर जाते हैं जो हमें देखने में प्रीमियम लगती है हो सकता है उसका फॉन्ट जो है वो थोड़ा सा मॉडर्न टाइप का हो हो सकता है उसमें पिक्चर्स अच्छी यूज़ हो रही हो या पिक्चर की जगह आपको 3d एनीमेशन दिख जाए या 2d एनीमेशन भी मूवमेंट वाली हूं बहुत सुंदर सी हूं कलर उन्होंने बहुत अच्छे ले रखे हैं वाइट स्पेस काफी ज्यादा है फॉन्ट स्टाइल बहुत अच्छे ले रखे हैं तो इस तरीके की चीजें जब एक वेबसाइट के ऊपर होती है ना तो हमारा एज अ कंज्यूमर एज अ यूजर प्रोडक्ट के लिए ज्यादा पैसे देने का मन कर जाता है ये बहुत बेसिक सी ह्यूमन साइकोलॉजी है जिसको बहुत सारे ब्रांड यूज करते हैं इसीलिए हर ब्रांड चाहता है कि वो थोड़ा प्रीमियम स्टैंड आउट करें मार्केट में इसलिए कई सारी चीजें हम नोटिस करेंगे जैसे कई सारे ब्रांड्स होते हैं जो फूड ब्रांड्स होते हैं वो अपने कलर्स जो रखेंगे वो येलो और रेड का मिक्सचर रखेंगे जैसे कोक रेड कलर यूज़ करेगा या mcdonald's रेड कलर यूज करेगा क्योंकि रेड कलर पैशन का कलर होता है रेड कलर से हमें क्या होता है रेड कलर से हमें भूख भी थोड़ी सी ज्यादा लगती है अगर हम रेड या येलो का मिक्सचर देखते हैं तो इसीलिए काफी सारे फूड ब्रांड्स में हमें वो चीज दिखाई देती है रेड से क्या होता है रेड से हैप्पीनेस भी आती है तो जोमट का जो प्राइमरी कलर है वो आपको रेड कलर का दिखेगा या फिर अगर हम ब्लू कलर का एग्जांपल ले लें ब्लू कलर जो होता है वो स्टेबिलिटी का कलर होता है वो सिक्योरिटी का कलर होता है इसीलिए काफी सारी जो बैंकिंग से रिलेटेड वेबसाइट्स होती है ना वो ब्लू कलर को यूज करती हैं आप रेजर पे का एग्जांपल ले लेंगे आप पेमेंट सॉफ्टवेयर्स हैं उनसे रिलेटेड है आप paytm2 क्योंकि ब्लू एक तरीके से यूजर को सिक्योरिटी और स्टेबिलिटी की फीलिंग देता है क्योंकि वो अपना पैसा डाल रहे हैं इन एप्स के ऊपर तो पैसा सही जगह जाकर ट्रांसफर हो रहा होगा कहीं पर लॉस नहीं हो जाएगा तो इसीलिए बहुत छोटी सी चीज जैसे कलर हो गया से लेकर बहुत बड़ी-बड़ी चीजें जैसे अलाइन मेंट कैसा है एलिमेंट्स का कोई बटन कहां पर प्लेस है किस साइज में है किस बैकग्राउंड कलर में है कौन सा फॉन्ट स्टाइल है सारी चीजें इंपॉर्टेंट होती हैं जब भी हम एक वेबसाइट को बिल्ड करने चलते हैं तो सीएसएस को हमें बहुत ही इंपॉर्टेंट एंटिटी की तरह ट्रीट करना है जब भी हम डेवलपमेंट की शुरुआत कर रहे हैं तो आज हम बात करेंगे सीएसएस की इसको पांच लेवल्स में हम कंप्लीट करने वाले हैं सबसे पहले बात करेंगे अपने फर्स्ट लेवल की जो कि होगा बेसिक्स ऑफ सीएसएस अब बेसिक्स ऑफ सीएसएस पढ़ने से पहले जो हमने विजुअल स्टूडियो कोड को इंस्टॉल किया था उसको एक बार हम खोल कर देख लेते हैं हम जब भी विजुअल स्टूडियो कोड खोलेंगे तो हमारी स्क्रीन कुछ ऐसी दिखाई देगी अब स्क्रीन के ऊपर यहां पर अगर आपने नया-नया इंस्टॉल किया है तो आपको यह रिसेंट वाला से सेक्शन नहीं दिखाई देगा क्योंकि मैं विजुअल स्टूडियो कोड पर बहुत टाइम से काम कर रही हूं तो मुझे मेरे रिसेंट फाइल्स दिखाई दे रहे हैं बट आपको ये स्टार्ट न्यू फाइल इस तरीके के ऑप्शंस दिखाई देंगे तो न्यू फाइल पर क्लिक करके हम क्या कर सकते हैं नई फाइल बना सकते हैं अब अपनी नई फाइल को बनाने से पहले हम क्या करेंगे अपने डेस्कटॉप के ऊपर या जहां पर भी आप अपना काम करना चाहते हैं कोडिंग का हम अपने लैपटॉप के ऊपर एक फोल्डर बनाएंगे क्लासरूम नाम से आप चाहे तो किसी भी नाम से फोल्डर बना सकते हैं मैंने क्लासरूम नाम से फोल्डर बनाया है और इस फोल्डर के अंदर हम अपना सारा का सारा कोड लिखने वाले हैं अब ये फोल्डर हम कहीं भी बना सकते हैं डेस्कटॉप पे बना सकते हैं डाउनलोडस में बना सकते हैं लोकल ड्राइव सी में बना सकते हैं आप मैक के ऊपर हैं तो मैक के ऊपर आप किसी भी फोल्डर डॉक्यूमेंट के अंदर बना सकते हैं अब विजुअल स्टूडियो कोड के अंदर ऊपर फाइल पर जाकर ये सारे के सारे सिस्टम्स के अंदर ऑप्शन वर्क करेंगे हम जाएंगे ओपन पर एंड ओपन पर जाते ही हमारे डिफरेंट डिफरेंट अपने ऑप्शंस दिखाई देने लग जाएंगे अब हम क्या करने वाले हैं हमने जो फोल्डर बनाया था क्लासरूम हम क्लासरूम पर जाकर इसे कर देंगे ओपन तो विजुअल स्टूडियो कोड के अंदर हम उस क्लासरूम फोल्डर को खोल चुके होंगे यहां पर आपको लेफ्ट से इस पर क्लिक करके ये मेरा फाइल्स का ऑप्शन होता है तो इस पर क्लिक करके मुझे मेरा क्लासरूम फोल्डर भी दिखाई दे रहा होगा इस वेलकम को क्रॉस कर देते हैं एंड इस क्लासरूम फोल्डर के अंदर हम क्या करने वाले इस आइकन पे क्लिक करेंगे ये क्या होता है ये फाइल को क्रिएट करने का आइकन होता है मतलब अब क्लासरूम फोल्डर के अंदर मैं कोई फाइल क्रिएट करना चाहती हूं तो मैं इस आइकन पर क्लिक कर सकती हूं और यहां पर मैं अपनी फाइल का नाम दे सकती हूं अपनी फाइल का नाम मैं देने वाली हूं इक्सड index.htm हम सीएसएस की क्लास कर रहे हैं और हमने html5 क्रिएट की है तो यह चीज हो सकता है आप अगर नया-नया सीएसएस सीख रहे हैं आपको थोड़ी अटपटी लगी बट अटपटी बिल्कुल नहीं है एक वेब पेज के ऊपर अगर आप स्टाइल ऐड करना चाहते हैं तो सीएसएस लिखने के लिए हमारे पास एचटीएमएल कोड होना चाहिए जैसे एक घर के ऊपर पेंट करने के लिए हमारे पास पहले दीवारें तो होनी चाहिए वैसे ही हमारे कोड की सीएसएस लिखने के लिए उसके अंदर स्टाइल ऐड करने के लिए कोई एलिमेंट तो हो जिसके ऊपर हम स्टाइल ऐड करें इसीलिए सबसे पहली चीज जो हम क्रिएट करते हैं वो हमारी html5 होती है यह डॉट html5 है और आप ध्यान से देखेंगे वापस से उसी क्लासरूम फोल्डर के अंदर अगर आप जाएंगे तो वहां पर आपके लिए index.htm फाइल क्रिएट हो गई है इस पर जब हम डबल क्लिक करेंगे तो यह chrome-flags मेरा वेब पेज क्या है पूरा ब्लैंक है इसके ऊपर अभी कुछ नहीं लिखा हुआ कोई एलिमेंट नहीं है कोई टेक्स्ट नहीं है कोई कंटेंट नहीं है तो इस तरीके की एक index.htm फाइल को हमने क्रिएट कर लिया है आप चाहे तो क्लासरूम फोल्डर के अंदर और फोल्डर्स भी बना सकते हैं तो फोल्डर बनाने का आइकन सेकंड पर होता है ये मेरा फाइल बनाने का आइकन है आप चाहे तो इंडेक्स की जगह कोई और नाम भी दे सकते हैं पर अगर हम बिगनर है तो बहुत ही अच्छा होगा अगर हम index.htm नाम ही लेकर चले तो क्योंकि सारी चीजें मैच करेंगी तो आपके एरर्स आने के चांसेस कम आएंगे क्योंकि एरर्स आएंगे तो फिर आप आपको टाइम निकालना पड़ेगा उनको डीबगर में उनको सॉल्व करने में पर परेशानी की बात नहीं है जिस कोडर के पास एरर्स आते हैं वही एक बेटर कोडर बनता है फ्यूचर में जाके क्योंकि मैक्सिमम जो एरर्स आप फ्यूचर में फेस करने वाले थे वो आपने अभी कर लिए हैं तो आपकी डेवलपमेंट जर्नी बहुत आसान हो जाएगी नेक्स्ट बढ़ते हैं अपने लेवल वन की तरफ लेवल वन के अंदर शुरुआत करते हैं समझने की कि सीएसएस एक्चुअली है क्या सीएसएस की फुल फॉर्म की बात करें तो इसका नाम है कैस्केडिंग स्टाइल शीट यानी ये कोई प्रोग्रामिंग लैंग्वेज नहीं है बहुत सारी आपने लैंग्वेजेस सुनी होंगी जैसे c+ प हो गई जैसे जावा हो गई जैसे सी हो गई जैसे पाइथन हो गई जिसके अंदर हम प्रोग्रामिंग करते हैं जिसके अंदर हम इफल्स करते हैं वेरिएबल बनाते हैं लूप्स लिखते हैं इस तरीके के काफी सारी चीजें करते हैं पर सीएसएस वैसी लैंग्वेज नहीं है सीएसएस एक स्टाइलिंग लैंग्वेज है यानी इस लैंग्वेज का एक मेन पर्पस है कि इसको स्टाइल ऐड करने के लिए यूज किया जाता है इसीलिए इसके नाम में ही स्टाइल शीट है मतलब आप एक ऐसी शीट बनाते हैं जिसको स्टाइल ऐड करने के लिए यूज किया जाता है अब ये कैस्केडिंग का क्या मतलब होता है कैस्केडिंग का मतलब हम थोड़ा सा बाद में जाकर पढ़ेंगे जब हम सीएसएस के थोड़े से कॉन्सेप्ट्स को कवर कर लेंगे क्योंकि अभी हम कैस्केडिंग के अंदर घुस गए तो चीजें थोड़ी सी कॉम्प्लेक्टेड पेज के ऊपर स्टाइल ऐड करना है तो मुझे उसके ऊपर सीएसएस ऐड करना पड़ेगा सीएसएस को अगर और थोड़ा सा डिफाइन करें तो इट इज़ अ लैंग्वेज दैट इज यूज्ड टू डिस्क्राइब द स्टाइल ऑफ अ डॉक्यूमेंट डॉक्यूमेंट यानी मेरा एटीएमएल डॉक्यूमेंट यानी अगर मुझे अपने डॉक्यूमेंट के लिए स्टाइल ऐड करना है तो मुझे सीएसएस को यूज़ करना पड़ेगा अब क्योंकि स्टाइल ऐड करने से पहले कुछ कंटेंट होना चाहिए वेबसाइट के के पास इसीलिए हमेशा सीएसएस लिखने से पहले हम अपना html-pdf राइट में हमारे पास कुछ ऐसी सी विंडो हमें दिखाई देगी जिसके अंदर कई सारे ऑप्शन होंगे एलिमेंट्स कंसोल सोर्सेस नेटवर्क परफॉर्मेंस ये सारे ऑप्शंस हमें हेल्प करते हैं जब भी हम किसी वेबसाइट को इंस्पेक्ट यानी चेक करना चाहते हैं कि इस वेबसाइट के अंदर कोड किस तरीके का लिखा हुआ है अब मैं क्या करने वाली हूं एक छोटी सी चीज करूंगी मैं इसका हेड वाला कोड लूंगी और इसको डिलीट कर दूंगी डिलीट करने से क्या हुआ कर दिया और उससे netflix's बहुत बड़ा है तो कोई टेक्स्ट बहुत छोटा सा दिखाई दे रहा है ये फोटो इतनी बड़ी सी लग रही है मुझे यहां पर ये बटन अजीब सा लग रहा है ग्रे कलर का बटन आ गया है और थोड़ा सा नीचे स्क्रोल डाउन करें तो पूरी जो वेबसाइट है वो टूटी मोटी सी दिखाई दे रही है ये प्लस का आइकन हमारे टेक्स्ट से कितना बड़ा है और प्लस क्लिक करने से बटन क्लिक करने से कुछ हो भी नहीं रहा अभी जबकि ओरिजिनल वेबसाइट अगर मैं इसको रीलोड करूं तो काफी सुंदर दिखती थी ओरिजिनल वेबसाइट में प्लस का साइन करने से ये सारी फंक्शनैलिटीज चलती थी एंड बहुत सारी अच्छी-अच्छी चीजें हो रही थी ये एटीएमएल को तोड़ मोड़ सकता है जैसे अभी यह वेबसाइट सुंदर है और बिना सीएसएस के यह बिल्कुल खराब हो जाएगी तो इतना बड़ा डिफरेंस लेकर आती है सीएसएस हमारी वेबसाइट्स के ऊपर अब बात करते हैं कि सीएसएस को लिखने की हम कैसे शुरुआत कर सकते हैं सीएसएस को लिखने का एक बेसिक सिंटेक्स होता है जिसको हमें हमेशा फॉलो करना है सबसे पहले सीएसएस को लिखने के लिए हम यूज करते हैं किसी सिलेक्टर का सिलेक्टर क्या करता है सिलेक्टर सिलेक्ट करता है कि कौन-कौन से एटीएमएल टैग्स के ऊपर यह स्टाइल अप्लाई होना चाहिए इसका बहुत बेसिक एग्जांपल लेते हैं मान लेते हैं कि मुझे कोई कलर सेट करना है लेट्स सपोज मैं अपना कलर सेट करना चाहती हूं रेड के इक्वल मतलब मैंने कोई टेक्स्ट लिखा अपनी html5 के अंदर इनफैक्ट इसको लिखकर भी देख लेते हैं हम अपने वीएस कोड के अंदर गए index.htm के अंदर हमने क्या किया मैं एक्सक्लेमेशन पर क्लिक करूंगी और मैंने रिटर्न यानी एंटर क्लिक कर दिया एक्सक्लेमेशन और एंटर के बाद क्या होता है ये बेसिक एचटीएमएल कोड आपके लिए जनरेट हो जाता है अगर यह कोड बेसिक एचटीएमएल आपके के लिए जनरेट नहीं होता तो आप क्या कर सकते हैं इसको हाथ से भी लिख सकते हैं उसमें भी कोई प्रॉब्लम नहीं है एंड इसको हम लिख देते हैं सीएसएस लेवल वन कह देते हैं सेफ तो ये मेरा कोड है पूरा का पूरा html4 के अंदर स्पेशल फीचर होता है जिसको हम एट नाम देते हैं एट क्या करते हैं एट बहुत सारी शॉर्ट फॉर्म्स की हेल्प से बहुत सारा एचटीएमएल का काफी सारा लंबा कोड जनरेट कर देते हैं तो या तो आप एट्स को यूज़ कर सकते हैं नहीं तो आप नॉर्मली इस पूरे को टाइप भी कर सकते हैं अब मैं क्या करूंगी यहां पर एक h1 हेडिंग टैग क्रिएट करूंगी जिसके अंदर लिखूंगी हेलो फ्रॉम अपना कॉलेज एक्सक्लेमेशन लगा देते हैं सेव एंड अब रिफ्रेश करेंगे तो ये हेलो फ्रॉम अपना कॉलेज h1 यानी मेरी जो मेन सबसे बड़ी हेडिंग होती है उसके लिए हम कलर रेड कर सकते हैं पर यह कलर रेड किस-किस के लिए होना चाहिए वो हमें बताना पड़ता है तो उसके लिए हम सिलेक्टर्स को यूज करते हैं जो सिलेक्ट करते हैं वो एलिमेंट जिसके ऊपर हमारी सीएसएस की स्टाइलिंग अप्लाई होगी जैसे यहां पर मेरा सिलेक्टर मैंने लिया है h1 हेडिंग फिर हम लगाते हैं अपने कर्ली ब्रेसे बहुत सारे ब्रैकेट्स होते हैं इनको हम कर्ली ब्रेसेज कहते हैं क्योंकि ये कर्ली है देखने में और इसके अंदर हम लिखते हैं अपनी प्रॉपर्टी वैल्यू पेयर को यानी पहले हम वो प्रॉपर्टी बताते हैं जिसको हमें सेट करना है और फिर हम बताते हैं वो वैल्यू जिस पर हम उसे सेट करने वाले हैं हमारा जितना भी टेक्स्ट होता है या जितना भी मटेरियल होता है कंटेंट होता है उसका अगर मुझे कलर सेट करना होता है ना तो हमारी प्रॉपर्टी का नाम होता है कलर कि सिंपली कलर सेट करके हम अपना कलर की वैल्यू को चेंज कर सकते हैं तो मेरी प्रॉपर्टी है कलर और फिर अपनी प्रॉपर्टी के बाद हम लगाते हैं कोलस एंड उसके बाद अपनी वैल्यू लिखते हैं अगर मुझे रेड कलर सेट करना है तो मैं रेड लिख दूंगी मुझे ब्लू कलर सेट करना है तो मैं ब्लू लिख दूंगी मुझे पिंक कलर सेट करना है तो मैं पिंक लिख दूंगी और लास्ट में लगा देते हैं अपने सेमीकलन सेमीकलन क्या होता है हमारा एक तरीके से स्टेटमेंट टर्मिनेटर इसको हम कह सकते हैं अगर आप सेमीकलन नहीं भी लगाएंगे तो भी मैक्सिमम केसेस में आपके पास एरर नहीं आ रहा होगा अगर आप सिंगल प्रॉपर्टी वैल्यू पेयर लिख रहे हैं तो बट फिर भी सेमीकलन को लगाते हैं हम क्योंकि ये बहुत अच्छी प्रोग्रामिंग प्रैक्टिस है सेमीकलन देख के ऐसा पता चलता है कि हां कोई एक्सपीरियंस प्रोग्रामर कोड लिख रहा है कोई नया बच्चा कोड नहीं लिख रहा इसीलिए सेमीकलन लगाने की प्रैक्टिस हम शुरुआत से ही कर रहे होंगे तो हमारा जो बेसिक सिंटेक्स रहेगा सीएसएस को लिखने का वो कुछ ऐसा रहेगा अभी हम इसको एक्चुअली कोड में लिखने ही नहीं वाले अभी हम इसको सिर्फ याद करने वाले हैं सिर्फ समझने वाले हैं अब जब भी हम सीएसएस पढ़ेंगे ना हम बहुत सारी चीजें पढ़ने वाले हैं बहुत सारी चीजें देखकर आपको ऐसा लगेगा कि इतनी सारी प्रॉपर्टीज मैंने पढ़ ली क्योंकि अभी तो बस कलर प्रॉपर्टी है ऐसी बहुत सारी और प्रॉपर्टीज होती हैं क्या इन सबको हमें याद करना पड़ेगा ऐसा काफी सारे स्टूडेंट्स पूछते हैं तो मैं बहुत बेसिक सी चीज बोलती हूं कि डेवलपमेंट के अंदर बहुत कम चीजें हैं जो हमें याद करनी पड़ती हैं काफी चीजें प्रैक्टिस के साथ आ जाती हैं और मैक्सिमम चीजें हम ग कर रहे होते हैं क्योंकि सारी की सारी सेस प्रॉपर्टी हमें याद करने की जरूरत नहीं है काफी सारी इनमें से हमें प्रैक्टिस के साथ ऑटोमेटिक याद हो जाएंगी याद करने वाली बहुत कम चीजें होती हैं जैसे सिंटेक्स कि बाहर सिलेक्टर आता है अंदर प्रॉपर्टी वैल्यू पेयर आता है बस इतनी सी छोटी चीज आपको याद करनी है सीएसएस में इसके अलावा बाकी सारी जो चीजें हैं उनको समझने पर फोकस करना है या तो हम कभी भी डेवलपमेंट के अंदर सबसे पहला तरीका होता है कि हम इनलाइन स्टाइलिंग को यूज करें इनलाइन यानी जो हमने टैग लिखा है जैसे मान लेते हैं मैंने h1 टैग लिखा है तो इसी टैग के अंदर अगर मैं इसका स्टाइल ऐड करना चाहती हूं तो मैं लिख सकती हूं स्टाइल इक्वल्स और फिर लिखेंगे डबल कोड्स एंड उसके अंदर प्रॉपर्टी वैल्यू पेयर को हम लिख सकते हैं तो ये होता है मेरा इनलाइन तरीका स्टाइलिंग को ऐड करने का जैसे मैंने अपनी h1 हेडिंग लिखी है इस हेडिंग का कलर अगर मुझे चेंज करना है टू रेड और इसके अंदर मैं इनलाइन स्टाइलिंग ऐड करना चाहती हूं यानी पहले तरीके से अगर सीएसएस ऐड करना चाहते हैं तो उसके लिए हम लिखेंगे h1 टैग के अंदर ही स्टाइल इक्वल टू फिर लगा देंगे डबल कोट्स डबल कोट्स के अंदर मैं अपने प्रॉपर्टी वैल्यू पेयर को यूज करूंगी प्रॉपर्टी क्या है प्रॉपर्टी है कलर वैल्यू क्या है वैल्यू है रेड तो स्टाइल इज इक्वल टू कलर रेड मैंने कर दिया इसको कर लेते हैं सेव एंड यहां जाके रिफ्रेश तो क्या हुआ मेरी h1 हेडिंग का कलर रेड चेंज हो गया मैं चाहूं तो इसको दूसरे कलर पर भी सेट कर सकती हूं यानी यहां पर जाकर कलर मैंने कर दिया इस तरीके से ग्रीन हेलो फ्रॉम अपना कॉलेज इसको कर देते हैं इन ग्रीन तो ये क्या होगा ग्रीन कलर में दिखाई देगा ये ग्रीन कलर में दिखाई दे दिया इस तरीके से आप खुद भी टेस्ट कर सकते हैं आप पिंक में कर सकते हैं आप ब्लू में कर सकते हैं तो जनरल जनरल जो हमारे कलर्स होते हैं जैसे रेड हो गया पिंक हो गया ब्लू हो गया ग्रीन हो गया ब्लैक हो गया वाइट हो गया इस तरीके के कलर हम सिंपली उनके नाम लिख सकते हैं पर इनके अलावा भी बहुत सारे ऐसे कलर होते हैं जिनके कोई नाम नहीं होते तो उन कलर्स को कैसे सेट करते हैं उनको हम बाद में सीख रहे होंगे अभी के लिए बस जनरल कलर्स की छोटे-छोटे प्यारे-प्यारे कलर्स की बात करते हैं जिनको हम बचपन से सीखते आए हैं और आप चाहें तो यह आपका कलर पिकर का एक ऑप्शन होता है वीएस कोड के ऊपर विजुअल स्टूडियो कोड के ऊपर जो काफी हेल्प करता है यहां पर आप जाकर क्लिक करेंगे इस कलर के ऊपर तो आपको पूरा ऐसा स्क्रीन दिखाई दे जाएगी कलर पिकर दिखाई दे जाएगा जिससे आप अपने कलर को डार्क ग्रीन कर सकते हैं लाइट ग्रीन कर सकते हैं चेंज कर सकते हैं और थोड़ा सा मैंने लाइट कर दिया तो ये कलर चेंज होकर इसकी कोई वैल्यू सेट हो गई ये वैल्यू क्या है यहां पे आरजीबी और इन सारे नंबर्स का मतलब क्या है ये सब हम बाद में सीख रहे होंगे बट बेसिकली कलर हम इस तरीके से जाकर सेट भी कर सकते हैं लाइट ग्रीन डार्क ग्रीन कोई और बट अभी के लिए बेसिक कलर्स की बात करेंगे उसमें हमारे पास आ जाता है ग्रीन रेड इस तरीके से तो मैंने क्या किया अपने टैग भी होता है बट एक और टैग होता है जिसको कहते हैं हम अपना स्टाइल टैग जिसके अंदर हम अपनी पूरी सीएसएस स्टाइलिंग लिख सकते हैं तो स्टाइलिंग लिखने का तरीका वही होता है हम एक सिलेक्टर लिखते हैं उसके बाद अंदर हम प्रॉपर्टी वैल्यू का पेयर लिखते हैं जैसे यहां से अगर मैं ये रेड स्टाइलिंग हटा दूं इस सेकंड h1 को हटा देते हैं और अगर यही रेड कलर मुझे दोबारा से इस हेडिंग के अंदर सेट करना है अभी तो ये रिफ्रेश होकर दोबारा ब्लैक हो गया तो मैं क्या कर सकती हूं हेड टैग के अंदर यहां पर हम अपना एक स्टाइल टैग लिखेंगे स्टाइल टैग के अंदर मैं अपनी h1 हेडिंग को सिलेक्ट कर लूंगी सिलेक्टर से और इसके अंदर प्रॉपर्टी वैल्यू पेयर लिखेंगे प्रॉपर्टी क्या है प्रॉपर्टी है कलर वैल्यू क्या है वैल्यू है रेड यहां पर लगा देते हैं सेमीकलन तो क्या हुआ अब यह जो h1 है या जितने भी h1 होंगे मेरे डॉक्यूमेंट में सबका कलर रेड हो जाएगा इसको जाते हैं करते हैं रिफ्रेश तो क्या हुआ h1 का कलर रेड हो गया तो ये दूसरा तरीका है स्टाइल अप्लाई करने का मैं चाहूं तो कोई और हेडिंग भी लिख सकती हूं यहां पर अगर मैंने लिख दिया इन ग्रीन और इसको करते हैं सेव एंड रिफ्रेश तो इस का भी कलर रेड होगा क्यों क्योंकि h1 क्या करेगा सारे के सारे हेडिंग्स का कलर रेड कर देगा तो चाहे आप यहां पर इन ग्रीन कर लें पर उसका कलर ऑटोमेटिक ग्रीन नहीं होगा क्योंकि h1 के लिए कलर हमने रेड दिया हुआ है तो ये दूसरा तरीका सीखा व्हिच इज यूजिंग माय स्टाइल टैग बट जब भी हम जनरल केसेस देखते हैं जब भी हम बड़ी-बड़ी वेबसाइट्स देखते हैं जैसे ना हम इनलाइन स्टाइलिंग को उतना यूज़ करेंगे मैक्सिमम केसेस में जो तरीका यूज़ होता है सीएसएस को ऐड करने का वो होता है यूजिंग एक्सटर्नल स्टाइल शीट मतलब हम एक दूसरी फाइल बनाते हैं जिसको हम अपनी स्टाइल शीट या एक्सटर्नल स्टाइल शीट कहते हैं या उसको हम कह सकते हैं हम अपनी एक अलग फाइल बनाते हैं जो सिर्फ सीएसएस के लिए होती है एक फाइल हम बनाते हैं जो सिर्फ एटीएमएल के लिए होती है एक फाइल हम बनाते हैं जो सिर्फ सीएसएस के लिए होते हैं हम कोशिश करते हैं कि सीएसएस एटीएमएल के अंदर ना लिखी हो अलग फाइल के अंदर लिखी हो क्योंकि वही प्रोफेशनल तरीका है चीजों को वर्कआउट करने का और फिर हम क्या करते हैं दोनों फाइलों को लिंक करते हैं लिंक कैसे करते हैं कि एटीएमएल समझ पाए कि इसकी स्टाइलिंग कहां से आनी है जैसे इसको बहुत ही बेसिक तरीके से अपनी हेडिंग वाले एग्जांपल के लिए देखते हैं मैं क्या करूंगी इस स्टाइल टैग को कंपलीटली हटा दूंगी सेव रिफ्रेश हम क्या कर चले गए हम बेसिक पर चले गए बेसिक यानी जैसा हमारा कोड पहले था अब हम क्या करेंगे अपने फाइल्स के अंदर इस आइकन पे क्लिक करके ये हमारी इक्ड है यहीं पर हम एक और नई फाइल क्रिएट करेंगे इस न्यू फाइल वाले आइकन पे क्लिक करके जिसको हम नाम देंगे style.css ये मेरी स्टाइल सीएसए फाइल आ गई अब स्टाइल ड सीएए फाइल के अंदर मैं लिख सकती हूं h1 जो मेरा सिलेक्टर होगा कि h1 के अंदर कलर हो जाए मेरा रेड कलर तो मैंने क्या किया अपनी सारी हेडिंग्स को मैंने कलर दे दिया अपना रेड कलर इसको जाके हम रिफ्रेश करेंगे तो मेरे लिखा है यह एटीएमएल अभी पढ़ ही नहीं पा रही पढ़ क्यों नहीं पा रही क्योंकि मैंने एक इंडेक्स फाइल क्रिएट कर दी एटीएमएल फाइल मैंने एक सीएसएस फाइल क्रिएट कर दी पर दोनों को अभी लिंक नहीं किया लिंक करने के लिए मुझे अपने हेड टैग के अंदर एक स्पेशल लाइन लिखनी पड़ती है स्पेशल लाइन क्या है स्पेशल लाइन है मैं लिखती हूं लिंक लिंक करने के लिए लिंक लिखेंगे फिर लिखेंगे आरल इ इक्वल टू स्टाइल शीट आरएल मुझे बताता है कि आप किस तरीके के रिलेशन के साथ इसको लिंक कर रहे हैं मतलब मैं एक स्टाइल शीट के साथ इसको लिंक कर रही हूं जब भी हम सीएसएस फाइल को लिंक करेंगे हमेशा रिलेशन में हम लिखेंगे स्टाइल शीट फिर हम लिखेंगे एचआरएफ एचआरएफ बताता है लिंक कि आप किसको लिंक करना चाहते हैं तो एचआरएफ के अंदर हम इस फाइल का नाम लिखेंगे फाइल का नाम क्या है फाइल का नाम है style.css तो मैं लिखूंगी style.css अब एचआरएफ के अंदर हम पूरा लिंक लिखते हैं मतलब अगर आपने style.css सेम फोल्डर के अंदर नहीं क्रिएट की किसी और फोल्डर के अंदर क्रिएट कर रखी है तो उस फोल्डर का पूरा का पूरा पाथ आप को यहां पर लिखना पड़ेगा पर क्योंकि हमने सेम फोल्डर के अंदर क्रिएट कर रखी है और पाथ के अभी हम इतना ज्यादा डिटेल में नहीं जाते क्योंकि इतना कॉम्प्लेक्टेड css2 तो ये लिंक कर दिया दोनों फाइल्स को मैंने इस लाइन से आपको भी सेम लाइन लिखनी है और अब हम इसको करेंगे रिफ्रेश तो क्या हुआ सारी की सारी हेडिंग्स का कलर अब रेड हो गया क्योंकि जो स्टाइल मैंने यहां यहां पर अप्लाई किया था वो मेरी index.htm एक्चुअली समझ पा रही है क्योंकि वो लिंक हो चुकी है अब यहां पर चाहूं तो मैं कलर को ग्रीन भी कर सकती हूं तो क्या होगा मेरी सारी हेडिंग्स का कलर चेंज होकर हो जाएगा ग्रीन कलर तो प्रैक्टिकल केसेस में एंड इनफैक्ट सीएसएस पढ़ते टाइम भी जो मैक्सिमम केसेस में हम अपना स्टाइल लिखेंगे अपनी सीएसएस का कोड लिखेंगे वो सारा का सारा हमारी स्टाइल ड सीएसएस के अंदर लिखा जा रहा होगा तो अगर सराइज करें तो हमने तीन तरीके पढ़े हैं स्टाइलिंग को ऐड करने के एक होता है हमारा इनलाइन स्टाइल दूसरा होता है हमारा स्टाइल टैग एंड तीसरा तरीका होता है हमारा एक्सटर्नल स्टाइल शीट अब एक और स्पेशल चीज होती है कि जो स्टाइल आपने एक्सटर्नल स्टाइल शीट के अंदर लिखा है आप उस सेम स्टाइल को इनलाइन या स्टाइल टैग से चेंज करने की कोशिश हमें कभी नहीं करनी क्योंकि अगर हम करेंगे तो हमेशा क्या होगा इनलाइन स्टाइल को प्रायोरिटी मिल जाएगी मतलब अगर मैंने h1 हेडिंग सबका कलर ग्रीन सेट कर दिया तो क्या होगा बाय डिफॉल्ट सबका कलर ग्रीन हो जाएगा बट अगर मैं अपनी फर्स्ट हेडिंग के अंदर जाकर इनलाइन स्टाइल लिख देती हूं स्टाइल इज इक्वल टू कलर रेड इस तरीके से कर देती हूं और अब रिफ्रेश करूंगी तो क्या होगा सबका कलर तो ग्रीन होगा बट जिसके अंदर मैंने इनलाइन स्टाइल रेड कर दिया है वहां पर जाकर इनलाइन स्टाइल ही अप्लाई हो रहा होगा तो ऐसे में अगर हम इनलाइन स्टाइल भी यूज़ कर रहे हैं अगर हम सीएसएस फाइल एक्सटर्नल स्टाइल शीट भी यूज़ कर रहे हैं तो हम कई जगह ऐसा होगा कि एक्सटर्नल के अंदर h1 का कुछ और कलर सेट है इनलाइन के अंदर आपने कुछ और कर दिया और जब हम बड़े-बड़े कोड लिखते हैं ना जब बड़े-बड़े प्रोजेक्ट्स बना रहे होते हैं या कंपनीज के अंदर बहुत बहुत सारी हम फाइलें बना रही होती हैं तो उस टाइम पे हमारे लिए याद करना मुश्किल हो जाता है कि हमने कहां पर कौन से एलिमेंट के लिए क्या प्रॉपर्टी सेट करी थी तो इसीलिए कंफ्यूजन कम रखा जाए तो इसीलिए कोशिश करनी है मैक्सिमम जो सीएसएस हम लिखें वो अपनी स्टाइल ड सीएसएस के अंदर लिखें index.htm के अंदर उतना सीएसएस हमें नहीं लिखना जब तक बिल्कुल मजबूरी ही ना हो जाए अब सबसे पहली प्रॉपर्टी जिसके बारे में हम पढ़ेंगे सीएसएस के अंदर यह है मेरी कलर प्रॉपर्टी और कलर प्रॉपर्टी को हम वैसे ही एक्शन में देख चुके हैं कलर प्रॉपर्टी का काम होता है टू सेट द फोर फोरग्राउंड कलर फोरग्राउंड कलर मतलब जब भी हम लेआउट की बात करते हैं मान लेते हैं हम जैसे ग्राफिक डिजाइनर होते हैं तो वो कोई डिजाइन बना रहे होते हैं या पेंटर है वो कोई पेंटिंग बना रहे होते हैं वैसे ही हम भी एक तरीके से खुद को पेंटर समझ सकते हैं और हम अपनी वेब पेज का या अपनी वेबसाइट का लेआउट पेंटिंग कलर सारी चीजें डिजाइन सेट करने वाले लोग हैं तो जब भी किसी लेआउट की बात होती है तो उसके दो पोर्शन होते हैं एक होता है मेरा फोरग्राउंड फोरग्राउंड यानी जो चीज सामने की तरफ मुझे दिखाई दे रही है एक होती है बैकग्राउंड में एक होती है फोरग्राउंड में जैसे इसका बहुत बेसिक एग्जांपल हम ऐसे ले सकते हैं कि जैसे मैंने इस आईपैड को लिया अब ये जो आईपैड है ये मेरा बैकग्राउंड है ये स्क्रीन मेरी बैकग्राउंड बन गई और इसके ऊपर मैंने पेन को रख दिया पेन क्या हो गया पेन मेरा फोरग्राउंड हो गया फोरग्राउंड यानी ये चीज सामने की तरफ आ रही है और बैकग्राउंड वाली चीज यानी स्क्रीन मेरी पीछे की तरफ आ रही है तो दो चीजें होती हैं दो कॉम्पोनेंट्स होते हैं एक बैकग्राउंड होता है एक फोरग्राउंड होता है फोरग्राउंड में क्या-क्या आ सकता है फोरग्राउंड में कई सारी चीजें आ सकती हैं जैसे आपका जो टेक्स्ट होता है जितना भी टेक्स्ट होता है वो सारा फोरग्राउंड में आता है मतलब वो सामने की तरफ मुझे दिखाई देता है या फिर अगर हम कोई एलिमेंट बना रहे हैं जैसे मेरा बटन हो गया तो बटन कहां आएगा बटन हमेशा फोरग्राउंड में आएगा क्योंकि वो सामने की तरफ वाली चीज है या फिर अगर मैंने कोई लिंक दिखाया अपनी वेबसाइट के ऊपर तो वो भी मेरा फोरग्राउंड के ऊपर आएगा और जो चीज बैकग्राउंड के अंदर आती है वो पीछे की तरफ छुप जाती है तो बैकग्राउंड फोरग्राउंड में डिफरेंस होता है और जो मेरी कलर प्रॉपर्टी होती है वो फोरग्राउंड का यानी अगर मुझे टेक्स्ट का कलर सेट करना है अगर मुझे बटन का कलर सेट करना है अगर मुझे लिंक का कलर सेट करना है तो इस तरीके की चीजें जो सेट करनी होती है वो हम कलर प्रॉपर्टी को यूज़ करके सेट करते हैं पर फोरग्राउंड शब्द से इतना कंफ्यूज नहीं होना फोरग्राउंड का मतलब बेसिक वही होता है कि जो भी एलिमेंट्स हमें दिखाई दे रहे हैं उनका कलर हमें सेट करना है तो उसके लिए हम यूज़ कर सकते हैं कलर प्रॉपर्टी का हम सिंपली लिख सकते हैं कलर रेड कलर पिंक कलर ब्लू कलर ग्रीन इस तरीके से हमारे करीबन 100 से ऊपर ऐसे नाम होते हैं जो फिक्स्ड होते हैं जैसे टील हो गया टील हो सकता है आपने ना सुना हो पर टील एक कलर होता है या फिर मेरा वाइट कलर हो गया मेरा ब्लैक कलर हो गया मेरा ग्रे कलर हो गया ब्राउन हो गया इस तरीके के बहुत सारे डिफरेंट डिफरेंट कलर्स हैं यानी जिनको हम सिर्फ नेम से सेट कर सकते हैं इसके कुछ एग्जांपल्स देखते हैं जैसे सबसे बेसिक एग्जांपल जो हमारी h1 हेडिंग थी उसको तो हमने देख ही लिया था अगर मैं h1 बनाऊं यहां लिख दूं दिस इज अ हेडिंग और स्टाइल ड सीएसए के अंदर इसको बंद कर लेते हैं स्टाइल ड सीएसए के अंदर मैंने क्या किया है ऑलरेडी हेडिंग का कलर ग्रीन सेट किया है तो क्या होगा यहां पर एक हेडिंग होगी दिस इज अ हेडिंग जिसका कलर ग्रीन है इसके अलावा मैं कोई और एलिमेंट भी बना सकती हूं जैसे मान लो मा लेते हैं मैंने कोई पैराग्राफ टैग बनाया पैराग्राफ के अंदर मैं कुछ भी लिख सकती हूं दिस इज अ सिंपल एंड नॉर्मल पैराग्राफ ये पैराग्राफ लिख दिया अब अगर रिफ्रेश करेंगे पैराग्राफ का कलर बाय डिफॉल्ट ब्लैक ही रहेगा सारे टेक्स्ट का बाय डिफॉल्ट ब्लैक रहता है पर पैराग्राफ का कलर सेट करने के लिए मैं लिख सकती हूं p जो कि मेरा सिलेक्टर हो जाएगा कि मैं सारे पैराग्राफ्स के लिए कलर सेट कर रही हूं यहां पर सिलेक्टर के अंदर हम वही चीज लिखते हैं जो यहां पर मेरे टैग के अंदर लिखी हुई है तो p के लिए अगर मुझे कलर सेट करना लेट्स सपोज वी सेट द कलर टू रेड या फिर रेड के अलावा आपके पास वीएस कोड का एक फायदा एक जो सबसे मेजर रीजन है जिसकी वजह से मैंने इसको आपको इंस्टॉल करा है वो यह है कि वीएस कोड के अंदर कई सारी चीजें आपको बाय डिफॉल्ट दिख जाती हैं जो आपको हेल्प करेंगी एज अ प्रोग्रामर जैसे अगर शुरुआत में एज अ बिगनर आप कोडिंग सीख रहे हैं सीएसएस सीख रहे हैं तो आपको कलर कैसे सेट करने हैं आपको कई सारे ऑप्शन मिल जाएंगे कलर पिकर इसके अंदर हो जाता है या फिर अगर यहां पर कलर्स के अंदर जैसे ही मैं कोलन लगाऊंगी ना बहुत सारे कलर्स के जितने भी कलर्स अवेलेबल होते हैं सीएसएस के अर वो सारे ऑप्शन मुझे दिख जाएंगे वायलेट दिख जाएगा येलो दिख जाएगा येलो ग्रीन दिख जाएगा टर्कॉइज टोमेटो कलर अगर मुझे चाहिए स्काई ब्लू कलर अगर मुझे चाहिए स्लेट ग्रे कलर सी ग्रीन रेड पर्पल मान लेते हैं मुझे पर्पल कलर चाहिए तो मैं सिंपली सिलेक्ट कर सकती हूं सेमी कोलन तो क्या होगा मेरे सारे पैराग्राफ्स का कलर रिफ्रेश करेंगे तो पर्पल हो गया हम चाहे तो पर्पल की जगह इसको थोड़ा सा और हाईलाइट करके रेड कलर भी दे सकते हैं रिफ्रेश तो ये क्या हुआ रेड कलर में चेंज हो गया सेम चीज हम कर सकते हैं एक बटन के लिए मान लेते हैं मैंने एक बटन बनाया बटन बन के ऊपर मैंने लिखा क्लिक सेव बटन के फोरग्राउंड में क्या आ रहा है क्लिक मी आ रहा है तो क्लिक मी का कलर बाय डिफॉल्ट अभी ब्लैक है बट क्लिक मी को मुझे कोई और कलर देना है तो मैं सिंपली लिख सकती हूं बटन क्योंकि मैं बटन के लिए कलर सेट करने वाली हूं इसको लिखेंगे कलर एंड अब कोई भी कलर दे सकते हैं लेट्स सपोज मैंने दिया ये चार्ट यूज मुझे पता भी नहीं है इसको प्रोनाउंस कैसे करते हैं बट यह वाला कलर मैं इसको दे रही हूं जो थोड़ा ग्रीनि लग रहा है सेव रिफ्रेश तो क्या हुआ ग्रीनि कलर जो ग्रे के साथ ग्रीन बिल्कुल क्लैश हो दिखाई ही नहीं दे रहा इसको थोड़ा सा चेंज कर लेते हैं लेट्स मेक इट एलिस ब्लू थोड़ा सा वाइटिस टोन आ गई ये भी हल्का सा दिखाई नहीं दे रहा ब्राउन कर लेते हैं ब्राउन कलर दे दिया एंड ये मेरे क्लिक मी के अंदर अब मेरा ब्राउन कलर आ गया तो इस तरीके से फोर ग्राउंड का कलर हम सेट कर सकते हैं डिफरेंट डिफरेंट एलिमेंट्स के लिए तो अपना जो पूरा हमारा लेक्चर होने वाला है या सीरीज ऑफ लेक्चर होने वाले हैं क्योंकि काफी लंबा लेक्चर है सीएसएस का तो इसके अंदर हम कई सारे एलिमेंट्स को देखने वाले हैं इनफैक्ट आपका एचटीएमएल साथ के साथ ही इतनी तरह रिवाइज हो जाएगा कि आपको हो सकता है जरूरत ही ना पड़े पुराने वाला लेक्चर देखने की बट कोशिश करेंगे साथ के साथ कई सारी डिफरेंट डिफरेंट चीजें सीखेंगे तो ये थी मेरी कलर प्रॉपर्टी नेक्स्ट जिस प्रॉपर्टी की हम बात करेंगे ये है मेरी बैकग्राउंड कलर प्रॉपर्टी एक कलर होता है फोरग्राउंड कलर एक होता है मेरा बैकग्राउंड कलर बिल्कुल सिंपल है समझने में तो अगर मुझे बैकग्राउंड का कलर सेट करना है तो उसके लिए सिंपली क्या लिखना होता है जैसे कलर था वैसे ही अब मेरे पास आ गया बैकग्राउंड कलर मैं लिखूंगी बैकग्राउंड हाई कलर और उसके बाद हम अपना जो भी मनपसंद कलर है जिसका हमें नाम पता है उसको हम लिख सकते हैं तो बैकग्राउंड कलर सेट करने के लिए सबसे पहले तो हम पूरे के पूरे एचटीएमएल पेज का बैकग्राउंड कलर सेट करेंगे अभी बैकग्राउंड कलर क्या है बाय डिफॉल्ट हमेशा वाइट होता है तो हम क्या करेंगे बॉडी टैग के लिए कलर सेट करेंगे मैं चले जाऊंगी पूरी की पूरी बॉडी के लिए पूरी की पूरी बॉडी कहने का मतलब है जो मेरे एचटीएमएल के अंदर मैंने बॉडी बनाई है इसके लिए हम बैकग्राउंड कलर सेट करेंगे तो चले जाते हैं बैकग्राउंड कलर यह कोड की एक और स्पेशल चीज जैसे ही आप बैकग्राउंड लिखेंगे ना सिर्फ बैकग्राउंड कलर नहीं बैकग्राउंड से रिलेटेड बहुत सारी प्रॉपर्टीज होती हैं जैसे बैकग्राउंड इमेज हो गया बैकग्राउंड पोजीशन रिपीट क्लिप अटैचमेंट हम बहुत सारी प्रॉपर्टीज पढ़ेंगे सीएसएस के अंदर तो वीएस कोड क्या करता है आपको पहले ही बता देता है ये ये प्रॉपर्टीज हैं बैकग्राउंड से रिलेटेड तो वो भी आपको एक फायदा हो जाता है कि सारी चीजें एक साथ आपको याद नहीं करनी पड़ेगी तो हम जाने वाले हैं बैकग्राउंड कलर प्रॉपर्टी पे तो काफी सारे ऑप्शंस दिख जाएंगे बैकग्राउंड कलर के लिए लेट्स सपोज मैं अपना बैकग्राउंड कलर ब्लैक करने वाली हूं इसको कर लेते हैं सेव एंड रिफ्रेश तो क्या हुआ पूरी की पूरी वेबसाइट का मेरे पास बैकग्राउंड कलर ब्लैक हो गया ये मेरी हेडिंग थी ये मेरा पैराग्राफ था यह मेरा बटन था अब मैं चाहूं तो इस बटन का बैकग्राउंड भी सेट कर सकती हूं जैसे अभी ये जो क्लिक मी है इसका कलर तो मैंने कलर से सेट किया इसका ये जो वाइटिस ग्रेश जो बैकग्राउंड होता है ना इसको सेट करने के लिए मैं क्या कर सकती हूं मैं यहां पर जा सकती हूं और बटन के लिए मैं लिख सकती हूं बैकग्राउंड कलर और मान लेते हैं बटन के लिए बैकग्राउंड कलर मुझे सेट करना है ग्रीन ग्रीन सेट कर दिया सेव रिफ्रेश तो क्या हुआ यह बटन अब मुझे ग्रीन कलर का दिखाई दे रहा है अब मैंने बटन के लिए दो प्रॉपर्टीज सेट करी है यहां पे एक कलर सेट किया है एक बैकग्राउंड कलर सेट किया है पर इन दोनों को मुझे अलग-अलग सेट करने की जरूरत नहीं है मैं सिंपली क्या कर सकती हूं इस बैकग्राउंड कलर प्रॉपर्टी को मैं इसके बाद जाकर लिख सकती हूं और इसे नीचे से हटा देंगे और एक ही बार सिलेक्टर यूज़ करके मैं मल्टीपल सीएसएस प्रॉपर्टीज को भी सेट कर सकती हूं मैंने कलर को भी सेट कर दिया मैंने बैकग्राउंड कलर को भी सेट कर दिया इसको कर देते हैं सेव एंड रिफ्रेश तो कोई चेंज नहीं आया तो अब जो ये वेब पेज दिख रहा होगा बहुत ज्यादा पुराने जमाने की जो वेबसाइट थी ना यानी 1990 के या अर्ली 2000 के आपने वेब पेज देखे होंगे कि google2 काई कुछ और ही कलर हो गया है कोई कलर सेंस नहीं है मतलब बड़े भड़कीले कलर्स हमें दिखाई दे रहे हैं तो अभी जो हम सीएसएस कर रहे हैं ना ये थोड़ी सी पुअर सीएसएस है क्योंकि अभी बिगनर हैं अभी हम बस प्रॉपर्टीज को सीख रहे हैं तो अभी ये बिल्कुल एक्सपेक्ट नहीं करना कि जो भी चीजें हम बना रहे होंगे बहुत ही सुंदर होंगी बिल्कुल ही अच्छे लेवल की होंगी क्योंकि जब भी कंपनीज के अंदर कोई भी वेब पेज डिजाइन होता है उसका प्रोसेस क्या होता है कि पहले एक डिजाइनर बैठता है डिजाइनर फिग्मा जैसा कोई टूल होता है उसको यूज करके पूरा डिजाइन बनाता है प्रॉपर तो जो डिजाइन होता है वो एगजैक्टली किसी फ्रंट एंड डेवलपर को दिया जाता है जिसको या इसके अंदर कलर रेड होना चाहिए तो डेवलपर का काम सिर्फ इतना होता है कि उसको अपना कलर रेड सेट करना होता है तो ऐसा नहीं है कि जो डेवलपर होता है वही बहुत बढ़िया डिजाइनर होता है बट क्योंकि हम हो सकता है अभी कॉलेज के अंदर हो या वर्किंग प्रोफेशनल हो तो जितना बेटर हमारा डिजाइनिंग सेंस होगा सीएसएस करते टाइम उतनी अच्छी चीज है हमें ये बस थोड़ा सा एक्सपेक्टेशन सेट करनी है कि हम डिजाइनर ही हैं बट हां हम चाहें तो कुछ बेसिक फॉर्मूले कुछ बेसिक फंडे सीखकर अपने डिजाइनिंग स्किल्स को अच्छा करके अपने वेब पेजेस को सुंदर बना सकते हैं तो वो कोशिश हमेशा करनी है ये नहीं सोचना कि डिजाइनर नहीं हूं तो बिल्कुल ही खराब वेब पेजेस बनाने हैं पर हां ये भी एक्सपेक्टेशन सेट करनी है कि बड़ी कंपनी के जैसे वेब पेजेस दिखते हैं हो सकता है कि उतनी फंक्शनालिस या उतने अच्छे सुंदर दिखने वाले वेब पेजेस हमारे जो प्रोजेक्ट वाले वेब पेजेस होंगे वो ना दिखें और कोई एक्सपेक्ट भी नहीं कर रहा पर कोशिश करनी है उसमें अच्छी से अच्छी स्टाइलिंग हो पर क्योंकि अभी हम बिगनर हैं तो उतनी अच्छी स्टाइलिंग एक्सपेक्ट करना उतना अच्छी बात नहीं रहेगी हमने अभी दो ही प्रॉपर्टीज सीखी है पर उनको सीखकर हमने एक बेसिक सा लेआउट प्रिपेयर कर लिया है दो प्रॉपर्टीज हमने सीखी एंड उनको यूज़ करके हमने काफी अच्छे-अच्छे जो कलर्स हैं वो अपनी वेब पेज के ऊपर ऐड कर दिए हैं अब हम चाहे तो इस वेब पेज को और थोड़ा सा सुंदर बनाने के लिए इनको सटल कलर्स दे सकते हैं कलर्स इन द सेंस अगर मैंने यहां पर ग्रीन दिया है तो पैराग्राफ को ग्रीन का ही कोई शेड दे देते हैं तो इस तरीके से ग्रीन का यह वाला शेड लेट्स सपोज मैंने इसे दे दिया सेव रिफ्रेश तो ये क्या हुआ ये डार्क ग्रीन हो गया ये थोड़ा सा लाइट ग्रीन हो गया बटन जो है इसको ग्रीन देने की बजाय इसका हम कलर चेंज करके उसको ग्रीन सेट कर सकते हैं तो यहां से मैंने इसको एक ग्रीन कलर सेट कर दिया और बैकग्राउंड कलर जो है बटन का इसको हम वाइट रख सकते हैं सेव रिफ्रेश तो ये क्या हुआ इस तरीके का बटन बन गया बैकग्राउंड को पूरा ब्लैक करने की बजाय मैं क्या कर सकती हूं एक ग्रे शेड दे सकती हूं सेफ रिफ्रेश तो ये क्या हुआ ये मेरा वेब पेज बन गया इसको ग्रे की जगह हम थोड़ा सा येलो टोन में अगर कलर दे दें यहां पर जाएंगे कलर पिकर पे और थोड़ा सा इसको येलो टोन में कलर देने की कोशिश करेंगे इस तरीके का कुछ हमने कलर दे दिया तो ये कुछ ऐसा वेब पेज मुझे दिखाई दे रहा है और इस तरीके से बहुत सारी स्टाइलिंग बहुत सारे कलर्स के साथ खेला जा सकता है तो ऐसे हम कलर और बैकग्राउंड कलर प्रॉपर्टीज को यूज करते हैं नेक्स्ट हम सीखने वाले हैं अपने कलर सिस्टम्स को तो अभी तक हमने जो कलर्स ऐड किए हैं वो कैसे ऐड किए हैं उनको वैल्यू सेट करने के लिए हमने नेम्स को यूज किया है यानी अगर मुझे रेड कलर सेट करना है तो मैंने रेड लिख दिया मुझे ब्लू कलर सेट करना है तो मैंने ब्लू लिख दिया मुझे ग्रीन कलर सेट करना है तो मैंने ग्रीन लिख दिया मुझे येलो कलर सेट करना है तो मैंने येलो लिख दिया पर बहुत सारे ऐसे कलर्स होंगे स्पेक्ट्रम के अंदर जिनके हो सकता है कोई नाम ना हो तो जिनके नाम नहीं है मतलब मुझे थोड़ा सा ग्रीन का ही शेड चाहिए पर थोड़ा सा डार्क ग्रीन चाहिए तो उसके लिए मैं क्या नाम यूज़ करूं कोई नाम सेट है ही नहीं तो उसके लिए हम कलर सिस्टम्स की बात करते हैं कलर सिस्टम्स के अंदर हम दो सिस्टम्स को डिटेल में पढ़ेंगे एक है मेरा आरजीबी सिस्टम और एक होने वाला है मेरा हेक्स सिस्टम अब इसके अलावा और भी काफी सारे एचएसएलए होता है या और भी सारे कलर सिस्टम्स होते हैं पर उनको हम इतना डिटेल में नहीं पढ़ेंगे क्योंकि सबसे ज्यादा जो फ्रीक्वेंसी मस होते हैं वो मेरे आरजीबी और मेरा हेक्स होते हैं तो आरजीबी को पढ़ने के लिए हम चले जाते हैं फिफ्थ क्लास के अंदर थर्ड क्लास के अंदर इनफैक्ट प्राइमरी क्लास के अंदर चले जाते हैं जब हम क्या पढ़ते थे बेसिक कलर्स के बारे में पढ़ते थे जब ड्राइंग का फर्स्ट लेक्चर होता था स्कूल के अंदर छोटे बच्चे होते थे और ड्राइंग क्लास में जाते थे तो टीचर सबसे पहले सिखाती थी हमें कलर थ्योरी के बारे में और वही सेम कलर थ्योरी हम थोड़ा सा सीखने वाले हैं तो हम तीन प्राइमरी कलर्स को पढ़ने वाले हैं एक हो जाएगा मेरा प्राइमरी कलर रेड एक हो जाएगा मेरा प्राइमरी कलर ग्रीन और एक हो जाएगा मेरा प्राइमरी कलर ब्लू और जितने भी हमारे कलर्स होते हैं ना वो इन्हीं तीनों कलर्स के मिक्सचर होते हैं यानी अगर आप रेड और ग्रीन को मिक्स कर देंगे तो आपके पास येलो आ जाएगा सीएसएस के अंदर ये सीएसएस के तीन प्राइमरी कलर्स हैं अगर आप रेड और ब्लू को मिक्स कर देंगे तो आपके पास पिंक या ये वायलेट सा शेड आ जाएगा अगर हम ब्लू और ग्रीन को मिक्स कर देंगे तो हमारे पास इस तरीके का शेड आ जाएगा और सारे कलर्स को मिक्स कर देंगे मतलब तीनों रेड ब्लू और ग्रीन को पूरा मिक्स कर दिया जाएगा इक्वल क्वांटिटी में तो हमारे पास वाइट कलर आ जाएगा तो इस तरीके से तीन कलर्स होते हैं जिनके मिक्सचर से हम सारे कलर्स को बना सकते हैं तो इन्हीं के मिक्सचर से हम सारे के सारे कलर्स को बनाने की कोशिश करते हैं तो जब भी मुझे कलर प्रॉपर्टी सेट करनी होती है तो आरजीबी का कौन से कलर का कितनी क्वांटिटी लेनी है उसको सेट करने के लिए हम लिखते हैं आरजीबी आरजीबी का मतलब होता है आर का मतलब होता है य यहां पर रेड जी का मतलब होता है यहां पर ग्रीन कलर एंड बी का मतलब होता है यहां पर ब्लू कलर और हर कलर को हम जीरो से लेकर 25 की रेंज में कितना भी ले सकते हैं जैसे मार्क्स होते हैं स्कूल के अंदर हमारा टेस्ट हो रहा होता है जीरो से लेकर 10 के बीच में आपको कितने भी नंबर दिए जा सकते हैं आपका एट भी हो सकता है तो आपका 10 भी हो सकता है तो आपका दो नंबर भी हो सकते हैं अब दो नंबर में पता है कि नंबर कम आए हैं 10 नंबर में पता है कि नंबर ज्यादा आए हैं वैसे ही यहां पर कलर की क्वांटिटी है कि अगर आपने रेड के लिए 255 लिख दिया तो मतलब रेड कलर सबसे ज्यादा है अगर ग्रीन के लिए अगर आपने रो लिख दिया तो मतलब ग्रीन कलर बिल्कुल भी नहीं है जैसे अगर मैं लिखूं आरजीबी तो इसमें हम तीन नंबर्स लिखते हैं 0 से 255 तक पहला नंबर होता है फिर दूसरा नंबर फिर तीसरा नंबर हम चाहे तो ऐसे भी लिख सकते हैं rb5 35 20 यह भी एक वैलिड कलर है पर हम क्या करेंगे सिंपल कलर्स के एग्जांपल लेंगे जैसे सबसे पहला जो कलर होता है वो रेड बताता है 0 से 255 में रेड की वैल्यू अगर 255 है मतलब आपने पूरा रेड ले लिया है जितना रेड था ने पूरा रेड कलर ले लिया फिर दूसरा होता है ग्रीन ग्रीन आपने जरो लिया मतलब ग्रीन बिल्कुल भी नहीं है फिर तीसरा होता है ब्लू ब्लू आपने जरो लिया ब्लू बिल्कुल भी नहीं है जब आप पूरा रेड ले लेंगे और ग्रीन और ब्लू बिल्कुल भी नहीं लेंगे तो कौन सा कलर बनेगा ऑब् वियस हमारे पास रेड कलर बनेगा तो अगर मुझे रेड कलर चाहिए तो मैं क्या लिखूंगी rgb2gray वाले हैं बैकग्राउंड कलर आरजीबी 255 0 एंड ़ सेव रिफ्रेश तो बैकग्राउंड कलर पूरा रेड हो गया उसी तरीके से अगर मुझे ग्रीन चाहिए तो ग्रीन के लिए क्या लिखेंगे आरजीबी पहला है मेरा रेड के लिए r रेड की वैल्यू रख दी ज़ीरो मतलब रेड कलर बिल्कुल भी नहीं चाहिए दूसरा होता है ग्रीन g के लिए तो g की वैल्यू रख दी 255 मतलब पूरा ग्रीन दे दो तीसरा कलर होता है ब्लू के लिए तो ब्लू की भी वैल्यू रख दी ज़ीरो अब जब रेड भी नहीं है और ब्लू भी नहीं है तो तीसरा कलर कौन सा बचा तीसरा कलर ग्रीन बचा तो पूरा का पूरा जो कलर सेट हो जाएगा वो ग्रीन पे सेट हो जाएगा तो rb2 का मतलब है ग्रीन कलर अब उसी तरीके से बहुत ही सिंपल एग्जांपल ले मान लेते हैं मुझे येलो बनाना है तो येलो कलर का आरजीबी कैसे फाइंड आउट करेंगे मान लेते हैं मुझे येलो कलर चाहिए तो येलो कलर के लिए मुझे पता है कलर थ्योरी क्या कहती है कि आप ग्रीन को और रेड को मिक्स कर देंगे तो येलो आ जाएगा येलो आ जाएगा तो यहां पर आरजीबी की क्या वैल्यू होनी चाहिए रेड और ग्रीन को मुझे मिक्स करना है तो रे को पूरा ले लो 255 ले लो ग्रीन को पूरा ले लो 255 ले लो और ब्लू को कितना ले लो रो ले लो क्योंकि ब्लू कलर की जरूरत है ही नहीं येलो में तो जब आरजीबी 255 250 हम करेंगे तो वो होगा मेरा येलो कलर इसको हम टेस्ट भी कर सकते हैं बैकग्राउंड कलर जाके येलो सेट करने के लिए हम लिखेंगे rgb2gray कम ज्यादा भी कर सकते हैं 255 से कम करके 200 कर दिया तो क्या हुआ रेड को कम कर दिया और मैंने ग्रीन को बढ़ा दिया तो अब ये जो मेरा येलो होगा इसमें थोड़ी ग्रीनि टोन आ जाएगी रिफ्रेश करेंगे तो क्या हुआ ग्रीनि टोन आ गई सेम चीज हम कर सकते हैं इसके साथ कि रेड अगर थोड़ा सा बढ़ा दिया और येलो थोड़ा सा कम कर दिया तो इसमें क्या होगा थोड़ा सा ऑरेंजिश हो जाएगा क्योंकि रेड और ग्रीन को जब आप मिक्स करते हैं तो उससे येलो बनता है पर येलो में आप रेड बढ़ा दें ग्रीन कम कर दें तो क्या होगा ऑरेंजिश कलर आएगा तो जब रिफ्रेश कर तो हल्का सा ऑरेंज बैकग्राउंड यानी हल्का सा डीप ऑरेंजिश येलो हमें दिखाई देगा तो ये कलर्स को समझने के लिए हम थोड़ा सा आरजीबी वैल्यूज को डिटेल में स्टडी करते हैं बट आरजीबी को हमें याद नहीं करना होता मतलब कोई जरूरत नहीं है कि आपको किसी भी कलर का आरजीबी नहीं आता हो हम क्या कर सकते हैं सिंपली पिंकिश चाहिए या रेडिश चाहिए तो हम यहां पर ऐसे जाकर स्क्रोल कर सकते हैं या मुझे ऑरेंजिश चाहिए या येलो चाहिए तो इस तरीके से मान लेते हैं मुझे पिंकिश चाहिए और मुझे थोड़ा सा ये वाला पिंक का जो शेड है डार्क पिंक ये मुझे अच्छा लग रहा है अब कलर पिकर क्या करेगा googlegroups.com इसको भी पढ़ने वाले हैं आरजीबी वैल्यूज इसने दे दी थोड़ा सा ज़ूम इन कर लेते हैं क्या वैल्यूज दी कि रेड जो है वो 191 है g34 है एंड मेरा जो ब्लू है वो 115 है तो इन वैल्यूज को हम चाहे तो कॉपी भी कर सकते हैं कंट्रोल सी एंड यहां पर अगर मुझे डार्क पिंक बैकग्राउंड सेट करना है तो कंट्रोल v अब ये डार्क पिंकिश मेरा बैकग्राउंड कलर हो गया वापस चले जाएंगे रिफ्रेश तो वो जो पिंकिश कलर था मैजेंटा टाइप या डार्क पिंक कलर वो मेरे बैकग्राउंड कलर में मैंने सेट कर दिया तो इस तरीके से आरजीबी वैल्यूज को हम यूज़ कर सकते हैं दोबारा बता रही हूं मैं रिपीट कर रही हूं वैल्यूज को याद करने की जरूरत नहीं है तो उसके लिए घबराना नहीं है बस बेसिक अंडरस्टैंडिंग होनी चाहिए कि किसी कलर में अगर रेड ज्यादा यूज हुआ है जैसे पिंक को बनाने के लिए मुझे पता है कि बाकी कलर से रेड ज्यादा यूज होना चाहिए रेड की वैल्यू यहां पर सबसे ज्यादा है उसके बाद मैंने अपनी ब्लू की वैल्यू रखी है लास्ट में सबसे कम वैल्यू है वो मेरी ग्रीन की है तो उससे मेरा पिंक कलर बना है तो कोई भी और कलर मुझे अगर सेट करना है तो सिंपली googlegroups.com नेक्स्ट कलर सिस्टम जिसकी हम बात करेंगे यह है मेरा हेक्स कलर सिस्टम हेक्स कलर सिस्टम क्या कहता है हेक्स कलर सिस्टम भी मेरे लिए आरजीबी वैल्यूज को ही सेट करता है बस ये आरजीबी को लिखने का छोटा तरीका हम समझ सकते हैं वैल्यू वैसे ही सेट होनी है बस छोटे तरीके से सेट होनी है मतलब कम टाइप करना पड़ता है हमें एक तरीके से तो हेक्साडेसिमल एक हमारा नंबर सिस्टम होता है जिसमें रो से लेकर 15 तक हमारे पास नंबर्स होते हैं जैसे हम डिजिट्स की बात करें मैथ की बात करें मैथ में कितने डिजिट होते हैं मैथ में हमारे पास 10 डिजिट होते होते हैं यानी रो से लेकर नाइन तक ऐसा नहीं है नाइन के अलावा आपके पास 10 अलग डिजिट हो जाता है 10 के अंदर भी एक वन आ जाता है एक रो आ जाता है तो वही सेम डिजिट्स आपके यूज हो रहे होते हैं तो जो हमारा 10 वाला सिस्टम होता है मैथ वाला सिस्टम इसको हम डेसीमल कहते हैं डेसीमल क्यों क्योंकि इसके अंदर डेक डेक का मतलब होता है 10 10 डिजिट्स यूज होते हैं ये मैं बहुत एक्स्ट्रा चीज आपको बता रही हूं इसका सीएसएस एचटीएमएल से कोई लेना देना नहीं है बट एज अ प्रोग्रामर हमें पता होना चाहिए कि डेसिमल या हेक्साडेसिमल का मतलब क्या होता है तो डेसिमल का मतलब होता है डे मतलब 10 यानी क्योंकि मैथ के अंदर रो से लेकर 9 तक 10 डिजिट्स होते हैं वैसे ही हमने आपने सुना होगा कंप्यूटर्स के अंदर एक बाइनरी नंबर सिस्टम होता है बाइनरी नंबर सिस्टम बिन से बना होता है बिन का मतलब होता है टू टू यानी इसके अंदर दो डिजिट्स होते हैं कौन से दो डिजिट्स एक रो एक वन तो दो ही डिजिट्स हैं जिससे सारे के सारे नंबर्स बनते हैं तो बाइनरी नंबर कैसा दिखता है 0 1 1 0 1 0 1 इस तरीके से अगर मैंने नंबर लिख दिया तो मुझे पता चलेगा ये एक बाइनरी नंबर है क्योंकि इसके अंदर सिर्फ रोज और वन यूज़ हो रहे हैं वैसे ही अगर मैंने 954 325 ऐसा कुछ लिख दिया तो यह क्या है यह एक डेसीमल नंबर सिस्टम है क्योंकि इसके अंदर रो से लेकर नाइन तक सारे डिजिट्स यूज़ हो रहे हैं वैसे ही एक और नंबर सिस्टम होता है जिसको हम कहते हैं हेक्साडेसिमल हेक्साडेसिमल के अंदर हेक्साडेसिमल का मतलब होता है हेक्सा डेक हेक्स का मतलब होता है सिक्स डेक का मतलब होता है 10 यानी इसके अंदर 16 डिजिट्स होते हैं मतलब मैथ के अंदर जो नंबर सिस्टम यूज़ होता है ना इसके अंदर उससे भी ज्यादा डिजिट्स हैं तो ये एक और ऊपर के लेवल का नंबर सिस्टम है और इसके अंदर कौन-कौन से डिजिट्स होते हैं शुरुआत वाले 10 डिजिट्स तो रो से लेकर नाइन तक होते हैं उसके बाद हमारे पास a आ जाता है b आ जाता है c आ जाता है डी आ जाता है e आ जाता है f आ जाता है तो ये तो 10 हो गए एंड बाकी के जो छह हैं वो a से लेकर f तक हैं तो जब हम a लिखते हैं इसका मतलब होता है 10 b लिखते हैं इसका मतलब होता है 11 एंड इसी तरीके से हम f लिखते हैं इसका मतलब होता है 15 तो रो से लेकर 15 तक हमारे पास टोटल 16 काउंटिंग रो से शुरू होती है जो रो को भी हम काउंट करते हैं तो टोटल हमारे पास 16 डिजिट्स होते हैं ये हो गया बेसिक एक्स्ट्रा जो मैंने बस बता दिया आपको बस एक एक्स्ट्रा नॉलेज के लिए मिल गया तो हेक्साडेसिमल नंबर सिस्टम को हम यूज़ करते हैं कलर्स को सेट करने के लिए आरजीबी वैल्यूज के अंदर क्या होता है अगर मुझे रेड कलर सेट करना है तो इसकी मैं रेंज दे सकती हूं 0 से 255 ग्रीन सेट करना है इसकी भी रेंज दे सकते हैं 0 से 255 ब्लू सेट करना है तो इसकी भी रेंज दे सकते हैं 0 से 255 पर यही सेम कलर अगर मुझे हेक्साडेसिमल के अंदर सेट करने हैं तो इसकी मैं रेंज दे सकती हूं 0 से लेकर f f ग्रीन की रेंज दे सकती हूं 0 से लेकर ff0000 से लेकर ff5 लिखने का जो प्रोसेस है वो बस हेक्साडेसिमल नंबर सिस्टम में कन्वर्ट हो गया f का मतलब हमने सीखा ही था हेस के अंदर कौन-कौन से डिजिट्स होते हैं रो से लेकर f तक डिजिट्स होते हैं तो डबल ए यहां पर है डबल जीरो है तो आरजीबी सिस्टम के अंदर अगर मुझे रो लिखना है तो उसी को हेक्स सिस्टम के अंदर हम रो 0 लिख देते हैं और आरजीबी सिस्टम के अंदर अगर मुझे 2555 लिखना था तो उसी को हटाकर अब अब हम इस सिस्टम के अंदर f ए लिख देते हैं तो मेरा जो हेक्स सिस्टम होता है उसके अंदर हम पहले दो डिजिट्स में अपनी r वैल्यू लिखते हैं फिर दो डिजिट्स में अपनी g वैल्यू लिखते हैं और फिर दो डिजिट्स में अपनी b वैल्यू लिखते हैं मतलब अगर मैंने लिख दिया f f 0 00 तो इसका क्या मतलब हुआ इसका मतलब हुआ f एफ यानी 255 पूरा का पूरा रेड कलर आ गया पूरा का पूरा रेड कलर मैंने ले लिया ग्रीन के लिए जीरो जीरो लिखा मतलब ग्रीन बिल्कुल भी नहीं लिया ब्लू के लिए जीरो जीरो लिखा मतलब ब्लू मैंने बिल्कुल भी नहीं लिया तो पूरा रेड ले लिया पर ग्रीन ब्लू बिल्कुल भी नहीं लिए तो उसका मतलब कलर क्या आएगा कलर मेरे पास पूरा रेड कलर आएगा तो कलर क्या है कलर है ff0000 इसका मतलब है एएफ पूरा आया है रेड पूरा आया है ये भी मेरा आरजीबी की फॉर्म में ही लिखा जाता है तो ये मेरा रेड कलर दिखाएगा अगर मुझे कलर ग्रीन लिखना है तो उसके लिए क्या करेंगे रेड को रो जीरो लिख देंगे ग्रीन को एफएफ लिख देंगे पूरा ले लेंगे ब्लू को लिखेंगे रो जीरो तो इससे मेरा कलर कौन सा आएगा इससे मेरा कलर आएगा पूरा का पूरा ग्रीन कलर और जब भी हेक्स नंबर्स को लिखना होता है हम हमेशा इसके सामने हैश लगाते हैं जो हैशटैग वाला हैश होता है जो हमारे कीबोर्ड प हमें दिख जाएगा वो वाला हैश हमें हमेशा लगाना होता है नहीं तो हमारे जो कलर्स हैं वो काम नहीं करेंगे हेक्स डेसिमल के अंदर तो इसको भी थोड़ा सा एक बार टेस्ट कर लेते हैं अगर मुझे रेड कलर सेट करना है बैकग्राउंड का बट हेक्स से सेट करना है तो उसके लिए मैं सिंपली क्या कर सकती हूं मैं लिखूंगी हैश ff0000 तो इससे क्या हुआ मेरा पूरा का पूरा रेड कलर सेट हो गया सेव रिफ्रेश तो यह रेड कलर सेट हो गया इसी तरीके से ग्रीन अगर सेट करना है तो ग्रीन सेट करने के लिए क्या करेंगे लिखेंगे 00 f00 उससे क्या हुआ पूरा का पूरा बैकग्राउंड कलर मेरा ग्रीन सेट हो गया अब एक बार छोटी सी एक्सरसाइज करते हैं अगर मुझे हेक्साडेसिमल को यूज़ करके येलो कलर बनाना है तो मैं आपको सजेस्ट करूंगी कि अभी आप वीडियो पॉज करिए और खुद से सोचिए कि हेक्साडेसिमल के अंदर येलो कलर कैसे बनेगा अब मैं बता देती हूं हेक्साडेसिमल के अंदर येलो कलर कैसे बनेगा अब हमने बात की थी कि येलो कलर क्या होता है येलो कलर को बनाने के लिए मुझे अपने ग्रीन एंड अपने रेड कलर को मिक्स करना पड़ेगा तो ग्रीन भी पूरा डालना पड़ेगा रेड भी पूरा डालना पड़ेगा अब सबसे पहले रेड डालने का मतलब है कि रेड पूरा आए तो उसके लिए हम लिखेंगे एफएफ तो ये रेड भर गया फिर ग्रीन पूरा आए तो उसके लिए भी लिखेंगे एए तो ये पूरा भर गया उसके बाद लिखेंगे ब्लू ब्लू हमें बिल्कुल भी नहीं चाहिए तो उसके लिए लिखेंगे जीरो जीरो तो मेरे येलो के लिए हेक्स कोड होगा एफ एफ एफ f00 इसको हम टेस्ट भी कर सकते हैं येलो के लिए यहां पर जाकर लिखेंगे हैश ए f एफ एफ 00 सेव एंड रिफ्रेश तो ये मेरा येलो बैकग्राउंड कलर सेट हो गया अब जैसे आरजीबी के अंदर बोला था कि वैल्यूज को याद करने की जरूरत नहीं है वैसे ही हेक्स कोड में भी वैल्यूज को याद करने की जरूरत नहीं है हम सिंपली क्या कर सकते हैं किसी भी कलर पिकर पे जा सकते हैं कलर पिकर के अंदर हम कोई भी कलर को पिक कर सकते हैं लेट्स सपोज मैंने ये ब्लू कलर पिक किया इसकी आरजीबी वैल्यूज भी मुझे दिख जाएंगी इसका हेक्स कोड भी दिख जाएगा अब इस हेक्स कोड को हम कर सकते हैं सेव कॉपी एंड इसको अगर मुझे बैकग्राउंड कलर की तरह सेट करना है तो ये मैंने बैकग्राउंड कलर यहां पे कॉपी पेस्ट कर दिया यहां पर रेड क्या है रेड है 03 फिर ग्रीन क्या है ग्रीन है f4 और ब्लू क्या है ब्लू है f स अब सी बड़ा होता है हमने बात की थी रो से लेकर नाइन तक जाते हैं फिर ए बी सी डी e ए तो सी फोर से बड़ा है मतलब यहां पर ये जो f स है ये मेरे f4 से बड़ा है तो मतलब ब्लू कलर यहां पर सबसे ज्यादा यूज हुआ है जो कि बहुत क्लियर दिखाई दे रहा है क्योंकि मेरा जो बैकग्राउंड कलर है वो पूरा का पूरा ब्लू होने वाला है हमने एक ब्लू कलर उठाया है इसको करेंगे रिफ्रेश तो मेरा ये ब्लू कलर बैकग्राउंड में मेरे पास आकर सेट हो गया तो इस तरीके से मेरे मल्टीपल कलर सिस्टम्स काम करते हैं जब भी हमें सिंपल कलर सेट करने होते हैं जैसे रेड हो गया ग्रीन हो गया ब्लू हो गया पिंक हो गया तो तब हम सिंपली उनके नेम्स यूज़ कर सकते हैं पर मान लो अगर हमें कॉम्प्लेक्टेड करने हुए या हम किसी वेबसाइट से कलर पैलेट होते हैं वेबसाइट्स के ऊपर जैसे मैं सर्च करूं कलर पैलेट तो जैसे कूलर्स के ऊपर हम जा सकते हैं कूलर्स काफी पॉपुलर फ्री वेबसाइट है तो यहां पर हम चाहे तो कलर पैलेट जनरेट कर सकते हैं फ्री में मैं बिल्कुल सजेस्ट नहीं करूंगी आप पे करें किसी कलर पैलेट के लिए तो इस वेबसाइट ने क्या किया पांच कलर्स का मुझे सुंदर सा कॉमिनेशन एक लाकर दे दिया और इसने बता दिया ये पांच कलर हैं जो एक दूसरे के साथ बहुत अच्छे सेट होते हैं तो इन पांच कलर्स को हम अपनी वेबसाइट के ऊपर यूज कर सकते हैं अब ये जो कलर है इनके कोई नाम नहीं है क्योंकि ये दो कलर तो शेड्स ऑफ ग्रे ही है तो इनके क्या है ये हेक्स कोड मुझे अवेलेबल है अगर मैंने ये कलर उठाया इसका हेक्स कोड मैंने कॉपी कर लिया और यहां पर अब मैंने पेस्ट कर दिया सिंगल हैशटैग लगाएंगे मैं क्या करूंगी रिफ्रेश करूंगी और यह ग्रेश कलर मेरे वेब पेज के ऊपर मेरे पास आ जाएगा तो इस तरीके से कलर पिकर वाली वेबसाइट होती है जैसे पर्पल वाला जो कलर है काफी सुंदर लग रहा है देखने में इसको हम सेट कर सकते हैं ए माय बैकग्राउंड कलर सेव रिफ्रेश तोय परपलिश कलर मेरे पास आ गया तो इस तरीके से मल्टीपल कलर्स आप सेट कर सकते हैं और ऐसी बहुत सारी वेबसाइट्स होंगी जैसे कैनवा भी है जो आपको कलर पैलेट एक तरीके से सुंदर सा जनरेट करके दे देता है मा लो आपको ये कलर पैलेट पसंद आ रहा है तो आप कोई और पैलेट जनरेट करना चाहते हैं तो इसने एक और जनरेट कर दिया कि ये सारे कलर्स एक दूसरे के साथ अच्छे जाते हैं तो कलर्स की भी अपने आप में कलर थ्योरी पूरी होती है कॉम्प्लीयंट के लिए टू बिकम अ बेटर डिजाइनर कलर पैलेट उनमें से एक है कि जब भी हम बड़े लेवल के प्रोजेक्ट्स की बात करते हैं या जब आप भी अपना कोई प्रोजेक्ट बना रहे हैं सीएसएस को यूज़ करके तो उसमें रैंडम कलर्स यूज़ करने से अच्छा है कि हम कॉम्प्लीयंट ग्राउंड लाइट है तो मेरे टेक्स्ट का कलर डार्क हो जाए या बैकग्राउंड डार्क है तो मेरे टेक्स्ट का कलर लाइट हो जाए या हम कलर पैलेट यूज कर सकते हैं यानी ऐसे कलर जो एक दूसरे के साथ अच्छे जाते हैं तो इस तरीके की चीजें हमारी सिंपल सी दिखने वाली वेबसाइट को और ज्यादा सुंदर बना देती हैं नेक्स्ट हम सीखने वाले हैं सीएसएस के अंदर सिलेक्टर्स को अभी तक हमने सिलेक्टर्स के अंदर सीखा था जैसे मैंने सिंपली h1 लिख दिया और अंदर मैंने प्रॉपर्टी वैल्यू का पेयर लिख दिया तो उस केस में क्या होगा सारी की सारी स्टाइलिंग h1 पे अप्लाई हो जाएगी या h1 की जगह अगर मैंने पैराग्राफ लिख दिया तो सारी की सारी स्टाइलिंग मेरी पैराग्राफ पे अप्लाई हो जाएगी पर सीएसएस के अंदर बहुत बहुत सारे सिलेक्टर्स अवेलेबल होते हैं जैसे इनमें से सबसे पहला सबसे बेसिक सिलेक्टर होता है मेरे पास यूनिवर्सल सिलेक्टर यूनिवर्सल सिलेक्टर होता है मेरा स्टार वाला सिंबल इसको हम एस्टरिस कहते हैं लिख करर दिखाऊं तो इसको हम एस्ट रिस्क कहते हैं यानी अगर आपको कूल प्रोग्रामर साउंड करना है तो स्टार की जगह हर बार आप एस्ट रिस्क बोलना शुरू कर दीजिए और ये जो एंड होता है इसको एंड की जगह आप एम परसेंट बोलना स्टार्ट कर दीजिए एम परसेंट यानी ए एम पीई आर एस ए एन डी क्योंकि ये इनके जो ऑफिशियल नाम होते हैं वो ऑफिशियल नाम है इन सिंबल्स के तो ये मेरा एस्टरिस है एस्टरिस के बाद मैं कर्ली ब्रेसेज लगाकर अगर कोई भी स्टाइल मतलब प्रॉपर्टी वैल्यू पेयर लिखूंगी तो वो पूरे की पूरे मेरे डॉक्यूमेंट पे सेट होगा यूनिवर्सल यानी जो मेरा पूरा डॉक्यूमेंट है उसके हर चीज के ऊपर वो स्टाइल सेट हो जाएगा जैसे अगर मैं यहां पर सारी स्टाइलिंग हटा दूं मैंने सारी स्टाइलिंग हटा दी इसको मैंने किया रिफ्रेश सिंपल एक हेडिंग दिख रही है पैराग्राफ दिख रहा है बटन दिख रहा है पर अगर मैं जाकर इसको कर दूं एस्टरिस यानी यूनिवर्सल सिलेक्टर और हर चीज का मैं अगर कलर कर दूं जाकर पिंक इसको करते हैं सेव रिफ्रेश तो यहां पे हेडिंग का भी कलर पिंक हो गया पैराग्राफ का भी पिंक हो गया और बटन का भी कलर पिंक हो गया तो जितनी भी चीजें आप अपने अब डॉक्यूमेंट के अंदर लिखने वाले हैं हर चीज का कलर पिंक हो जाएगा उसी तरीके से आप कोई और प्रॉपर्टी भी सेट कर सकते हैं जैसे यूजुअली डॉक्यूमेंट के शुरुआत से पहले अगर हम चाहते हैं कि मेरा फॉन्ट स्टाइल चेंज हो जाए या पूरी की पूरी वेब पेज के ऊपर एक ही फॉन्ट साइज आए तो इस तरीके की जो चीजें होती हैं वो हम यूनिवर्सल सिलेक्टर की हेल्प से सेट करते हैं यहां पर और थोड़ा सा कोई कलर दिखा देते हैं लेट्स सपोज मुझे अपने कलर सेट करना है ब्लू कलर से रिफ्रेश तो पूरे के पूरे मेरे वेब पेज का कलर ब्लू सेट हो गया सेकंड सिलेक्टर जिसको हम पढ़ते हैं यह मेरा एलिमेंट सिलेक्टर और अभी तक जिसको हम यूज करते आए हैं वो मेरे एलिमेंट सिलेक्टर ही होते थे एलिमेंट सिलेक्टर सारे के सारे एलिमेंट्स को सिलेक्ट कर लेते हैं जैसे यूनिवर्सल सिलेक्टर के बाद अगर मैंने लिख दिया कि मैं चाहती हूं मेरी हेडिंग्स का कलर सेट हो जाए ग्रीन तो सीएसएस किस तरीके से काम करता है सीएसएस ऊपर से लेकर नीचे तक स्टाइलिंग अप्लाई करता है यानी पहले तो यह यूनिवर्सल सिलेक्टर की स्टाइलिंग अप्लाई कर देगा जिस हिसाब से पूरा का पूरा डॉक्यूमेंट मेरा ब्लू हो जाएगा बट उसके बाद अगर आपने कोई और स्टाइल अप्लाई कर दिया तो फिर यह वाला स्टाइल अप्लाई होगा जो बाद में लिखा हुआ है उसकी हायर प्रायोरिटी होती है मतलब h1 के लिए पहले तो कलर मेरे पास ब्लू था बट हमने क्या किया बाद में h1 के लिए अलग से जाके कलर ग्रीन सेट कर दिया तो अब रिफ्रेश करेंगे तो h1 हेडिंग के लिए मेरा कलर जो आएगा वो ग्रीन कलर आ जाएगा तो इस तरीके से सीएसएस के अंदर जो चीज बाद में लिखी होती है उसकी ज्यादा प्रायोरिटी होती है यह चीज हमें हमेशा याद रखनी है कि पहले अगर आपने कोई प्रॉपर्टी सेट कर दी और उसको बाद में जाके आपने चेंज कर दिया तो जो आपने चेंज किया है बाद में जाके वो हमेशा अप्लाई हो रहा होगा सीएसएस के अंदर मान लेते हैं मुझे अगर अपने बटन के लिए जो कलर है उसको सेट करना है टू ब्राउन तो वो भी जाकर सेट हो जाएगा ये सेट हो गया टू ब्राउन तो ये जो मेरा h1 है ये जो मेरा बटन है जो हम टैग्स को यानी एलिमेंट्स के लिए जो हम स्टाइलिंग सेट करते हैं इसको हम कहते हैं हमारा एलिमेंट सिलेक्टर अब एलिमेंट सिलेक्टर सारे के सारे एलिमेंट्स पर वर्क करता है जैसे h1 में अगर मैंने मल्टीपल हेडिंग बनाई होती यहां पर मान लेते हैं मैंने तीन हेडिंग बनाई है दिस इज अ हेडिंग इसको हम कह देते हैं ये मेरी हेडिंग वन है ये मेरी हेडिंग टू है ये मेरी हेडिंग थ्री है तो तीन हेडिंग्स मैंने क्रिएट कीए हैं सेव रिफ्रेश तो मेरा जो ग्रीन कलर है वो तीनों हेडिंग्स पर अप्लाई होगा इवन दो मैंने h1 सिर्फ एक बार लिखा है पर जितने के जितने h1 होंगे सबके ऊपर सेम स्टाइल अप्लाई हो रहा होगा तीसरा सिलेक्टर जिसके बारे में हम पढ़ेंगे यह है मेरा आईडी सिलेक्टर आईडी सिलेक्टर क्या करता है हम अपने जितने भी एलिमेंट्स होते हैं एचटीएमएल के अंदर उनको एक स्पेसिफिक आईडी दे सकते हैं आईडी को हम नाम की तरह समझ सकते हैं आईडी यानी कोई भी यूनिक नेम जैसे क्लास होती है क्लास के अंदर एक स्टूडेंट का नाम अमन हो सकता है एक स्टूडेंट का नाम रजत हो सकता है एक स्टूडेंट का नाम अभिषेक हो सकता है तो अलग-अलग नाम होते हैं हर किसी के तो वैसे ही मैं चाहूं तो अपनी एव हेडिंग को एक आईडी दे सकती हूं एक नाम दे सकती हूं लेट्स सपोज इसको मैंने दिया हेडिंग वन या इस वन को बड़ा कर लेते हैं इसको मैंने हेडिंग वन नाम दे दिया य जो दूसरे वाला है इसको मैंने हेडिंग टू नाम दे दिया यह जो तीसरे वाला है इसको मैंने हेडिंग थ्री नाम दे दिया तो सबके क्या हुए सबके इंडिवि नाम हो गए अब अगर मैं चाहूं तो इस h1 को हटाकर हम क्या कर सकते हैं अगर मुझे नाम के हिसाब से इनको कोई सीएसएस प्रॉपर्टी सेट करनी है तो मैं लिखूंगी हैश और मैं लिखूंगी हेडिंग वन तो उससे क्या होगा वो एलिमेंट जिसकी आईडी हेडिंग वन है वो सिलेक्ट हो जाएगा उसके लिए अगर मैं कलर सिलेक्ट करूं तो लेट्स सपोज मैंने कलर दिया येलो सेव हेडिंग वन किसके लिए थी हेडिंग वन थी हेडिंग वन के लिए तो अब करेंगे रिफ्रेश तो हेडिंग वन का कलर सेट हो गया टू येलो अब अगर मुझे सेम स्टाइलिंग हेडिंग टू के लिए सेट करनी है तो मैं लिख सकती हूं हेडिंग टू उसके लिए मैं अपना कलर सेट कर सकती हूं तो लेट्स सपोज हमने कोई अलग कलर लेते हैं चॉकलेट कलर सेट कर दिया सेव रिफ्रेश तो ये हेडिंग टू के लिए मेरा ब्राउनिश सा चॉकलेटी कलर सेट हो गया एंड इसी तरीके से अगर मैं ले लूं हेडिंग थ तो यहां पर इसके लिए भी हम कलर सेट कर सकते हैं इसके लिए हम लेट्स सपोज मजेंटा कलर सेट करते हैं सेव रिफ्रेश तो हेडिंग थ्री का मेरे पास कलर सेट होकर आ गया मजेंटा तो इंडिविजुअल एलिमेंट्स को हम एक यूनिक आईडी दे सकते हैं उस हिसाब से प्रॉपर्टीज सेट हो सकती हैं अब हम चाहे तो ये आईडी मल्टीपल को भी दे सकते हैं जैसे मैं चाहूं तो हेडिंग थ्री उठाकर ये सेम आईडी मैंने इस पैराग्राफ को भी दे दी सेव रिफ्रेश तो क्या हुआ पैराग्राफ का भी कलर मैजेंटा सेट हो गया और इस हेडिंग का भी हो गया बट ये एक बैड प्रोग्रामिंग टेक्नीक है जो भी अच्छे प्रोग्रामर्स होते हैं वो जो हमारी एक आईडी होती है वो सिंगल एलिमेंट को ही जाती है मल्टीपल को हम सेम आईडी नहीं देते मतलब अगर मुझे मल्टीपल का कलर सेट करना है टू मजेंटा तो मैं उनको सेम आईडी देकर उनका कलर मजेंटा सेट नहीं करूंगी अगर मल्टीपल एलिमेंट्स के लिए हमें सेम प्रॉपर्टीज चाहिए तो उसके लिए हम सिलेक्टर यूज़ करते हैं अपना क्लास सिलेक्टर क्लास सिलेक्टर कहने का क्या मतलब है जैसे हमारी स्कूल में क्लास होती थी तो क्लास के अंदर बहुत सारे बच्चे होते थे तो किसी भी बच्चे से हम पूछते थे कौन सी क्लास के हो तो वो कहता क्लास मैं 12थ बी का हूं या मैं फिफ्थ ए का हूं तो इस तरीके से हर किसी को पता होता है मेरी क्लास का नाम ये है तो वैसे ही अगर मुझे मल्टीपल एलिमेंट्स को सेम आईडी सेट करनी होती है तो उन सब को हम सेम क्लास के अंदर डाल सकते हैं तो जैसे हम आईडी सेट करते थे वैसे ही हम क्लास सेट कर सकते हैं तो यहां पर इस हेडिंग थ्री और पैराग्राफ को मुझे सेम कलर देना है तो इनको मैं क्या कर सकती हूं इनको एक क्लास दे सकती हूं क्लास इक्वल टू इनको हम दे सकते हैं माय क्लास लेट्स सपोज इसका मैंने नाम रख दिया लद बहुत वेग नाम है माय क्लास से कुछ पता नहीं चल रहा बट लेट्स सपोज इनका नाम मैं ने माय क्लास रख दिया तो h1 को भी मैं सेम क्लास का नाम दे सकती हूं पैराग्राफ को भी मैं सेम क्लास का नाम दे सकती हूं इसको कर लेते हैं सेव और अब यहां पर हेडिंग थ्री की जगह मैं लिखने वाली हूं इनकी क्लास का नाम तो मैं क्लास का नाम लिखने के लिए लिखती हूं शुरुआत करती हूं डॉट के साथ डॉट और फिर क्लास का नाम व्हिच इज माय क्लास सेव एंड रिफ्रेश तो कोई चेंज नहीं आया मतलब इसको भी कलर मैजेंटा मिल गया इसको भी कलर मैजेंटा मिल गया बट अगर इन दोनों को हम सेम आईडी देते तो वो गलत तरीका होता पर इन दोनों को सेम क्लास देकर मैंने क्या किया दोनों के लिए जो स्टाइल था कलर वाला स्टाइल वो एक ही बार में ऐड कर दिया तो जब भी मल्टीपल एलिमेंट्स होते हैं जिनको हमें सेम स्टाइल देना होता है उनके लिए हम क्या कर सकते हैं मल्टीपल एलिमेंट्स के लिए सेम क्लास का हम नेम रख सकते हैं तो ये डिफरेंट डिफरेंट हमारे सिलेक्टर्स हैं जिनको हम यूज कर सकते हैं जिनको इनफैक्ट आने वाले लेक्चर के अंदर हम बार-बार बार-बार यूज कर रहे होंगे तो एक तरीके से य हमें याद ही हो जाएंगे पर इनमें से सबसे ज्यादा जो कॉमनली यूज्ड होते हैं वो हमारे एलिमेंट आईडी और क्लास सिलेक्टर्स हो रहे होते हैं अब नेक्स्ट हम करने वाले हैं प्रैक्टिस सेट वन जिसके अंदर जितने भी कांसेप्ट अभी हमने सीएसएस के अंदर पढ़े हैं जो हमने बेसिक सीएसएस की बात की है उनको हम थोड़ा सा रिवाइज करेंगे उनको हम थोड़ा सा प्रैक्टिस करने वाले हैं तो प्रैक्टिस सेट्स को सॉल्व करने के लिए आप क्या कर सकते हैं जैसे ही मान लेते हैं हमने क्वेश्चन वन को पढ़ा कि क्वेश्चन वन के अंदर हमें ये चीजें करनी है वैसे ही आपको सबसे पहले पॉज करना है वीडियो को और क्वेश्चन वन को खुद से सॉल्व करने की कोशिश करनी है थोड़ा सा हम टाइम लगा सकते हैं आपको 5-10 मिनट लग रहे हैं पहले इनिशियल स्टेज में सवालों को सॉल्व करने के लिए उसमें कोई परेशानी की बात नहीं है क् क्योंकि बिल्कुल अगर एज अ बिगनर आप टाइम लगा रहे हैं तो इतना टाइम देना बनता है और धीरे-धीरे हम सीखेंगे टाइम देकर ही और फिर आपको क्या करना है अगर आप सॉल्व कर लेते हैं तो वेरी गुड आप आकर क्या कर सकते हैं हम जो भी फाइनल आंसर निकालेंगे अपना प्रैक्टिस सेट जैसे सॉल्व करेंगे उसके साथ आपने जो क्रिएट किया उसके साथ टैली कर सकते हैं और अगर सॉल्व नहीं कर पाते कोई परेशानी आ जाती है तो उसमें भी कोई बात नहीं वेरी गुड परेशानी आएंगी तभी हम और ज्यादा चीजों को सीख रहे होंगे तो फिर आकर जिस भी प्रोसेस से हमने सॉल्व किया है वो हमारा थिंकिंग प्रोसेस बिल्ड करने में हेल्प करेगा तो उस तरीके से आकर हम हम पूरा का पूरा सॉल्यूशन देख सकते हैं तो शुरुआत करने वाले हैं अपने क्वेश्चन वन के साथ क्वेश्चन वन कह रहा है क्रिएट अ सिंपल डिव डिव क्या होता है डिव हमारा एक टैग होता था एचटीएमएल टैग सिंपल डिव टैग को हम क्रिएट कर सकते हैं डिव हमारा ब्लॉक टाइप का टैग होता था पर उसके डिटेल में नहीं जाएंगे बेसिकली एक टैग है जिसको कंटेंट डालने के लिए यूज करते हैं मुझे क्रिएट करना है एक सिंपल डिव जिसको मैं आईडी दे दूं बॉक्स अभी के लिए क्या करते हैं सिर्फ इतने को सॉल्व करने की कोशिश करते हैं मैं क्या करूंगी स्टाइल के अंदर से मैं पूरा का पूरा स्टाइलिंग हटा देती हूं इक्ड html4 के अंदर तो अगर आप सिर्फ लिखेंगे डॉट माय क्लास और लिख देंगे एंटर तो क्या होगा एक ऐसा डिव क्रिएट हो जाएगा जिसकी क्लास माय क्लास होगी और अगर आप लिख देंगे हैश माय आईडी और आप कर देंगे एंटर तो एक ऐसा डिव क्रिएट हो जाएगा जिसकी ऑटोमेटिक आईडी माय आईडी होगी तो एक शॉर्ट तरीका है ऐसे ही अगर मैं लिखूं हैश बॉक्स तो एक ऐसा डिव क्रिएट हो गया जिसके अंदर आईडी बॉक्स है तो मुझे बेसिक से लिखने की जरूरत नहीं पड़ी तो अगर ऑलरेडी एट्स आपके सिस्टम के अंदर इंस्टॉल्ड है तो ये वर्क कर जाएगा बट अगर नहीं भी है तो कोई बात नहीं इतना कोई बड़ा कोड नहीं है जिसके लिए बार-बार बार-बार हमें एमिट्स को यूज करना पड़े तो सिंपली क्या कर सकते हैं इस तरीके से मैंने एक डिव को क्रिएट कर लिया जिसकी आईडी है बॉक्स पार्ट टू कह रहा है ऐड सम टेक्स्ट कंटेंट इनसाइड द डिव मतलब कोई भी टेक्स्ट हम ऐड कर सकते हैं मतलब यहां पे हम कोई भी टेक्स्ट ऐड करने के लिए दिस इज अ सिंपल टेक्स्ट इस तरीके का कुछ लिख सकते हैं सेव रिफ्रेश तो ये डिव हो गया डिव के अंदर दिस इज अ सिंपल टेक्स्ट ये मेरे पास डिस्प्ले होकर आ रहा है तो इसका ओरिजिनल साइज कुछ इतना होगा आपके ब्राउजर के ऊपर छोटा सा डिस्प्ले होके आ रहा होगा इनफैक्ट अगर हमें जनरल बहुत सारा टेक्स्ट अगर डिस्प्ले करना होता है ना डिस्क के अंदर तो हम एक और एमिट यूज कर सकते हैं अगर मैं लिखूं लोरम लोरम क्या होता है लोरम इप्सम बेसिकली ये एब्रिवेशन है लोरम बहुत सारा अगर आपको रैंडम टेक्स्ट जनरेट करना है जिसका कोई मतलब नहीं है आप सिंपली लोरम लिख सकते हैं और इसको एंटर करेंगे तो बहुत सारा हमारे लिए टेक्स्ट जनरेट हो जाएगा इसको करेंगे सेव रिफ्रेश तो काफी सारा रैंडम टेक्स्ट इसने जन रेट कर दिया है जिसका कोई मतलब नहीं है पर टेक्स्ट आ गया है बेसिकली तीसरा यह कह रहा है सेट इट्स बैकग्राउंड कलर टू ब्लू किसका बैकग्राउंड कलर ब्लू सेट करना है हमारे डिव का तो डिव के लिए बैकग्राउंड कलर मुझे ब्लू सेट करना है तो मैं जाऊंगी style.css के अंदर मैंने देख लिया style.css ऑलरेडी मेरी index.htm फाइल से लिंक्ड है इसके अंदर मुझे डिव के लिए बैकग्राउंड कलर ब्लू सेट करना है तो मैं चाहूं तो इसका आईडी सिलेक्टर भी यूज़ कर सकती हूं मैं चाहूं तो सिर्फ डिव भी यूज़ कर सकती हूं क्योंकि एक ही डिव है मेरे पास पर क्योंकि हमने आईडी को को बनाया है तो आईडी सिलेक्टर यूज कर सकते हैं हम एक टाइम पर मल्टीपल सिलेक्टर्स भी यूज कर सकते हैं ऐसा कोई बाउंड नहीं है कि एक टाइम पर आप किसी एलिमेंट के लिए उसकी अगर आईडी बनाई है तो आपको आईडी सिलेक्टर यूज यूज करना है ऐसा कोई जरूरी नहीं है आप चाहे तो यूनिवर्सल सिलेक्टर भी यूज़ कर सकते हैं आप चाहे तो क्लास सिलेक्टर भी यूज़ कर सकते हैं आपने आईडी क्लास दोनों बनाए हैं तो आप दोनों में से कोई भी सिलेक्टर यूज कर सकते हैं मैं इसके लिए आईडी सिलेक्टर यूज करूंगी हैश बॉक्स इसको बैकग्राउंड कलर हम देना चाहते हैं टू ब्लू इसको कर लेते हैं सेव एंड रिफ्रेश तो ये डिव का जितना जो पार्ट था मतलब मेरा जो डिव वाला बॉक्स था उसको जो पार्ट मैंने दिया था उस सारे का जो बैकग्राउंड कलर सेट हो गया है दैट इज सेट टू ब्लू इस तरीके से पार्ट वन को हमने कंप्लीट कर लिया है अच्छे से एक और एडिशनल चीज बता देती हूं पार्ट वन वैसे असाइनमेंट का क्वेश्चन वन कंप्लीट हो गया है हम चाहे तो इसका कलर भी सेट कर सकते हैं टू वाइट तो ये और ज्यादा अच्छे से मुझे दिखाई देने लग जाएगा पर वो चीज करने की जरूरत नहीं है तो इसको कमेंट आउट कर लेते हैं कमेंट हमारे प्रोग्राम का वो पार्ट होते हैं जो एक्स्ट्रा होता है जो कोड के अंदर इंक्लूड नहीं किया जाता तो किसी भी पार्ट को कॉमेंट करने के लिए वीएस कोड के अंदर हम सिलेक्ट कर सकते हैं और सिलेक्ट करके हमें दबाना होता है कमांड या कंट्रोल और स्लैश कंट्रोल और स्लैश फॉरवर्ड स्लैश तो कंट्रोल स्लैश क्या होता है स्लैश ये वाला साइन होता है ये वाला साइन तो किसी भी को भी शॉर्टकट होता है कमेंट आउट करने का कि मैं दबा उं कमांड स्लैश अगर आप मैक के ऊपर हैं अगर आप विंडोज पर हैं तो कंट्रोल स्लैश कंट्रोल स्लैश किया तो एक कॉमेंट अब हट गया और कर दिया तो कॉमेंट जो भी कॉमेंट्स होते हैं प्रोग्राम एम के अंदर वो यूजुअली ग्रीन से हाइलाइटेड होता हैं मतलब ये फालतू पार्ट है कोड का ये एग्जीक्यूट नहीं होने वाला अब इसको सेव करूं रिफ्रेश तो अब कलर वाइट नहीं होगा क्योंकि उसको मैंने एक्स्ट्रा पार्ट में फालतू पार्ट में एज अ कॉमेंट बना दिया है अपने कोड का आप चाहे तो कॉमेंट्स को सीएसएस के अंदर लिखने के लिए हम लिख सकते हैं स्लैश स्टार और फिर हम कोई भी दिस इज अ कमेंट इस तरीके से लिख सकते हैं फिर दोबारा से स्टार स्लैश तो ये क्या हो गया ये एक और एक्स्ट्रा कमेंट हो गया जिसको मैंने क्रिएट कर दिया है तो इस तरीके से कमेंट्स भी आप क्रिएट कर सकते हैं अपने कोड के अंदर अब आ जाते हैं प्रैक्टिस सेट के अंदर अपने पार्ट टू के ऊपर क्वेश्चन टू क्वेश्चन टू कह र है क्रिएट थ्री हेडिंग्स विद h1 h2 h3 गिव देम ऑल अ क्लास हेडिंग तो तीन हेडिंग मुझे क्रिएट करनी है डिव के बाद इसको क्रिएट कर लेते हैं पहली है मेरी h1 तो इसको लिख देते हैं हेडिंग वन दूसरी होने वाली है मेरी h2 तो यहां पर h2 लिख देते हैं दिस इज़ माय हेडिंग टू तीसरी होने वाली है मेरी h3 सो दिस इज माय हेडिंग थ्री तीनों को करते हैं सेव रिफ्रेश तो ये मेरी h1 है जो सबसे बड़ी हेडिंग होती है फिर h2 फिर h3 थोड़ा सा हम चाहे तो जूम इन भी कर सकते हैं तोय मेरी h1 h2 h3 तीन हेडिंग्स क्रिएट हो गई अब मुझे बोला है तीनों को सेम क्लास दे दो हेडिंग तो इसको भी मैं क्लास देने वाली हूं हेडिंग एंड सेम क्लास हम h2 को दे देंगे सेम क्लास हम h3 को दे देंगे इसको कर लेते हैं सेव एंड नेक्स्ट बोला है सेट कलर ऑफ हेडिंग टू रेड यानी जो मेरी क्लास हेडिंग है उसका कलर रेड सेट करना है तो रेड सेट करने के लिए मैं यहां जा सकती हूं डॉट क्लास से मैं सेलेक्ट करूंगी और इसका जो कलर है वो मैं सेट कर सकती हूं टू रेड सेव रिफ्रेश तो यहां डॉट क्लास लिख दिया मैंने डॉट क्लास की जगह क्लास का नाम लिखना होता है तो डॉट क्लास या हैश आईडी नहीं लिखना होता हमें तो इसको कर देते हैं सेव रिफ्रेश तो ये क्या हुआ मेरे रेड कलर की हो गई है तीनों की तीनों हेडिंग्स अब एक और स्पेशल चीज हम कर सकते हैं यहां पर कि अगर मैं डिंग को यूज़ ना करूं इसको मैंने कॉमेंट आउट कर दिया मतलब हटा दिया आपने कोड से अगर मैं सिंपली लिखूं h1 h2 h3 और फिर मैं लिखूं कलर सेट टू रेड सेव रिफ्रेश तो भी मेरा कलर रेड सेट हो जाएगा तो सिलेक्टर्स कॉमा के साथ भी वर्क करते हैं मतलब मुझे एक ही प्रॉपर्टी है जो मल्टीपल एलिमेंट्स को अप्लाई करवानी है मतलब h1 को भी अप्लाई करवानी है h2 को भी अप्लाई करवानी है h3 के लिए भी अप्लाई करवानी है सेट करनी है तो मैं क्या कर सकती हूं बार-बार h1 अलग h2 अलग h3 अलग लिखने की बजाय h1 h2 h3 लिखकर हम तीनों के लिए एक साथ उनके कलर को सेट कर सकते हैं एज रेड तो ये एक अलग तरीका होगा इस सेम सवाल को सॉल्व करने का अब आ जाते हैं अपने तीसरे सवाल की तरफ तीसरा सवाल कह रहा है क्रिएट अ बटन एंड सेट इट्स बैकग्राउंड कलर टू ग्रीन तो अलग-अलग पार्ट दिए हैं सबसे पहले तो एक बटन क्रिएट कर लेते हैं इक्सड सकते हैं क्लिक मी तो यह बाय डिफॉल्ट एक बटन मेरे पास क्रिएट होकर आ गया क्लिक करने से इसको अभी कुछ होगा नहीं क्योंकि कोई फंक्शनालिस क्रिप्ट नहीं सीखी हमने तो क्लिक मी इसको करना है मुझे अब बटन के लिए मुझे क्या करना है तीन पार्ट्स दिए हुए हैं इसका बैकग्राउंड कलर सबसे पहले तो सीएसएस स्टाइल शीट से सेट करना है ग्रीन मतलब ये जो मेरी स्टाइल डॉट सीएसएस है इसके अंदर जाकर बटन के लिए इसका हम बैकग्राउंड कलर सेट कर सकते हैं टू ग्रीन सेव कर लिया रिफ्रेश कर लिया तो इस बटन का बैकग्राउंड कलर सेट हो गया ग्रीन सेकंड पार्ट में करना है कि स्टाइल टैग को यूज करके इसका कलर सेट करना है बैकग्राउंड कलर ब्लू मैं क्या करूंगी मैं स्टाइल ड सीएसएस के अंदर जाऊंगी यहां पर स्टाइल टैग बनाएंगे स्टाइल ड सीएसएस नहीं हमारा जो हेड टैग होगा एचटीएमएल के अंदर उसके अंदर जाकर हमने स्टाइल टैग को बनाया और इसके अंदर कलर सेट करने के लिए मुझे क्या करना है वही सिलेक्टर यूज करना है बटन सिलेक्टर यूज कर लिया और इसके लिए बैकग्राउंड कलर हम सेट कर देंगे टू ब्लू सेव रिफ्रेश अब क्या हुआ एक स्पेशल चीज हम नोटिस करेंगे style.css कह रहा है बटन का बैकग्राउंड कलर ग्रीन होना चाहिए इक्सड html.com html.com इसमें पहले आता मेरा स्टाइल टैग जिसकी हमने पहले सुन ली उसके बाद आता मेरा स्टाइल ड सीएसए जिसकी बात हम बाद में सुन रहे हैं और बाद में क्या बात सुनी होगी हमने बाद में बात सुनी होगी ग्रीन कलर को सेट करने की तो स्टाइल टैग और स्टाइल ड सीएए में किसकी बात सुनी जाती है उसकी बात सुनी जाती है जो हेड टैग के अंदर बाद में लिखा जाता है तो ये भी बहुत इंपॉर्टेंट चीज है इसीलिए एडवाइस किया जाता है कि मल्टीपल तरीकों से स्टाइलिंग ऐड नहीं करनी स्टाइलिंग ऐड करनी है सिर्फ एक तरीके से व्हिच इज माय स्टाइल सीएए ताकि हम कई बार क्योंकि कंफ्यूजन हो जाता है हम कई बार भूल जाते हैं कि स्टाइल टैग बाद में ऐड हुआ है या पहले ऐड हुआ है तो इसीलिए मल्टीपल तरीके से सेम स्टाइलिंग को हमें चेंज नहीं करना चाहिए एक तरीके से एग्जांपल है ये प्रैक्टिस क्वेश्चन तीसरी चीज क्या करनी है तीसरी चीज है बैकग्राउंड कलर को बटन के मुझे पिंक सेट करना है यूजिंग इनलाइन स्टाइल तो बटन के बैकग्राउंड कलर को इनलाइन स्टाइल से सेट करने के लिए मैं लिखूंगी स्टाइल इक्वल टू डबल कोट जैसे हम कलर रेड लिखते थे वैसे ही अब प्रॉपर्टी का नाम हो गया बैकग्राउंड कलर कोलन हम लिख सकते हैं रेड या रेड की जगह मुझे इसको सेट करना है टू पिंक इसको करते हैं सेव रिफ्रेश तो इसका कलर चेंज हो गया है टू पिंक अब इसमें ऑर्डर क्या आ रहा है ऑर्डर यही रहा कि आप चाहे स्टाइल डट सीएसएस बना लीजिए चाहे आप स्टाइल टैग बना लीजिए अगर आपने कहीं भी इनलाइन स्टाइल को ऐड कर दिया तो उसकी सबसे ज्यादा प्रायोरिटी होगी क्योंकि वो एलिमेंट के साथ लिखा जाता है इसीलिए इनलाइन स्टाइल के अंदर जो स्टाइल लिख दि वही मुझे दिखाई देगा तो बैकग्राउंड कलर में ने तीन जगह सेट किया है बटन के लिए यहां पर किया इनलाइन स्टाइल में स्टाइल टैग के अंदर किया है स्टाइल सीएए के अंदर किया है बट प्रायोरिटी सबसे ज्यादा किसकी होती है प्रायोरिटी होती है मेरे इनलाइन स्टाइल की इसीलिए इस तरीके से स्टाइल ऐड हमें नहीं करना होता स्टाइल टैग से भी ऐड नहीं करना होता जब तक इमरजेंसी ना हो जाए हमेशा क्या करते हैं स्टाइल ड सीएसएस को यूज करेंगे तो हमारी सही स्टाइलिंग मेरे बटन के ऊपर अप्लाई होगी तो इस तरीके से प्रैक्टिस सेट वन को हमने कंप्लीट कर लिया है एंड इससे काफी सारे हमने स्टेप्स लिए हैं सीएसएस की तरफ एंड आई होप कि आप काफी ज्यादा एंजॉय कर रहे हैं नेक्स्ट हम बढ़ने वाले हैं सीएसएस के अंदर और डिफरेंट टेक्स्ट प्रॉपर्टीज की तरफ नेक्स्ट हम डिस्कस करने वाले हैं कुछ टेक्स्ट रिलेटेड प्रॉपर्टीज को तो सबसे पहली प्रॉपर्टी जिसको हम डिस्कस करेंगे इसका नाम है टेक्स्ट अलाइन टेक्स्ट अलाइन कहने का मतलब है कि हमारा जो टेक्स्ट है जितनी भी टेक्चुअल इंफॉर्मेशन है ए बी सी डीई एफज जितना भी हमने मटेरियल लिख रखा है कंटेंट लिख रखा है वेब पेज के ऊपर उसकी डायरेक्शन क्या होने वाली है तो टेक्स्ट अलाइन के अंदर सबसे तीन जो पॉपुलर हम इसको वैल्यूज असाइन कर सकते हैं उनमें से पहला होता है हमारा लेफ्ट अलाइन दूसरा होता है राइट अलाइन तीसरा होता है सेंटरल अलाइन इन तीनों को एक बार हम चेक करने वाले हैं हम क्या करेंगे इक्सड बिकली माय एमेट और इसमें आप मल्टीप्ला बाय 10 करके अगर एंटर कर दे तो 10 टाइम्स रैंडम टेक्स्ट मेरे लिए जनरेट हो जाता है तो इस तरीके से जनरेट किया है बाकी आप कोई भी सेंटेंस कोई भी पैराग्राफ कुछ भी लिख सकते हैं यहां पर बिल्कुल फर्क नहीं पड़ता कि अंदर कंटेंट क्या लिखा हुआ है बेसिकली बहुत सारा टेक्स्ट मैंने जनरेट कर लिया अब ये जो टेक्स्ट है बाय डिफॉल्ट लेफ्ट अलाइन होता है लेफ्ट अलाइन मतलब अभी ये लेफ्ट की तरफ अलाइन है मतलब सारी की सारी जो लाइने हैं वो लेफ्ट से शुरू हो रही है यूजुअली हम नोटबुक के ऊपर भी लिखते हैं तो इंग्लिश जब भी लिखी जा आती है तो वो लेफ्ट से शुरू करके लिखी जाती है हिंदी जब भी लिखी जाती है तो भी वो लेफ्ट से लिखी जाती है पर अगर मैं चाहती हूं कि इस टेक्स्ट का अलाइन मेंट जो पैराग्राफ टैग के अंदर लिखा हुआ है वो राइट की तरफ हो जाए तो मुझे क्या करना है style.css के अंदर जाकर मैं सेलेक्ट करूंगी अपने पैराग्राफ टैग को और यहां हम लिखेंगे टेक्स्ट अलाइन टेक्स्ट अलाइन को वैल्यू हम दे देंगे राइट इसको कर लिया सेव एंड रिफ्रेश तो अब ये सारा का सारा टेक्स्ट आपको दिख रहा होगा लेफ्ट साइड में मेरे पास थोड़ी सी खाली स्पेस बच गई है और सारा का सारा टेक्स्ट अब राइट की तरफ अलाइन हो गया है मतलब राइट की तरफ पूरी की पूरी जगह एंड तक भर रही है यहीं पर अगर मैं राइट की जगह इसकी वैल्यू को सेट कर दूं टू लेफ्ट तो ये सारा का सारा टेक्स्ट अब लेफ्ट की तरफ अलाइन हो जाएगा और अगर मैं इसकी वैल्यू को सेट कर दूं टू सेंटर तो सारा का सारा टेक्स्ट मेरा सेंटर में जाकर अलाइन हो जाएगा तो ये तीन सबसे पॉपुलर वैल्यू होती है टेक्स्ट अलाइन के लिए जितना भी हमारा टेक्स्ट होता है फिर चाहे वो हेडिंग के लिए हो या पैराग्राफ के लिए जैसे अगर मैं यहां पर एक h1 हेडिंग क्रिएट करूं हेडिंग इसको कर लेते हैं सेव एंड रिफ्रेश तो बाय डिफॉल्ट सारी हेडिंग लेफ्ट की तरफ अलाइन होती है बट हेडिंग h1 के लिए आई कैन चेंज द टेक्स्ट अलाइन टू राइट तो क्या होगा ये मेरी हेडिंग राइट की तरफ शिफ्ट हो जाएगी एंड अगर इसी को मैं सेंटर कर दूं तो मेरी हेडिंग सेंटर में आकर शिफ्ट हो जाएगी तो इस तरीके से अपना टेक्स्ट मेरे डॉक्यूमेंट के हिसाब से कहां पर जाकर प्लेस होना है उसको भी हम कंट्रोल कर सकते हैं अब ये जो हेडिंग है ये जो टेक्स्ट अलाइन प्रॉपर्टी है ये प्रॉपर्टी पूरे के पूरे डॉक्यूमेंट के हिसाब से वर्क नहीं करती ये आपके पेरेंट के हिसाब से वर्क करती है पेरेंट कहने का मतलब है कि अगर मैंने बाहर की तरफ एक टैग लिख दिया एचटीएमएल में मान लेते हैं मेरा डिव टैग है डिव टैग के अंदर मैंने एक पैराग्राफ टैग बना दिया कुछ इस तरीके से तो क्योंकि डिव टैग के बिल्कुल डायरेक्टली अंदर पैराग्राफ टैग आ रहा है तो मैं कह सकती हूं डिव टैग पहले आया और उसके डायरेक्टली अंदर मेरा पैराग्राफ टैग आया तो डिव टैग को हम इसका पेरेंट कह सकते हैं और पैराग्राफ को हम चाइल्ड कह सकते हैं अगर आपने ऑलरेडी कहीं पर प्रोग्रामिंग की हुई है मान लेते हैं आपने सी में करी हुई है या c+ प में करी हुई है या जावा में करी हुई है तो ऐसे कांसेप्ट आपने देखे होंगे बट अगर नहीं भी करी हुई तो कोई परेशानी की बात नहीं है ये एडिशनल कांसेप्ट है क्योंकि कुछ ऐसी चीजें होती हैं जो आप कोई भी प्रोग्रामिंग लैंग्वेज या कुछ भी सीख ले कोडिंग के अंदर वहां पर कॉमन रहती है तो ये वैसी सीही कोई चीज है पेरेंट चाइल्ड का रिलेशन क्या होता है हायरा कियल रिलेशन होता है कि एक जनरेशन से नीचे वाली जनरेशन होती है वैसे ही टैग्स के अंदर भी जो मेरा बाहर वाला टैग होता है उसको हम पेरेंट टैग कह देते हैं अंदर वाले टैग को हम चाइल्ड टैग कह देते हैं तो यहां पर index.htm के अंदर बाहर है मेरा बॉडी टैग उसके अंदर मेरा h1 टैग है तो मतलब h1 चाइल्ड अगर होगा तो बॉडी टैग उसका पेरेंट हो जाएगा तो अगर h1 के लिए मैंने टेक्स्ट अलाइन सेंटर कर दिया तो बॉडी क्या है बॉडी है पूरा डॉक्यूमेंट तो h1 क्या करेगा h1 पूरे डॉक्यूमेंट के सेंटर में आ जाएगा पर अगर इसका पैरेंट कोई और टैग होता तो ये उस टैग के हिसाब से अपने अलाइन मेंट को चेंज करता पूरे के पूरे डॉक्यूमेंट के हिसाब से अलाइन मेंट चेंज नहीं होता ये हमें ध्यान रखना है पेरेंट के हिसाब से अलाइन मेंट चेंज होता है बट वह थोड़ा सा एक्सट्रीम डिटेल वाली चीज है इतना ज्यादा डिटेल में हम नहीं जा रहे होंगे बेसिकली अगर मुझे टेक्स्ट को अलाइन करना है तो हम यह कर सकते हैं अब जैसे हमारे डिफरेंट डिफरेंट आपने सॉफ्टवेयर चलाए होंगे विंडोज भी है विज पहले सेन आया था फिर एट आया था फिर 10 आया था अब ws1 आया है तो इस तरीके से हमारी सीएसएस में भी मल्टीपल एडवांसमेंट्स आए हैं तो अभी जो रिसेंट सबसे नया वाला सीएसएस है वो है मेरा सीएसएस 3 सीएसएस 3 के अंदर टेक्स्ट अलाइन में दो और वैल्यूज ऐड हुई हैं एक है मेरी स्टार्ट वैल्यू और एक है मेरी एंड वैल्यू अगर मेरा सारा का सारा टेक्स्ट इंग्लिश में लिखा हुआ है या सारा का सारा टेक्स्ट मेरा हिंदी में लिखा हुआ है किसी वेब पेज के ऊपर तो उसमें लेफ्ट का और स्टार्ट का सेम ही काम होता है लेफ्ट मतलब स्टार्ट होता है हिंदी के अंदर भी लेफ्ट का मतलब स्टार्ट होता है पर अगर आप मान लेते हैं उर्दू जैसी लैंग्वेज लिख रहे हैं या आप कोई और लैंग्वेज लिख रहे हैं जो बैकवर्ड्स लिखी जाती है मतलब राइट से लेफ्ट लिखी जाती है तो उस लैंग्वेज के अंदर लेफ्ट का मतलब होगा एंड और अगर आपने वहां पर राइट लिख दिया तो उसका मतलब मतलब होगा स्टार्ट तो मल्टीपल लैंग्वेजेस में कंटेंट वेबसाइट्स के ऊपर अवेलेबल होता है जैसे उर्दू हो गई या कोई और लैंग्वेज हो गई तो उस हिसाब से एक नया मॉडिफिकेशन आया था सीएसएस 3 में तो उस मॉडिफिकेशन को अगर हमें टेस्ट करना है तो हम अपनी इंग्लिश पर ही टेस्ट कर सकते हैं ये मेरा इंग्लिश का कंटेंट है इसके अंदर अगर पैराग्राफ के लिए मैं टेक्स्ट अलाइन स्टार्ट कर दूं तो स्टार्ट का मतलब क्या है इंग्लिश के लिए स्टार्ट का मतलब है लेफ्ट तो रिफ्रेश करेंगे मेरा सारा कंटेंट लेफ्ट की तरफ चला जाएगा और अगर इसको मैं एंड कर दूं तो इसका मतलब है राइट तो मेरा सारा कंटेंट राइट की तरफ च आ जाएगा नेक्स्ट टेक्स्ट प्रॉपर्टी जिसको हम पढ़ने वाले हैं इसका नाम है टेक्स्ट डेकोरेशन टेक्स्ट डेकोरेशन का मतलब है टेक्स्ट के ऊपर डेकोरेशन किस तरीके से डेकोरेशन यहां पे वो बर्थडे पार्टी वाली बलून वाली केक वाली डेकोरेशन नहीं कह रहे टेक्स्ट के ऊपर बेसिकली लाइंस किस तरीके से सेट होती हैं जैसे अगर मुझे किसी टेक्स्ट के ऊपर अंडरलाइन को सेट करना है या ओवरलाइन को सेट करना है या उसको लाइन थ्रू देनी है तो हम कैसे दे सकते हैं जैसे मेरी ये हेडिंग है इस हेडिंग को अगर मुझे अंडरलाइन करना है तो h1 के लिए मैं स्टाइल सीएए में टेक्स्ट डेकोरेशन प्रॉपर्टी को जाकर सेट कर सकती हूं टू अंडरलाइन इसको कर लेंगे सेव एंड रिफ्रेश तो क्या होगा मेरी हेडिंग के ऊपर अंडरलाइन आ जाएगी एक होती है अंडरलाइन जैसे अंडर होता है वैसे ओवर होता है मतलब टेक्स्ट के ऊपर अगर लाइन देनी हो तो उसके लिए सिंपली यहां पर जाकर चेंज कर सकते हैं टू ओवरलाइन और मेरे टेक्स्ट के ऊपर एक लाइन अपीयर करने लग जाएगी अगर मुझे किसी टेक्स्ट को काट कर दिखाना है तो उसके लिए हम लाइन थ्रू यूज़ करते हैं इसको कर देंगे लाइन थ्रू सेव रिफ्रेश तो क्या होगा किसी भी कंटेंट के अंदर से मेरी एक लाइन चली जाएगी व्हिच इज माय लाइन थ्रू तो कट हो जाएगा कंटेंट अब ये जो है ये चीज एक और स्पेशल केस के लिए हम यूज़ करते हैं टेक्स्ट डेकोरेशन को वैसे इतना ज्यादा यूज नहीं किया जाता मोस्टली आप अंडरलाइन के लिए यूज कर सकते हैं पर उससे भी ज्यादा इसका बेटर एक यूज केस ये होगा कि अगर मान लेते हैं आपने कोई एंकर टैग क्रिएट किया एंकर टैग क्या होते हैं हमारे लिंक्स होते हैं ए से हम अपना एंकर टैग क्रिएट करते हैं लेट्स सपोज यहां पर है क्लिक मी तो ये एक लिंक मैंने बना दिया यहां पर ये मेरा लिंक क्रिएट हुआ अभी एक एंकर टैग है जिसके अंदर कोई लिंक नहीं है तो एचआरएफ से हम क्या कर सकते हैं एंकर टैग को कोई भी लिंक दे सकते हैं लेट्स सपोज मैंने इसको लिंक दिया अभी हम क्या क्लिक होगा कैसे क्लिक होगा वो चीजें हम एचटीएमएल के अंदर पढ़ते हैं अभी सीएसएस पर फोकस करते हैं क्लिक मी जैसे ये लिंक हो गया जितने भी लिंक्स होते हैं एचटीएमएल के अंदर बाय डिफॉल्ट उन पर सब पर एक अंडरलाइन आती है बाय डिफॉल्ट हमेशा अंडरलाइन आएगी अगर आप एंकर टैग क्रिएट करेंगे एटीएमएल के अंदर तो पर मुझे अंडरलाइन अगर नहीं चाहिए तो उसके लिए हम क्या कर सकते हैं style.css के अंदर एंकर टैग को सेलेक्ट करेंगे और टेक्स्ट डेकोरेशन जो प्रॉपर्टी है ना उसकी वैल्यू को सेट कर देंगे टू नन जैसे ही टेक्स्ट डेकोरेशन को नन सेट कर दिया नन का मतलब होता है कुछ भी नहीं तो इसको अब सेव करके अगर रिफ्रेश करें तो इसकी अंडरलाइन गायब हो जाती है टेक्स्ट डेकोरेशन को नन सेट करने का मतलब है ना मुझे अंडरलाइन चाहिए ना मुझे ओवरलाइन चाहिए ना मुझे लाइन थ्रू चाहिए तो सिंपली सारे के सारे एंकर टैग्स और लिंक्स के नीचे से अंडरलाइन गायब हो जाएगी तो ये सबसे ज्यादा इंपॉर्टेंट इसका यूज केस होता है जब भी हम टेक्स्ट डेकोरेशन की बात करते हैं अब इसके अलावा टेक्स्ट डेकोरेशन के साथ और भी काफी सारे मॉडिफिकेशन किए जा सकते हैं जैसे टेक्स्ट डेकोरेशन एक काफी अच्छा मैं रिसोर्स आपके साथ शेयर करती हूं फ्री रिसोर्स जैसे अगर किसी भी टॉपिक को के अंदर मुझे जाकर पढ़ना है तो एक वेबसाइट है जिसका हम कहते हैं एमडीएन एमडीएन क्या है प्रोग्रामर्स ने ही बनाई है एक तरीके से तो ऑफिशियल वेबसाइट नहीं है बट एमडीएन के ऊपर काफी सारी चीजें हमें सीखने को मिल जाती है रिलेटेड टू सीएसएस तो मैं सर्च कर सकती हूं एमडीए और उसके बाद जो भी टॉपिक मुझे सीखना है मान लेते हैं मुझे टेक्स्ट डेकोरेशन के बारे में सीखना है तो एमडीए टेक्स्ट डेकोरेशन मैंने सर्च किया तो ये mozilla.org developer.net है टेक्स्ट डेकोरेशन से से रिलेटेड सारी की सारी जो डिटेल्स हैं वो इस पेज पे मुझे मेंशन करके मिल जाएंगी तो बहुत सारी सीएसएस ऐसी है जिसको आप डॉक्यूमेंटेशन के थ्रू कर रहे होंगे तो इस तरीके की डॉक्यूमेंटेशन को आप हमेशा यूज करेंगे जब भी अपने प्रोजेक्ट्स पर काम करेंगे तो जब भी किसी चीज में डाउट हो कोई प्रॉपर्टी याद नहीं आ रही है कुछ सर्च करना है हम सिंपली एमडीएन को सर्च कर सकते हैं उस चीज के नाम के साथ और पूरा का पूरा पेज उसके साथ खुल जाएगा तो टेक्स्ट डेकोरेशन में यहां पर इसने बता दिया कि यहां पर अंडरलाइन होता है मेरे पास ओवरलाइन होता है नन होता है पर इसके अलावा हमारे पास और भी ऑप्शन होते हैं जैसे टेक्स्ट डेकोरेशन में हम कलर भी सेट कर सकते हैं जैसे अपनी हेडिंग के लिए यहां पर अगर मैं सेट करूं कलर तो मैं लिख सकती हूं रेड अंडरलाइन तो उससे क्या होगा मेरी जो अंडरलाइन होगी उसका कलर रेड हो जाएगा मैं चाहूं तो इसको ब्लू भी कर सकती हूं तो मेरे पास क्या होगा एक ब्लू अंडरलाइन आ जाएगी तो इस तरीके से जो भी हम लाइन सेट कर रहे हैं टेक्स्ट डेकोरेशन में उसमें कलर भी सेट कर सकते हैं और चाहे तो उसका स्टाइल भी चेंज कर सकते हैं अगर ब्लू अंडरलाइन मुझे चाहिए पर मुझे ब्लू वेवी अंडरलाइन चाहिए तो उसके लिए वेव्स आ जाएंगी मेरी अंडरलाइन के नीचे तो कौन-कौन सी वैलिड वैल्यूज होती हैं उनके बारे में हम यहां पर जाकर देख सकते हैं तो स्टाइल के अंदर जब हम जाएंगे तो टेक्स्ट डेकोरेशन स्टाइल में अलग-अलग स्टाइल होते हैं यहां पर दिख जाएगा सॉलिड स्टाइल होता है यहां पर डबल अंडरलाइन आ जाएगी यहां पर मेरे पास डॉटेड अंडरलाइन आ जाएगी तो उस डॉटेड के लिए मुझे डॉटेड लिखना है डबल के लिए डबल लिखना है डैश अंडरलाइन के लिए जो डैश की फॉर्म में आए डैश लिखना है वेवी अंडरलाइन के लिए मुझे वेवी लिखना है तो अगर मुझे यहां पर डॉटेड चाहिए ब्लू डॉटेड अंडरलाइन तो उसके लिए हम सिंपली जाकर करेंगे रिफ्रेश तो ये डॉटेड अंडरलाइन मेरे पास आ जाएगी तो इस तरीके से से अलग-अलग अंडरलाइंस हम क्रिएट कर सकते हैं और फ्री टाइम में हम जाके एमडीएन को और ज्यादा एक्सप्लोर कर सकते हैं इनफैक्ट अभी आप जाकर थोड़ा सा एक्सप्लोर कर सकते हैं सारी सारी वैल्यूज को एक-एक करके लिखिए तो उससे क्या होगा हमें भी थोड़ी सी आदत होगी रिसोर्सेस को चीजों को खुद सीखने की नेक्स्ट प्रॉपर्टी जिसकी हम बात करेंगे इसका नाम है फॉन्ट वेट फॉन्ट वेट मुझे बताता है कि मेरा जितना भी टेक्स्ट मैंने लिखा हुआ है वो कितना लाइट या कितना डार्क लिखा हुआ है तो फॉन्ट वेट कितना लाइट या कितना डार्क है मेरा टेक्स्ट वो चीज मुझे बताता है तो मैं सिंपली किसी भी टेक्स्ट के लिए लिख सकती हूं फॉन्ट वेट तो मल्टीपल वैल्यूज हम सेट कर सकते हैं हम नॉर्मल सेट कर सकते हैं फॉन्ट वेट को बोल्ड सेट कर सकते हैं बोल्डर यानी बोल्ड से भी ज्यादा डार्क लिखा हो या लाइट मतलब नॉर्मल से भी ज्यादा लाइट लिखा हो उस तरीके से अलग-अलग फॉन्ट वेट सेट किया जा सकता है तो एक बार इसको सेट करके देखते हैं मैं क्या करूंगी चार हेडिंग मैं बनाने वाली हूं ये मेरी h1 हो गई ये मेरी h2 दिस इज माय h1 येट ये थ्री ये फोर इसको कर लेते हैं सेव एंड h1 के लिए अभी क्या करेंगे ये सारी हेडिंग हम हटा देते हैं कर लेंगे सेव रिफ्रेश तो ये मेरी चार हेडिंग मेरे पास आ गई है अब मान लेते हैं इन चारों हेडिंग्स को मैं अलग-अलग आईडी दे देती हूं इसको मैंने आईडी दी है h1 एंड इसी तरीके से वैसे मैं एडवाइज नहीं करूंगी कि आप सेम जो नाम है आपके एचटीएमएल टैग्स के उसको आप आईडी में यूज करें यह मेरा h4 हो गया तो अब मैं क्या करूंगी जो मेरी h1 है हेडिंग वन उसके लिए हम अपना फॉन्ट वेट सेट करने वाले हैं नॉर्मल हेडिंग्स का क्या होता है सीएसएस के अंदर बाय डिफॉल्ट हेडिंग्स के लिए डार्कर फॉन्ट दिया जाता है जो भी एटीएमएल आप हेडिंग्स को क्रिएट करते हैं वो थोड़ी सी डार्क और बोल्ड होती है बट h1 को मैंने क्या स्टाइल दे दिया नॉर्मल फॉन्ट वेट दे दिया अब इसको करेंगे रिफ्रेश तो ये नॉर्मल फॉन्ट वेट पर रिटर्न होकर आ गई है अब h2 के लिए मैं क्या करने वाली हूं हेडिंग जो टू है उसका हम फॉन्ट वेट सेट करेंगे बोल्ड इसको करेंगे रिफ्रेश तो ये क्या हुआ कोई चेंज नहीं आया क्योंकि ऑलरेडी जितनी भी मेरी हेडिंग होती है h1 हेडिंग वो बाय डिफॉल्ट बोल्ड ही होती है तो यह ज्यादा ना ज्यादा डार्क हुआ ना ज्यादा लाइट हुआ इसका वेट उतना ही रहा फंट वेट यानी कितना गहरा वेट है अब h3 के लिए हम फंट वेट को सेट करने वाले हैं टू बोल्डर यानी बोल्ड से भी और गहरा इसको करेंगे रिफ्रेश तो बहुत मिनिमल सा चेंज आया होगा लद वो चेंज इतना ज्यादा अभी आपको यहां पर दिखाई नहीं दे रहा होगा बट क्योंकि हेडिंग ऑलरेडी बहुत ज्यादा बोल्डर होती है बट इसको अगर मैं लाइटर कर दूं तो वो चेंज हमें काफी दिखाई देगा इसको करेंगे रिफ्रेश तो h3 क्या हो गया हेडिंग थ्री क्या हो गया काफी ज्यादा लाइट हो गई है अब बाय डिफॉल्ट जो हमारा फॉन्ट वेट होता है उसकी एक रेंज होती है यानी जितना भी हमारा वेट होता है फॉन्ट का मतलब कितना लाइट तो सबसे जो लाइटेस्ट शेड होता है उसके लिए वैल्यू होती है 100 और सबसे जो डार्कस्टार में सारे का सारा लाइट और डार्क किसी भी टेक्स्ट के होने का खेल है और इसमें जो बोल्ड होता है दैट इज सेट एट वैल्यू 400 तो 400 से ऊपर ऊपर अगर आपको चाहिए तो आप बोल्डर सेट कर सकते हैं 400 से नीचे नीचे चाहिए तो आप लाइटर सेट कर सकते हैं तो इस तरीके से हम इनको अलग-अलग फॉन्ट वेट भी दे सकते हैं लेट्स सपोज मैंने सेलेक्ट किया h4 को एंड h1 को मैंने फंट वेट दिया 100 h2 को मैंने फॉन्ट वेट दिया लेट्स से 250 h3 को मैंने फॉन्ट वेट दिया 400 एंड h4 को मैंने फॉन्ट वेट दिया 900 इसको कर लेते हैं सेव रिफ्रेश तो दिखेगा यह वाली हेडिंग सबसे जो नॉर्मल है सबसे जो लाइट है वह पॉसिबल है यह उससे ो थोड़ी सी डार्क है ये उससे भी थोड़ी सी डार्क है और ये सबसे डार्क हेडिंग है अगर h3 को थोड़ा सा और मुझे डार्क करना है तो मैं इसको 600 भी दे सकती हूं तो ये क्या हुआ थोड़ी सी डार्क हो गई बट h4 अभी भी h3 से डार्क है इतना ज्यादा हमें डिफरेंस पता नहीं चलेगा क्योंकि इतना ज्यादा ओबवियस नहीं होता डिफरेंस बट अगर आप इस डी को इस डी के साथ कंपेयर करेंगे तो थोड़ा सा आपको आईडिया लगेगा बट मैक्सिमम जो हम यूज करते हैं मैक्सिमम नॉर्मल बोल्ड एंड लाइट को ही यूज कर रहे होते हैं इतना ज्यादा शेड्स के साथ डार्क और लाइट में हम नहीं खेल रहे होते आपको जो याद रखना है वो ये याद रखना है फॉन्ट वेट में 100 से 900 तक वैल्यू सेट हो सकती है 100 सबसे लाइट होता है 900 सबसे डार्क होता है और आप चाहे तो सिंपली बोल्ड या सिंपली लाइटर लिख सकते हैं किसी भी टेक्स्ट को बोल्ड या लाइट दिखाने के लिए नेक्स्ट टेक्स्ट प्रॉपर्टी जिसकी हम बात करेंगे यह है फॉन्ट फैमिली फॉन्ट फैमिली होती है कि आपका जो भी टेक्स्ट मुझे दिखाई दे रहा है वो किस तरीके का है उसका फॉन्ट स्टाइल क्या है तो इसको हम और कोई नाम दें तो इसको कह सकते हैं कि स्टाइल क्या है टेक्स्ट का फंट स्टाइल कहने का मतलब है कि बाय डिफॉल्ट एक बार इन हेडिंग्स को थोड़ा सा हटा देते हैं हम क्या करेंगे तीन हेडिंग्स को हटा देंगे सेव रिफ्रेश तो बाय डिफॉल्ट ये जो टेक्स्ट है हम चाहें तो इंस्पेक्ट कर सकते हैं इंस्पेक्ट पर जाएंगे यहां पर क्लिक करेंगे एंड क्लिक करके अगर मैं अपनी हेडिंग पर जाऊं इस हेडिंग पर यह एक तरीका होता है वैसे सीएसएस के अंदर इंस्पेक्ट करके हम क्या कर सकते हैं सारी की सारी प्रॉपर्टीज को हम एनालाइज कर सकते हैं सारा का सारा सीएसएस हमें ब्राउजर के अंदर भी दिखाई देता है एंड एक काफी इंपॉर्टेंट है टू एनालाइज कि किस तरीके से ये सीएसएस काम कर रही है ये मेरा एलिमेंट सिलेक्टर होता है एलिमेंट सिलेक्टर पे सिलेक्ट करके मैं क्या कर सकती हूं किसी भी ये मेरा h1 हो गया जिसको इसने सिलेक्ट कर लिया तो ये ब्लू एरिया जो है इसके अंदर मेरा कंटेंट है ये मेरा पैराग्राफ हो गया जिसमें ब्लू में मेरा कंटेंट हाइलाइटेड है तो पैराग्राफ टैग है इसके बारे में इंफॉर्मेशन इस छोटे से वाइट वाले बॉक्स के अंदर हमें दिखाई दे रही होगी जो लेफ्ट में दिख रहा है मुझे इससे नीचे जो मेरा एंकर टैग है उसकी भी इंफॉर्मेशन मुझे दिखाई दे रही है वाइट वाले बॉक्स के अंदर तो h1 पे आ जाते हैं h1 पर जैसे ही मैं क्लिक करूंगी क्या होगा यहां पर नीचे ये मुझे सारी की सारी हेडिंग दिखाई देगी डिस्प्ले ब्लॉक है फॉन्ट साइज 2m है मार्जिन ब्लॉक फॉन्ट वेट बोल्ड है क्योंकि हेडिंग्स के अंदर क्या होता है बाय डिफॉल्ट मेरा फॉन्ट वेट क्या होता है बोल्ड होता है हम चाहे तो जितना भी हमारा सीएसएस है वो सीधा जाकर ब्राउजर में भी लिख सकते हैं जैसे एलिमेंट स्टाइल में जाकर मैंने लिख दिया यहां पर एलिमेंट क्या है एलिमेंट है मेरा h1 इसके लिए मैं चाहूं तो मेरा फॉन्ट वेट जो है फॉन्ट वेट की वैल्यू को हम सेट कर कर सकते हैं लेट्स से टू लाइटर इसको सेट करके मैंने किया एंटर तो क्या हुआ मेरा जो h1 हेडिंग थी वो लाइट हो गई लाइट क्यों हुई क्योंकि उसके लिए हमने यहीं पर सीएसएस को सेट कर दिया तो ये जो एलिमेंट स्टाइल आपके लिए लिखकर आता है यहां पर क्लिक करना है इस एरो पर किसी भी एलिमेंट को सेलेक्ट करना है तो उसके लिए उसका एलिमेंट स्टाइल एंड जो उसकी पहले से सेट प्रॉपर्टीज हैं वो आपको दिख जाएंगी जैसे ही मैंने यहां पर फॉन्ट वेट सेट कर दिया वैसे ही क्या हुआ नीचे वाला फॉन्ट वेट पर क्रॉस आ गया कि अब वो अप्लाई नहीं हो रहा और जैसे ही मैं इस पर टिक को हटा दूंगी वैसे ही इस पर क्रॉस आ जाए आगा और ये वाला फॉन्ट अप्लाई होगा जो इसका डिफॉल्ट फॉन्ट है व्हिच इज माय बोल्ड प्रॉपर्टी तो धीरे-धीरे हम इंस्पेक्ट को भी और ज्यादा यूज़ करेंगे जब हम नेक्स्ट लेवल के अंदर बॉक्स मॉडल पढ़ेंगे सीएसएस का तो हम इस इंस्पेक्ट प्रॉपर्टी को बहुत ज्यादा यूज़ करने वाले हैं बट एज अ बिगनर जब हम सिर्फ कलर सेट कर रहे हैं जब हम सिर्फ बैकग्राउंड कलर सेट कर रहे हैं इतना ज्यादा यूज़फुल नहीं है इसीलिए अभी तक इंस्पेक्ट को इतना ज्यादा हमने कवर नहीं किया बट डेफिनेटली बॉक्स मॉडल पढ़ते टाइम इसी ये जो पैनल मेरा खुला हुआ है इंस्पेक्ट का इसी को पूरा टाइम हम देख रहे होंगे क्योंकि बॉक्स मॉडल इसमें दिखाई देता है कुछ इस तरीके से बट ये क्या है अजीब सी दिखने वाली डिस्को करने वाली जी इसके बारे में थोड़ा सा बाद में डिस्कस करेंगे बट बेसिकली आपको किसी भी एलिमेंट के लिए कोई भी डिटेल देखनी होती है उसका स्टाइल चेक करना होता है तो आप सिंपली जाकर यहां पर सेलेक्ट कर सकते हैं जिस एलिमेंट की आप बात कर रहे हैं उसके लिए आपको उसका स्टाइल दिखने लग जाएगा जैसे टेक्स्ट अलाइन एंड मैंने लिखा हुआ है अपने पैराग्राफ के लिए तो style.css में मैंने टेक्स्ट अलाइन एंड लिखा हुआ है एक्चुअली तो ये एंड की तरफ जा रहा है मैं चाहूं तो इसको चेंज भी कर सकती हूं यहीं के यहीं तो ये सेंटर में जाके अलाइन हो जाएगा बट ये जो प्रॉपर्टीज हैं जितनी भी हम यहां पर ब्राउजर के अंदर चेंजेज करते हैं यह चेंजेज मेरी फाइल के अंदर रिफ्लेक्ट नहीं करते मतलब जैसे ही मैं रिफ्रेश करूंगी कंट्रोल आर या कमांड आर जैसे ही प्रेस करूंगी रिफ्रेश किया मैंने तो वो सारे चेंजेज तो टेक्स्ट अलाइन दोबारा से एंड हो गया सेंटर नहीं रहा तो जितने भी चेंजेज हम इस इंस्पेक्ट विंडो के अंदर करते हैं वो सारे के सारे गायब हो जाते हैं रिफ्रेश करने पर तो ये सारे चेंजेज बस टेंपरेरी होते हैं तो टेंपरेरी अगर मुझे एनालाइज करना है मेरी वेबसाइट कैसे काम कर रही है तो हम इसे यूज कर सकते हैं अब जो चीज हम करने आए थे वहां पर वो कर लेते हैं मैं सिलेक्ट करने वाली हूं इस पैराग्राफ को पैराग्राफ को सिलेक्ट करते ही मुझे यहां पर इसकी सारी प्रॉपर्टीज दिख रही हैं और प्रॉपर्टीज में ये जो मेरा छोटा सा वाइट बॉक्स मेरे पास अपीयर होता है लेफ्ट में इसके अंदर मुझे दिखाई दे रहा है कि इसका जो फॉन्ट टाइप है मतलब टाइम्स टाइप का इसका फॉन्ट टाइप है एंड बाय डिफॉल्ट जो मेरे ब्राउजर अभी सेट कर रहा है वो टाइम्स वाला ही फॉन्ट है कि बाय डिफॉल्ट वही फॉन्ट मेरे लिए सेट हो रहा है मेरे सारे के सारे टेक्स्ट के लिए हो सकता है आप अगर कोई और ब्राउजर यूज कर रहे हैं आप मान लेते हैं सफारी यूज कर रहे हैं या firefox.exe तो आपके लिए हो सकता है फॉन्ट स्टाइल ब्राउजर कोई और सेट करता हो बाय डिफॉल्ट पर मुझे इस फॉन्ट स्टाइल को चेंज करना है तो इस फॉन्ट स्टाइल को चेंज करने के लिए हम अलग-अलग फ्ट्स को यूज कर सकते हैं और बहुत सारे फॉन्ट स्टाइल्स होते हैं मार्केट के अंदर बहुत सारे फॉन्ट स्टाइल्स अवेलेबल होते हैं तो अगर मैं सर्च करूं फॉन्ट स्टाइल तो कई सारे फॉन्ट स्टाइल मेरे पास अवेलेबल होते हैं यहां आप इमेजेस के अंदर भी जा सकते हैं तो कई सारे अलग-अलग तरीके होते हैं सेम कंटेंट को लिखने के जैसे इस पेज के ऊपर दिख रहा है कि अलग-अलग टाइप के तरीके होते हैं सेम कंट कंटेंट को लिखने के उसी को हम फॉन्ट स्टाइल या फिर उसी को हम फॉन्ट फैमिली कहते हैं तो कई सारी डिफरेंट डिफरेंट फैमिलीज हैं जिनको हम ट्राई कर सकते हैं इसको कर लेते हैं थोड़ा सा छोटा एंड हम क्या करने वाले हैं हमारा जो पैराग्राफ है एक पैराग्राफ तो हमने ऑलरेडी क्रिएट कर रखा है इसके नीचे हम एक और पैराग्राफ क्रिएट करेंगे ये मेरा पूरा का पूरा पैराग्राफ आ गया तो दो पैराग्राफ्स को हमने क्रिएट किया है एक है मेरा यह पैराग्राफ एक है मेरा यह पैराग्राफ इसको थोड़ा सा हम मिनिमाइज करके ओरिजिनल साइज पे ले आते हैं अब हम क्या करने वाले हैं स्टाइल ड सीएसएस के अंदर जो मेरा पैराग्राफ सेकंड वाला पैराग्राफ है फर्स्ट वाले पैराग्राफ को आईडी दे देते हैं वन और सेकंड वाले पैराग्राफ को आईडी दे देते हैं टू इनफैक्ट इतने टेक्स्ट की मुझे जरूरत भी नहीं है हम सिंपली टेस्ट आउट ही कर रहे हैं तो थोड़ा सा कम टेक्स्ट हम रख ले तो कोई प्रॉब्लम नहीं है रैंडम कोई भी एक्स्ट्रा टेक्स्ट मैंने हटा दिया है यहां से तो यह मेरा फर्स्ट पैराग्राफ है यह मेरा सेकंड पैराग्राफ है एंड की जगह इसको सेंटर अलाइन कर लेते हैं तो ये मेरा सेंटर अलाइन हो गया तो पैराग्राफ वन जो है उसे हम क्या करेंगे उसको हम फॉन्ट फैमिली देने वाले हैं लेट्स सपोज यह वैसे काफी सारे ऑप्शन भी आपको दिख जाएंगे वीएस कोड के अंदर अलग-अलग टाइप की फॉन्ट फैमिलीज होती हैं पर मैं इसे एक फॉन्ट फैमिली देने वाली हूं रोबोटो इसको कर लेते हैं सेव रिफ्रेश तो अभी क्या हुआ रोबोटो एक एक्चुअल फंट फैमिली है जो एजिस्ट करती है बट क्योंकि वो मेरा ब्राउजर अभी पहचान नहीं रहा तो इसीलिए रोबोट ऑ फंट फैमिली यहां पर सेट नहीं हो सकती हम क्या कर सकते हैं ब्राउजर की कुछ लिमिटेड फॉन्ट फैमिलीज होती हैं जिनको वो पहचानते हैं एंड उन्हीं को सेट किया जा सकता है जैसे यहां पर अगर मैं एरियल सेट कर दूं तो एरियल एसी फॉन्ट फैमिली है इनफैक्ट इसका कलर भी आपको अलग ऑरेंज में दिखाई दे रहा होगा एरियल एसी फॉन्ट फैमिली है जिसको मेरा ब्राउजर पहचानता है तो इसको मैं कर दूंगी रिफ्रेश तो इस वाले फॉन्ट और इस वाले फॉन्ट स्टाइल में डिफरेंसेस आ गए ज़ूम इन करके देखें तो ये वाला फॉन्ट थोड़ा सा अलग दिखता है ये वाला फॉन्ट थोड़ा सा अलग दिखता है क्योंकि ये वाली जो फैमिली है ये टाइम्स है ये डिफॉल्ट फॉन्ट है और इसको मैंने एरियल स्टाइल दे दिया तो इसका स्टाइल ही चेंज हो गया फॉन्ट का पूरा उसी तरीके से हम चाहे तो कोई और फॉन्ट भी सेट कर सकते हैं जैसे सेकंड जो मेरा पैराग्राफ था उसे हम कोई भी फॉन्ट फैमिली दे सकते हैं लेट्स सपोज मैंने उसे दिया सेगवे u आई अब ये इतनी सारी फॉन्ट फैमिलीज देने की अभी जरूरत नहीं है इनको हटा दिया और यह सेगवे यूआई मैंने फॉन्ट दिया है इसे सेव करेंगे रिफ्रेश तो एक बार करेंगे इसे इंस्पेक्ट और जैसे ही इस पर जाएंगे इसके लिए फंट अब दिखा रहा है छोटे से वाइट बॉक्स में लेफ्ट में जो आ रहा है एरियल दिखा रहा है एंड इसके लिए मेरा जो फॉन्ट दिखा रहा है दैट इज सेगवे यूआई अब इनके लिए और भी अलग-अलग फॉन्ट सेट किए जा सकते हैं हम चाहे तो एक टाइम पर मल्टीपल फॉट्स भी लिख सकते हैं जैसे सेगवे यूआई के बाद कॉमा करके मैंने दूसरी फॉन्ट फैमिली लिख दी कॉमा करके तीसरी फॉन्ट फैमिली लिख दी चौथी पांचवी इसका मतलब यह होता है कि अगर मान लो आपने कोई भी प्रोजेक्ट बनाया है कोई भी आपने वेबसाइट बनाई है तो हर कोई वेबसाइट को अलग ब्राउजर पर खोलता है हो सकता है अपनी वेबसाइट को मैं हो सकता है firefox.exe एजिस्ट नहीं करता तो फिर इसको अप्लाई कर दो अगर ये भी एजिस्ट नहीं करता तो फिर इसका अगला अप्लाई कर दो तो इस तरीके से मल्टीपल फॉन्ट फैमिलीज भी हम सेट कर सकते हैं तो इसको हम एक तरीके से अपना फॉल बैक मैकेनिज्म कहते हैं फॉल बैक मैकेनिज्म कहने का मतलब है कि अगर एक चीज फेल हो जाए मान लो एरियल फेल हो गया एरियल एजिस्ट ही नहीं करता तो रोबोटो अप्लाई कर दो तो इस तरीके से बहुत सारी फॉन्ट फैमिलीज होती हैं जिनको हम जाकर लिख सकते हैं अब फॉन्ट फैमिलीज के अंदर मैं थोड़ा सा बहुत बेसिक से बता देती हूं हमारी पांच जेनेरिक फॉन्ट फैमिलीज होती हैं दो टाइप की फैमिलीज होती हैं एक होती है जेनेरिक एक होती है स्पेसिफिक पांच जेनेरिक फॉन्ट फैमिलीज होती हैं इसमें शरिफ होती है सेन शरिफ होती है कर्सिव होती है फैंटेसी होती है मोनोस्पेस होती हैं तो ये पांच फैमिलीज होती हैं जैसे कर्सिव जो फॉन्ट फैमिली होती है उसमें जो भी चीज लिखी होती है ना वो हैंडराइटिंग जैसी लगती है तो ये इसकी खास प्रॉपर्टी है और इसी के अंदर हमारे पास फिर स्पेसिफिक फॉन्ट फैमिलीज आ जाती हैं जैसे अगर हम टाइम्स न्यू रोमन की बात करें तो वो सेरेफ फैमिली के अंदर आता है अगर हम एरियल की बात करें तो वो सैं शरिफ के अंदर आता है तो ऐसे मल्टीपल फंट फैमिलीज होती हैं उनकी मल्टीपल प्रॉपर्टीज होती हैं बट इसके हम इतना ज्यादा डिटेल में नहीं जाएंगे बट आप चाहें तो इसको और ज्यादा एक्सप्लोर कर सकते हैं कि क्या-क्या फॉर्न फैमिलीज होती हैं अलग-अलग टाइप की नेक्स्ट हम बात करने वाले हैं यूनिट्स इन सीएसएस के बारे में सीएसएस के अंदर दो तरीके के यूनिट्स होते हैं यूनिट्स कहने का मतलब है यूनिट का रिलेशन होता है साइज के साथ कभी भी किसी चीज का मुझे साइज कि कोई चीज कितनी बड़ी या कितनी छोटी होनी चाहिए जब भी हम डिस्टेंस लेते हैं कि मुझे यहां से मान लेते हैं मुंबई जाना है तो मैं किलोमीटर्स में डिस्टेंस को मेजर करूंगी तो डिस्टेंस के लिए हम किलोमीटर यूज़ कर सकते हैं सेंटीमीटर यूज कर सकते हैं मिलीमीटर यूज़ कर सकते हैं वैसे ही सीएसएस के अंदर कोई भी चीज कितनी छोटी या कितनी बड़ी है उसके लिए हम पिक्सल्स को यूज करते हैं तो सीएसएस के अंदर हमारे दो टाइप्स के यूनिट्स होते हैं एक होते हैं हमारे एब्सलूट यूनिट्स एक होते हैं हमारे रिलेटिव यूनिट्स रिलेटिव यूनिट्स को हम क्या करेंगे नेक्स्ट लेवल के अंदर पढ़ेंगे अभी हम बात करने वाले हैं एब्सलूट यूनिट्स की सीएसएस में एब्सलूट यूनिट्स साइज को मेजर करने के लिए बहुत सारे होते हैं हम चाहे तो सेंटीमीटर में भी चीजों को मेजर कर सकते हैं सीएसएस के अंदर हम चाहे तो इंच में भी मेजर कर सकते हैं हम चाहे तो मिलीमीटर में भी मेज कर सकते हैं बट मोस्टली जो सबसे यूज होने वाला यूनिट है वो है मेरा पिक्सल्स यानी पी एक पिक्सल आपने सुना होगा जब भी हम टीवी देखते थे टीवी पे बोलते थे कि पिक्सेल फट रहे हैं मतलब क्वालिटी उतनी अच्छी नहीं आ रही तो एक तरीके से यूनिट है किसी भी चीज को मेजर करने का कि पिक्सेल मतलब छोटा कोई पार्ट होगा मेरी स्क्रीन का तो 1 इंच के अंदर 1 इंच मेरा कितना होता है 1 इंच एप्रोक्सीमेटली 2.54 सेमी होता है तो 1 इंच के अंदर मेरे पास 96 पिक्सल्स होते हैं तो 1 इंच मुझे मुझे पता ही है कि छोटा सा होता है और उसके अंदर भी 96 पिक्सल्स फिट हो सकते हैं तो पिक्सेल बहुत छोटा यूनिट होता है तो पिक्सेल को हम कैसे यूज करते हैं पिक्सेल को यूज करने के लिए मान लो मुझे फॉन्ट साइज सेट करना है फॉन्ट साइज होता है कि मेरे टेक्स्ट का क्या साइज होना चाहिए तो उसके अंदर मैं टू पिक्सेल 20 पिक्सेल इस तरीके से अलग-अलग फॉन्ट साइज हम लिखकर टेस्ट कर सकते हैं तो फॉन्ट साइज और पिक्सल्स को समझने के लिए हम क्या करने वाले हैं बॉडी टैग के अंदर हम तीन पैराग्राफ्स को क्रिएट करेंगे ये मेरा पैराग्राफ 1 2 3 एक के अंदर हम लिख देते हैं पैरा वन एक के लिए लिख देते हैं हम पैराटू एक के लिए लिख देते हैं हम पैरा थ्री अब तीनों को हम अलग-अलग आईडी देने वाले ये मेरा वन हो गया इसकी आईडी हम टू रख देते हैं एंड इसके लिए हम आईडी थ्री रख देते हैं वैसे ये जो आईडी के नाम है ये इतने अच्छे नाम नहीं है इतनी वेग आईडी नहीं होती यूजुअली स्पेसिफिक मतलब आईडी ऐसी होती है जिसको पढ़कर पता चल जाए कि इस एलिमेंट के अंदर एक्चुअली लिखा क्या हुआ है तो मेरे तीन पैराग्राफ्स बाय डिफॉल्ट मेरे पास क्रिएट हो गए अब मुझे फॉन्ट साइज को चेंज करना है मतलब अभी बाय डिफॉल्ट इनका कुछ फॉन्ट साइज होगा कैसे चेक कर सकते हैं क्या फॉन्ट साइज है मैं करूंगी इंस्पेक्ट इंस्पेक्ट पे जाते ही इस पैराग्राफ को मैं क्लिक कर सकती हूं ये जो पूरा अपीयर हो रहा है बॉक्स इसके अंदर मुझे दिख रहा है फॉन्ट है 16px टाइम्स यानी 16 पिक्सल्स है अभी इसका फॉन्ट साइज पर जैसे ही मैं वन के लिए इसका फॉन्ट साइज बढ़ा दूं बाय डिफॉल्ट मुझे पता चल गया पैराग्राफ का फॉन्ट साइज मेरे अभी ब्राउजर के अंदर 16 पिक्सल्स है हो सकता है आप कोई और मशीन ब्राउजर यूज़ कर रहे हो तो आपके लिए अलग हो सकता है बट अगर वन के लिए मैंने फंट साइज को बढ़ाकर इसकी वैल्यू को इंक्रीज कर दिया लेट्स से टू 25 पिक्सल्स रिफ्रेश करेंगे तो नॉर्मल पैराग्राफ तो इस साइज के दिखते हैं नॉर्मल पैराग्राफ ऐसा दिखता है ऐसा दिखता है पर इसका फंट साइज अभी बढ़ गया क्योंकि नॉर्मल पैराग्राफ का फंट साइज है 16 पिक्सल्स और इसको हमने दे दिया 25 पिक्सल्स उसी तरीके से अगर थ्री के लिए हम अपने फंट साइज को सेट कर दें लेट्स से टू 10 पिक्सल्स इसको करेंगे रिफ्रेश तो जो थर्ड प पैराग्राफ का फॉट साइज है ये काफी कम हो गया है क्योंकि नॉर्मल 16 होता है इसको हमने 10 दे दिया जो 16 से छोटा है तो ये काफी छोटा हो गया है इसी को अगर मैं वन पिक्सेल दे देती तो वन पिक्सेल इतना छोटा होता है स्क्रीन पर कि हमें दिखाई ही नहीं देता इसको करें अगर रिफ्रेश तो ये वन पिक्सेल गायब हो गया ऑलमोस्ट स्क्रीन पे अगर मैं बहुत ज्यादा जितना ज्यादा मैं ज़ूम इन कर सकती हूं उतना ज्यादा मैंने 500 पर जूम इन कर लिया है पेज पे तब जाके ये पैराग्राफ थ्री मुझे कहीं पर छोटा सा दिखाई दे रहा है एंड दिस इज बिकॉज़ क्योंकि एक पिक्सल बहुत छोटा पार्ट होता है हमारी स्क्रीन का तो इसीलिए एक पिक्सेल पर नहीं जाना बहुत छोटा यूनिट होता है पिक्सेल जब भी हम मेजरमेंट की बात करते हैं तो 10 पिक्सल्स ही थोड़ा सा ठीक है क्योंकि दिखाई दे रहा है एटलीस्ट ज़ूम इन करने पर तो इस तरीके से हम अपने फॉन्ट साइज को चेंज कर सकते हैं सिर्फ पैराग्राफ के लिए नहीं अगर मुझे हेडिंग के लिए चेंज करना है तो हम उसके लिए चेंज कर सकते हैं एंकर टैग के लिए चेंज करना है उसके लिए चेंज कर सकते हैं बेसिकली जहां भी टेक्स्ट है उसके लिए फॉन्ट साइज चेंज किया जा सकता है नेक्स्ट चीज जिसको हम पढ़ने वाले हैं यह मेरी लाइन हाइट प्रॉपर्टी लाइन हाइट प्रॉपर्टी डिसाइड करती है कि मेरी लाइन की मतलब मेरी टेक्स्ट की कितनी हाइट होनी चाहिए तो इक्सड से टू टू पिक्सल्स टू पिक्सल्स लाइन हाइट को सेट किया सेव रिफ्रेश तो क्या हुआ सारी की सारी लाइंस एक तरीके से स्क्विज हो गई क्योंकि लाइन हाइट दो पिक्सल कहने का मतलब है कि हर लाइन को बहुत छोटी सी जगह मिलनी चाहिए तो वो एक दूसरे के ऊपर ओवरलैप करने लग गई हैं पर यहीं पर लाइन हाइट को मैंने 20 पिक्सल सेट कर दिया तो क्या हुआ स्पेस आ गई और 20 की जगह इसको मैंने 50 पिक्सल सेट कर दिया तो क्या होगा बहुत सारी स्पेस आ जाएगी बीच में तो एक इंडिविजुअल लाइन कितनी हाइट ले रही है वो मेरी लाइन हाइट होती है तो अगर आपको टेक्स्ट के बीच में बहुत सारी स्पेस चाहिए तो उसके लिए हम लाइन हाइट को यूज़ कर सकते हैं और वहीं पर अगर मैंने लाइन हाइट को नॉर्मल कर दिया तो नॉर्मल मतलब कोई चेंज नहीं आएगा मेरे कोड के अंदर बाय डिफॉल्ट जितनी लाइन हाइट होती है उतनी मेरे लिए सेट हो जाएगी नेक्स्ट प्रॉपर्टी जिसको हम डिस्कस करने वाले हैं यह है मेरी टेक्स्ट ट्रांसफॉर्म प्रॉपर्टी टेक्स्ट ट्रांसफॉर्म कहने का मतलब है कि मेरा कंटेंट अपर केस होगा लोअर केस होगा उसके हम केस को बेसिकली चेंज करने वाले हैं तो मेरा जो पैराग्राफ है उसके लिए हम अपने टेक्स्ट ट्रांसफॉर्म को जाकर सेट कर सकते हैं टू अपर केस अपर केस सेट करने से क्या हुआ सारा का सारा कंटेंट अपर केस में हो गया यहीं पर अगर इसे हम लोअर केस सेट कर देते तो लोअर केस से सारा का सारा जो कंटेंट है वो लोअर केस में हो जाता एंड यहीं पर इसे अगर हम कैपिला इज सेट कर देते कैपिट आइज मतलब हर वर्ड का फर्स्ट लेटर कैपिटल हो जाए तो रिफ्रेश करेंगे तो हर वर्ड का अगर आप फर्स्ट लेटर अब नोटिस करेंगे तो वो एक कैपिटल लेटर हो जाएगा तो इस तरीके से मेरी टेक्स्ट ट्रांसफॉर्म प्रॉपर्टी काम करती है और यहीं पर अगर आप नन की बात करें नन मतलब अगर आपने पहले ऑलरेडी में टेक्स्ट ट्रांसफॉर्म को सेट किया है तो नन मतलब सारी चीजों को वो इनवैलिड कर देगा सारी चीजों को वो हटा देगा जैसे अगर यहां पर इंस्पेक्ट करें और अब मैं अपने पैराग्राफ पर जाऊं तो ये टेक्स्ट ट्रांसफॉर्म अभी कैपिट आइज है इसको मैंने नन कर दिया तो प्रॉपर्टीज हट गई और अब नॉर्मल टेक्स्ट मेरे पास वापस आ गया है अब ना इस वर्ड का फर्स्ट लेटर कैपिटल है ना इसका फर्स्ट लेटर कैपिटल है तो ये नॉर्मल टेक्स्ट है जैसा का जैसा हमने एचटीएमएल फाइल के अंदर यहां पर लिखा था तो इस तरीके से हमारी टेक्स्ट ट्रांसफॉर्म प्रॉपर्टी काम करती है नेक्स्ट हम सॉ करने वाले हैं अपना प्रैक्टिस सेट टू जो मेरे लेवल वन का लास्ट प्रैक्टिस सेट है इसके अंदर कुछ-कुछ एक्टिविटीज हमें दी हुई है मैं दोबारा रिमाइंड करा देती हूं कि अब टाइम है थोड़ा सा हल्का सा पॉज करने का एंड उसके बाद खुद से प्रैक्टिस करने का जो भी चीजें हमने सीखी हैं क्योंकि काफी सारी चीजें सीएसएस बेसिक्स का मतलब सिर्फ बेसिस नहीं है काफी सारी अच्छी चीजें हम सीख चुके हैं अपने सिर्फ लेवल वन के अंदर ही इनफैक्ट हमने इंस्पेक्ट करना तक सीख लिया है व्हिच इज अ रियली गुड थिंग अब अपने क्वेश्चन वन को सॉल्व करते हैं क्वेश्चन वन कह रहा है क्रिएट अ हेडिंग सेंटर्ड ऑन द पेज मतलब मुझे एक हेड डिंग क्रिएट करनी है जो पेज के ऊपर सेंटर पर हो विद ऑल ऑफ इट्स टेक्स्ट कैपिट आइज बाय डिफॉल्ट तो क्वेश्चन से मुझे यह समझ आ रहा है कि सबसे पहले तो मुझे अपनी एक h1 हेडिंग क्रिएट करनी है उसके लिए मुझे क्या करना है इसको थोड़ा सा स्ट्रेट लिखते हैं h1 हेडिंग क्रिएट करनी है उसके बाद h1 हेडिंग को मुझे पेज के ऊपर सेंटर करना है एंड उसका जो टेक्स्ट ट्रांसफॉर्म है या जितना भी टेक्स्ट है उसे मुझे कैपिटल इज फॉर्म में डिस्प्ले कराना है तो सबसे पहले अपने पेज को पूरा खाली कर लेते हैं स्टाइल स इस को पूरा हम खाली कर लेते हैं सेव रिफ्रेश तो खाली हो गया मेरा पेज पूरा अब इसके अंदर हम एक h1 हेडिंग क्रिएट करेंगे h1 लेट्स सपोज हमारी जो हेडिंग है उसमें हमने अपना कॉलेज लिख दिया सेव रिफ्रेश तो ये मेरी h1 हेडिंग आ गई अब इसके लिए प्रॉपर्टीज अप्लाई करनी है h1 के लिए मुझे क्या-क्या चाहिए सबसे पहले तो मुझे टेक्स्ट को सेंटर में लेकर आना है तो टेक्स्ट को सेंटर में लेकर आने के लिए हमें क्या करना पड़ता है उसके अलाइन मेंट को चेंज करना पड़ता है अलाइन मेंट को चेंज करने के लिए मैं सेट कर सकती हूं अपनी टेक्स्ट अलाइन प्रॉपर्टी को टू सेंटर सेव रिफ्रेश तो ये क्या हुआ सेंटर में आ गया टेक्स्ट मेरा और अब मुझे कैपिट आइज करना है लेटर्स को बाय डिफॉल्ट कैपिट आइज हो जाए अब वैसे तो मैंने यहीं पर पहले से ही कैपिटल लिखा है पर पहले से अगर इसको स्मॉल लिख दें तो अभी तो ये स्मॉल है पर हम चाहते हैं कैपिट आइज हो जाए मतलब हर वर्ड का फर्स्ट लेटर कैपिटल हो जाए तो उसके लिए हमने सीखा था काफी ताजा-ताजा मेरा टेक्स्ट ट्रांसफॉर्म होता था जिसकी वैल्यू को सेट कर देंगे टू कैपिटल इज तो ये क्या हो जाएंगे कैपिटल ला लेटर्स मेरे पास आ जाएंगे तो इस तरीके से फर्स्ट क्वेश्चन हो जाता है हमारा कंप्लीट अब आते हैं सेकंड सवाल की तरफ सेकंड सवाल कहता है सेट द फॉन्ट फैमिली ऑफ ऑल द कंटेंट इन द डॉक्यूमेंट टू टाइम्स न्यू रूम फॉन्ट फैमिली सारे के सारे डॉक्यूमेंट के कंटेंट के लिए हमें टाइम्स न्यू रोमन पे सेट करनी है तो एक हम याद कर लेते हैं रिवाइंड कर लेते हैं कि हम सारे डॉक्यूमेंट के लिए अगर कुछ भी सेट करना होता है तो उसके लिए क्या यूज़ करते हैं उसके लिए हम यूज करते हैं अपना यूनिवर्सल सिलेक्टर तो यूनिवर्सल सिलेक्टर को यूज करके अपनी फॉन्ट फैमिली को सेट कर देंगे टू टाइम्स न्यू रूम इसके लिए मुझे क्या करना है यूनिवर्सल सिलेक्टर को जनरली हम सबसे ऊपर लिखते हैं आप चाहे तो नीचे भी लिख सकते हैं बट जनरली जब भी डॉक्यूमेंट में लिखा जाता है अच्छा यह टिप होगा कि हम हमेशा ऊपर लिखें सबसे ऊपर तो पता चल जाए कि इस डॉक्यूमेंट में सारी चीजें ऐसे सेट हो गई है तो इसके लिए हम फंट फैमिली अपनी प्रॉपर्टी यूज करेंगे और इसकी वैल्यू को सेट कर देंगे टू टाइम्स न्यू रोमन सेव रिफ्रेश हल्का सा चेंज आया आई आई एम नॉट श्यर आपने नोटिस किया क्या पर जैसे ही मैंने रिफ्रेश किया हल्का सा चेंज आया एंड इंस्पेक्ट करके आपको थोड़ा सा और नोटिस करा देते हैं इसको थोड़ा सा कर लेते हैं जूम इन एंड बहुत हल्का सा चेंज आप नोटिस करेंगे यहां पर जाएंगे यहां पर फॉन्ट फैमिली फॉन्ट फैमिली जैसे ही मैंने इसको क्रॉस कर दिया तो ये थोड़ा सा चेंज हुआ थोड़ा सा चेंज इसलिए हुआ क्योंकि बाय डिफॉल्ट जो फॉन्ट आ रहा है अभी ब्राउजर के ऊपर और जो टाइम्स न्यू रोमन वाला फॉन्ट है ये दोनों सेम जेनेरिक फैमिली के हैं तो मतलब सिमिलर से दिखने वाले फॉन्ट हैं पर थोड़े से अलग हैं इसीलिए चेंज जब नोटिस कर पा रहे हैं जैसे इसको टिक कर देंगे वैसे ही थोड़ा सा शिफ्ट हुआ मेरा टेक्स्ट तो ये जो चेंज दिख रहा है मतलब बड़ा छोटा जो छोटा सा चेंज दिख रहा है ये इसलिए आ रहा है क्योंकि मैंने अपनी फॉन्ट फैमिली को चेंज कर दिया है नेक्स्ट सवाल जिसकी हम बात करेंगे इसमें मुझे बोला है क्रिएट वन डिव इनसाइड अनदर डिव यानी मुझे पहले बाहर एक डिव क्रिएट करना है इस तरीके से हमें एक डिव क्रिएट कर देंगे और उसके अंदर यहां पर कुछ इस तरीके से हम एक अंदर डिव क्रिएट करेंगे तो सबसे पहले तो यही काम कर लेते हैं आगे बढ़ने से पहले मैं क्या करूंगी अपने h1 के नीचे सारी चीजें करते हैं एक डिव मैंने क्रिएट किया एंड इसके अंदर एक और डिव हम क्रिएट कर लेते हैं अब इसके लिए बोला है सेट आईडी एंड टेक्स्ट आउटर फॉर द फर्स्ट वन यानी फर्स्ट डिव के लिए आईडी सेट करनी है हमें आउटर और इसका टेक्स्ट भी मुझे लिखना है इसके अंदर आउटर तो बाहर वाला जो मेरा डिव है इस डिव को हम आईडी दे देते हैं आउटर और इसके अंदर कोई कंटेंट भी लिख देते हैं लेट्स से मैंने इसके अंदर लिख दिया आउटर अंदर वाले डिव के लिए इनर वाले डिव के लिए सेकंड डिव के लिए मुझे आईडी और टेक्स्ट को सेट करना है टू इनर तो इसके लिए भी आईडी को सेट कर देते हैं इस डिव के लिए इनर एंड इसके टेक्स्ट को भी सेट कर देते हैं टू इनर करते हैं सेव रिफ्रेश तो ये मेरा आउटर डिव हो गया आउटर डिव के अंदर इनर डिव है कैसे एनालाइज करें डिफ्स को डिफ्स को एनालाइज करना हमने तो यह मेरा सिर्फ इनर डिव है इस तरीके से मेरे डिब्स क्रिएट हुए हैं सेट द आउटर डिव टेक्स्ट साइज टू 25 पिक्सल्स एंड इनर डिव टेक्स्ट साइज टू 10 पिक्सल्स तो आउटर डिव के लिए सबसे पहले टेक्स्ट साइज इसका सेट करते हैं आउटर को मैंने आईडी दे रखी है आउटर तो काफी आसान होगा सेट करना हम आईडी सिलेक्टर यूज़ करेंगे हैश आउटर टेक्स्ट साइज के लिए कौन सी प्रॉपर्टी यूज़ करते हैं फॉन्ट साइज तो हम फॉन्ट साइज मुझे पहले ही बता रखा है कि सेट करना है तो 25 पिक्सल्स सेव रिफ्रेश तो ये आउटर के लिए सेट किया तो क्या हुआ आउटर के लिए सेट किया तो इनर के ऊपर अपने आप ऑटोमेटिक अप्लाई हो गया मतलब आउटर तो बड़ा हो ही गया साइज में इनर उसके साथ बड़ा हो गया साइज में तो इससे मुझे पता चलता है कि पेरेंट के लिए जो प्रॉपर्टी हम सेट कर देते हैं कुछ प्रॉपर्टीज ऐसी होती हैं जो बाय डिफॉल्ट चाइल्ड के ऊपर भी अप्लाई कर जाती है क्योंकि इसमें आउटर क्या आउटर पेरेंट है और इनर क्या है इनर उसका चाइल्ड है इनर डिव के लिए हम फंट साइज अलग से बाद में सेट करेंगे फॉन्ट साइज को हमने सेट कर दिया है टू 10 पिक्सेल सेव रिफ्रेश तो इनर का फॉन्ट साइज 10 पिक्सल्स हो गया आउटर का हो गया 25 पिक्सल्स तो इस तरीके से हमने अपने थर्ड क्वेश्चन को भी कंप्लीट कर लिया है प्रैक्टिस सेट वन प्रैक्टिस सेट टू दोनों को हमने कंप्लीट कर लिया है एंड हमारा लेवल वन हो चुका है कंप्लीट अभी तक हमें कोई डाउट नहीं होने चाहिए जितना भी हमने सीएसएस पढ़ा है और काफी सारी और प्रॉपर्टीज और और मजेदार चीजें हैं सीएसएस के अंदर जो हम आगे जाके और पढ़ने वाले हैं बट लेवल वन से पहले इंश्योर कर लेना है कि हमारे प्रैक्टिस सेट सेट को हम हमेशा जरूर कंप्लीट कर रहे हो क्योंकि उससे हमारी प्रैक्टिस भी हो जाएगी और आगे वाले लेवल्स में हमें और ज्यादा सीएसएस लिखने में हेल्प भी मिलेगी एंड साथ के साथ सीएसएस में जब भी डेवलपमेंट किसी भी टाइप की आप कर रहे हैं कोशिश करिए ज्यादा से ज्यादा चीजों को खुद से जाकर आप जितना एक्सप्लोर करेंगे उतना ज्यादा हम सीखेंगे तो हम लेवल वन को कंप्लीट कर चुके हैं बेसिक सीएसएस को सीख चुके हैं अब बढ़ते हैं अपने लेवल टू की तरफ अब अपनी क्लास के लेवल टू में हम पढ़ने वाले हैं बॉक्स मॉडल इन सीएसएस के बारे में बॉक्स मॉडल इन सीएसएस कहता है कि वो एक इमेज हो गई हो वो एक डिव हो गया हो वो एक स्पैन हो गया हो हेडिंग हो गई हो पैराग्राफ हो गया हो बटन हो गया हो सारी की सारी चीजें इवेंचर में होती है तो बहुत ही आसान और प्यारी भाषा में इसको समझाया गया है इसको थोड़ा सा विजुलाइज करके भी देखते हैं हमने क्या किया है एक index.htm नाम की फाइल बनाई है उसके अंदर अपना बॉयलर प्लेट कोड हमने लिखा है इस बार टाइटल इसको दिया है सीएसएस लेवल टू हमने एक स्टाइल ड सीएसए फाइल बनाई है सेम फोल्डर के अंदर एंड इसे हमने लिंक कर दिया है विद लिंक रिलेशन स्टाइल शीट एचआरएफ सेम फॉर्मेट में सारी चीजें अब हम कुछ एलिमेंट्स को क्रिएट करने वाले हैं इसके अंदर सबसे पहले एक हेडिंग टैग क्रिएट करेंगे इसको कह देते हैं हेडिंग उसके बाद एक पैराग्राफ क्रिएट कर लेते हैं इसके अंदर कुछ टेक्स्ट को हम ऐड करने वाले हैं उसके बाद नेक्स्ट हम एक लेट्स सपोज बटन को क्रिएट कर लेते हैं तो बटन को क्रिएट करके लिख देते हैं क्लिक मी इस तरीके से बटन क्रिएट हो गया एंड इसके अलावा हम चाहे तो एक डिव भी क्रिएट कर सकते हैं अब डिव के अंदर दिस इज अ डिव लिख देते हैं तो तो ये सारी की सारी चीजें हमने क्रिएट कर ली है चार चीजें अब अपने डॉक्यूमेंट पर जाते हैं हमारा जो डॉक्यूमेंट है कुछ इस तरीके का दिखाई देगा ऊपर हेडिंग है उसके बाद हमारे पास पैराग्राफ है मेरे पास मेरा बटन है एंड मेरे पास मेरा डिव है अब हम इ सारी चीजों को इंस्पेक्ट करके देखेंगे इनफैक्ट ये ऐसा लेवल है ये ऐसा चैप्टर है जिसके अंदर हम इंस्पेक्ट का यूसेज काफी ज्यादा बढ़ाने वाले हैं इंस्पेक्ट हमें बहुत सारे अमेजिंग टूल्स देता है जिसकी मदद से हम सीएसएस को और ज्यादा अच्छे से समझ सकते हैं मैनिपुलेट कर सकते हैं साथ के साथ ब्राउजर में चेंजेज करके दे सकते हैं बिफोर वी मेक द फाइनल चेंजेज इन आवर फाइल्स अब यहां पर क्या करेंगे सेलेक्ट एलिमेंट वाले इस आइकन पे क्लिक करके मैं जाने वाली हूं सबसे पहले अपनी h1 हेडिंग पर इस पर अगर मैंने हर किया अभी क्लिक नहीं करना है सिर्फ हर कर रहे हैं हर मतलब सिर्फ स्क्रॉल करके देख रहे हैं उसके ऊपर स्क्रोल करके देखेंगे तो दो एरिया हाईलाइट हो रहे हैं एक मेरा ऑरेंजिश कलर में हाईलाइट हो रहा होगा एक मेरा ब्लू कलर में हाईलाइट हो रहा होगा अगर आप किसी और ब्राउजर पर है तो हो सकता है आपके लिए कलर डिफरेंट हो जाए पर जैसे ही हम हर करके देखेंगे अपने एलिमेंट्स के ऊपर सारे के सारे कुछ रेक्टेंगल बॉक्सेस हमें दिखने शुरू हो जाएंगे ये रेक्टेंगल बॉक्सेस जो ब्लू वाला पार्ट है वो बेसिकली हमारे लिए हमारा कंटेंट वाला पार्ट होता है एंड ऑरेंज वाला पार्ट इज समथिंग कॉल्ड मार्जिन अब मार्जिन क्या होती है उसके बारे में हम इसी लेवल के अंदर सीखने वाले हैं बट बेसिकली अगर मैं पैराग्राफ पर भी जाऊं तो इसमें भी मुझे क्या दिख रहा है सारा का सारा कंटेंट बॉक्सेस की फॉर्म में दिखाई दे रहा है मैं बटन पर भी चले जाऊं तो भी कंटेंट मुझे बॉक्स की फॉर्म में दिखाई देगा अगर मैं डिव पर चले जाऊं तो भी एक लंबा सा बॉक्स मुझे दि दिखाई देगा जिसकी विड्थ पूरे पेज तक जाती रहती है तो इस तरीके से कह सकते हैं कि सारे के सारे कंटेंट को जब हम इंस्पेक्ट करके विजुलाइज करते हैं तो हर कंटेंट को एक बॉक्स की फॉर्म में विजुलाइज किया जा सकता है एंड यहीं से निकल कर आता है बॉक्स मॉडल इन सीएसएस अब बॉक्स मॉडल इन सीएसएस के अंदर हम कई सारी डिफरेंट डिफरेंट चीजें पढ़ने वाले हैं अगर बात करें क्या-क्या पढ़ेंगे तो हम हाइट पढ़ेंगे विड्थ पढ़ेंगे बॉर्डर पढ़ेंगे पैडिट मार्जिन इस तरीके की बहुत सारी चीजें पढ़ेंगे तो एक बार बॉक्स मॉडल इन सीएसएस को थोड़ा सा समझते हैं ये जो जो डायग्राम है यह थोड़ा सा जताता है कि बॉक्स मॉडल इन सीएसएस कैसा दिखता है तो ये जो मॉडल होता है ये बेसिकली कहता है कि आपने अगर कोई भी कंटेंट अपने वेब पेज के ऊपर दिखाया है तो उसे किसी बॉक्स के अंदर कंफाइंड मैनर में विजुलाइज किया जा सकता है मतलब ये अगर मेरा कंटेंट है जिसके अंदर कुछ बॉक्स है तो इसका बॉक्स मॉडल कहता है कि इस कंटेंट की अपनी कुछ हाइट होगी एंड इस कंटेंट की अपनी कुछ विड्थ होगी हाइट क्या होती है जो वर्टिकल डायरेक्शन में जितना ये एरिया ऑक्यू ई कर रहा है ये कंटेंट एंड विड्थ क्या होती है कि हॉरिजॉन्टल डायरेक्शन में कितना ये एरिया ऑक्यूपाइड है कंटेंट तो इतना एरिया ये हॉरिजॉन्टल डायरेक्शन में ऑक्यूपाइड रहा है ये विड्थ हो गई ये मेरी हाइट हो गई इसके अलावा कंटेंट के अराउंड क्या होता है कुछ एक्स्ट्रा स्पेस होती है हर कंटेंट के अराउंड कुछ एक्स्ट्रा स्पेस हो सकती है हो सकता है किसी-किसी केस में एक्स्ट्रा स्पेस जरो भी हो जरो कहने का मतलब है कि कोई एक्स्ट्रा स्पेस नहीं है पर ये हो सकता है ये स्पेस वन पिक्सेल की हो ये स्पेस हो सकती है टू पिक्सेल की हो ये स्पेस हो सकती है 20 पिक्सेल की हो तो ये जो स्पेस स् होती है कंटेंट के अराउंड इसे हम पैडिट का नाम देते हैं पैडिट क्या है या एगजैक्टली कौन सी स्पेस की हम बात कर रहे हैं उसके बारे में डिटेल में बाद में बात करेंगे बट ओवरव्यू इस तरीके से समझ सकते हैं कि अगर मेरा कोई भी कंटेंट है तो उसके अराउंड जो भी स्पेस होगी उसे हम पैडिट कहेंगे और उस स्पेस को मतलब कंटेंट को घेर हुई जो एक बाउंड्री होगी उस बाउंड्री को हम अपना बॉर्डर कहेंगे बॉर्डर हम सबने ऑलरेडी सुना होगा बॉर्डर मूवी भी आई थी बॉर्डर हमें पता है कोई कोई एंक्लोज्ड करने वाली चीज होती है कि कि बांध दिया अगर किसी चीज ने तो अगर मैं लाइन खींच दूं इस एरिया के अराउंड तो ये बेसिकली मेरा बॉर्डर बन जाएगा तो ये बॉर्डर होता है एंड एक बॉक्स एंड दूसरे बॉक्स के बीच की जो ये स्पेस है इस स्पेस को हम मार्जिन कहते हैं तो ये बेसिकली अलग-अलग चीजें हैं जिनको हम स्टडी करने वाले हैं बट बॉक्स मॉडल इन सीएसएस के अंदर ये इस तरीके से फिट इन करनी है पांच शब्द हैं जिनको हमें समझना है कि अगर मेरे पास कोई भी कंटेंट है ये कंटेंट कुछ भी हो सकता है ये एक डिव हो सकता है ये मेरे पास एक पैराग्राफ हो सकता है हेडिंग हो सकती है बटन हो सकता है इनपुट बॉक्स हो सकता है बट कंटेंट का जो विड्थ होती है उसे इस तरीके से रिप्रेजेंट करते हैं कंटेंट जितना वर्टिकल एरिया लेता है उसे हम हाइट कह देते हैं कंटेंट के अराउंड उसका एक बॉर्डर हो सकता है जो उसकी बाउंड्री होती है एक तरीके से उसको हम बॉर्डर कहते हैं और बॉर्डर और कंटेंट के बीच में जो एक्स्ट्रा स्पेस होती है इसे हम पाडिन कह देते हैं और एक पूरे के पूरे कंटेंट से दूसरे पूरे के पूरे कंटेंट के बीच में जो एक्स्ट्रा स्पेस होती है इस स्पेस को हम मार्जिन कह देते हैं तो ये छोटे-छोटे शब्द हैं जो अब टाइम के साथ धीरे-धीरे हमें याद हो जाएंगे क्योंकि इन शब्दों को हम पूरी की पूरी अब अपनी आगे आने वाली सीएसएस जर्नी के अंदर यूज़ करेंगे तो सबसे पहले बॉक्स मॉडल एंड सीएसएस के अंदर बात करते हैं हाइट की हाइट की अगर हम बात करें तो ये अगर मेरा कंटेंट बॉक्स है तो इसके अंदर हाइट हो जाएगी इसकी वर्टिकल एरिया जो ये ऑक्यूपाइड डिफॉल्ट हाइट क्या करता है हाइट हमारे पास एक प्रॉपर्टी होती है जो किसी भी कंटेंट एरिया के लिए उसकी हाइट सेट करता है फॉर द एलिमेंट तो अगर मैं हाइट को 50 पिक्सेल सेट कर दूं तो मेरे डिव की हाइट 50 पिक्सल्स हो जाएगी अगर हाइट को हम 100 पिक्सेल सेट कर दें तो डिव की हाइट 100 पिक्सल्स हो जाएगी तो इस तरीके से पिक्सल्स में हम अपनी हाइट सेट कर सकते हैं और भी पैरामीटर्स होते हैं यूनिट्स होते हैं हाइट को सेट करने के पर क्योंकि हमने बताया था कि एब्सलूट यूनिट्स में पिक्सेल सबसे ज्यादा यूज होता है तो अभी के लिए हम पिक्सल्स को सीख रहे होंगे तो आ जाते हैं अपने कोड पर हमें क्या करना है अपने कोड में हमने एक डिव बनाया था तो इक्सड सेव एंड नाउ रिफ्रेश तो हाइट देने से रिफ्रेश किया तो कुछ चेंज हमारे डिव के अंदर आया नहीं ना ही मेरे पेज के अंदर कोई चेंज आया क्योंकि हाइट जो है ऐसी चीज है जो हमें इंस्पेक्ट करने पर दिखाई देगी यानी अगर मैं इस बटन पे क्लिक करूं और अब इस डिव पर जाऊं तो अब इस डिव के बॉक्स के नीचे दिखा रहा है 933 क्रॉस 100 इसमें 933 पिक्सल्स अभी इसकी विड्थ है और 100 पिक्सल्स अभी इसको हाइट दी गई है मैं चाहूं तो इसकी हाइट को यहां पर हम मॉडिफाई भी कर सकते हैं लेट्स सपोज हम इसकी हाइट को इसको बना दे 200 पिक्सल्स तो अब अगर इसको इंस्पेक्ट करेंगे तो हाइट क्या दिखाएगा 200 पिक्सल्स बट इस चेंज को देखने का और एक बेटर तरीका होगा कि मैं इसे बैकग्राउंड कलर दे दूं लेट्स सपोज हम इसे बैकग्राउंड कलर देते हैं पिंक पिंक बैकग्राउंड कलर किया रिफ्रेश किया अब क्या है अब इसकी हाइट कितनी है ये हाइट है इसके पास 100 पिक्सल्स इसी को अगर मैं बढ़ा दूं तो इसे हम 200 पिक्सल हाइट भी दे सकते हैं 300 भी दे सकते हैं 400 भी दे सकते हैं 500 भी दे सकते हैं तो जितनी हम इसकी हाइट बढ़ाते रहेंगे उतना उतना इसका जो जो बैकग्राउंड कलर है वो स्प्रेड होता रहेगा क्योंकि अब इसकी हाइट 500 पिक्सल्स के इक्वल हो गई है रिफ्रेश करेंगे वापस रिसेट हो जाएगी टू 100 पिक्सल्स बाय डिफॉल्ट मेरे डिव की जो हाइट होती है वो उतनी होती है जितना उसके अंदर कंटेंट होता है कंटेंट क्या था कंटेंट एक लाइन के बराबर था तो इस लाइन की जो हाइट है वही मेरे डिव की हाइट है जो भी दिखाई दे रही है बट जब हम इस पे हाइट की प्रॉपर्टी सेट कर देते हैं तो उसे वो हाइट मिलती है जो हम चाहते हैं एंड जैसी हमारे पास हाइट प्रॉपर्टी होती है वैसी ही एक और सिमिलर प्रॉपर्टी होती है व्हिच इज माय विड्थ प्रॉपर्टी विड्थ क्या करती है विड्थ बाय डिफॉल्ट हमारे कंटेंट एरिया के लिए विड्थ सेट करती है फॉर द एलिमेंट मतलब यह वाली जो साइड है यह हाइट सेट करेगी और ये वाली जो साइड है ये मेरी विड्थ से सेट होगी तो विड्थ के लिए हम लिखते हैं विड्थ एंड उसके बाद हम अपनी विड्थ 50 पिक्सल्स 100 पिक्सल्स जितनी चाहे सेट कर सकते हैं जैसे बाय डिफॉल्ट किसी भी डिव की जो विड्थ होती है वो पूरी की पूरी स्क्रीन तक जाती है तो अगर हम इसे इंस्पेक्ट करें एंड इस डिव को सिलेक्ट करके यानी इसके ऊपर क्लिक करके यहां पर इसकी प्रॉपर्टीज आएंगी तो इसके लिए इसकी विड्थ को सेट करने की अगर कोशिश करें लेट्स सपोज हम इसे विड्थ देना चाहते हैं 100 पिक्सल्स के इक्वल तो यहां पर क्या होगा यह छोटा सा चेंज आ जाएगा कि इसकी जो विड्थ है अब 100 पिक्सल्स हो गई पूरी स्क्रीन तक नहीं जा रही सिर्फ 100 पिक्सल्स तक आ गई हम चाहे तो इसे 200 पिक्सल्स भी कर सकते हैं 300 पिक्सल्स भी कर सकते हैं 400 पिक्सल भी कर सकते हैं तो धीरे-धीरे इसकी विड्थ हमें बढ़ती हुई दिखाई देगी एक बार क्या करते हैं यहां पर जाकर इसकी विड्थ सेट करते हैं स्टाइल सीएए के अंदर 200 पिक्सल्स सेमीकलन एंड रिफ्रेश तो ये क्या हुआ ये डिव अब एक रेक्टेंगल बॉक्स बन गया जिसके अंदर कंटेंट है एंड इसका पूरा का पूरा जो बैकग्राउंड कलर है वो सेट टू पिंक है तो इस तरीके से हमारा हाइट एंड विड्थ काम करता है हम ये सिर्फ डिप पर नहीं हम पैराग्राफ के ऊपर भी कर सकते हैं हेडिंग पर भी कर सकते हैं जैसे अगर हम चाहें तो अपनी h1 को एक विड्थ दे सकते हैं लेट्स सपोज h1 को हम विड्थ देते हैं 200 पिक्सल्स एंड इसे हम हाइट देने वाले हैं 50 पिक्सल्स सेव रिफ्रेश अब ये जो चीज है या तो हमें इंस्पेक्ट करने से पता चलेगी इंस्पेक्ट अगर करें हेडिंग को तो हेडिंग पर जाएंगे तो 200 * 50 दिखा रहा है और इसका जो एरिया है अगर हम विड्थ की प्रॉपर्टी हटा दें और अब इस पर जाकर स्क्रॉल करें तो ब्लू वाला जो इसका कंटेंट एरिया है वो कितनी विड्थ ऑक्यूपाइड की विड्थ यानी पूरी स्क्रीन जितनी विड्थ ऑक्यूपाइड बाय डिफॉल्ट बट अगर मैं इस पर विड्थ वाली प्रॉपर्टी सेट कर दूं तो अब इसका ब्लू वाला एरिया कम हो गया यानी ब्लू वाले एरिया में कितना पार्ट मुझे दिखाई दे रहा है सिर्फ 200 पिक्सल्स जितना जितनी हमने इसको विड्थ दिए है हम चाहे तो एक बैकग्राउंड कलर भी सेट कर सकते हैं एनालाइज करने के लिए तो इसको बैकग्राउंड कलर हम दे देते हैं लेट्स सपोज वी गिव इट एक्वा मरीन सेव रिफ्रेश तो ये क्या हुआ उतनी विड्थ ऑक्यूपाइड है जितनी हमने सेट की है व्हिच इज 200 पिक्सल्स एंड इसकी हाइट है अभी 50 पिक्सल्स के इक्वल नेक्स्ट प्रॉपर्टी जिसकी हम बात करेंगे ये है मेरी बॉर्डर प्रॉपर्टी यानी कंटेंट एरिया के लिए हमने देख लिया कि इसकी हाइट कैसे सेट होगी या फिर इसकी विड्थ कैसे सेट होगी अब बात करते हैं कि इसके लिए बॉर्डर कैसे सेट होगा बॉर्डर को सेट करने के हम यूज़ करते हैं अपनी बॉर्डर प्रॉपर्टीज का तो तीन मेजर प्रॉपर्टीज हमारे पास होती है एक होती है बॉर्डर विड्थ बॉर्डर विड्थ बताती है कि कितना चौड़ा बॉर्डर आपको चाहिए कि आपको टू पिक्सल्स का बॉर्डर चाहिए या पांच पिक्सल्स का चाहिए या 10 पिक्सल्स का चाहिए उसके बाद आ जाता है बॉर्डर स्टाइल बॉर्डर स्टाइल बताता है कि आपको सॉलिड बॉर्डर चाहिए या डॉटेड चाहिए या डैश चाहिए तो अलग-अलग डिफरेंट डिफरेंट स्टाइल के बॉर्डर्स को हम क्रिएट कर सकते हैं जैसे क्या करते हैं अपने डिव के लिए अपने बॉर्डर को हम क्रिएट करने वाले हैं तो डिव के लिए सबसे पहले तो बॉर्डर विड्थ इसको हम देते हैं टू पिक्सल्स सेफ रिफ्रेश तो अभी क्या हुआ कोई चेंज नहीं आया क्योंकि हमने बॉर्डर को कोई स्टाइल या कोई कलर नहीं दिया वो चीजें भी हमें सेट करनी पड़ेगी अब क्या करेंगे इसे हम दे देंगे कोई बॉर्डर स्टाइल अब अलग-अलग डिफरेंट डिफरेंट स्टाइल के हमारे पास बॉर्डर होते हैं लेट्स सपोज हमने इसे सॉलिड दिया व्हिच इज द मोस्ट कॉमन बॉर्डर स्टाइल सेव रिफ्रेश तो क्या हुआ अब मुझे मेरा डिव के अराउंड एक बॉर्डर दिखाई दे रहा है एक ब्लैक कलर का बॉर्डर आ गया है बाय डिफॉल्ट एंड बाय डिफॉल्ट बॉर्डर्स हमारे ब्लैक कलर के क्रिएट होते हैं पर हम चाहें तो बॉर्डर कलर यूज करके इसे चेंज कर सकते हैं बॉर्डर कलर प्रॉपर्टी से इसे हम एक ब्राउन कलर का बॉर्डर दे सकते हैं सेव रिफ्रेश तो ये क्या हुआ ब्राउन कलर का बॉर्डर मेरे पास आ गया है इस बॉर्डर के डिफरेंट डिफरेंट स्टाइल्स हैं जिनको हम चेंज कर सकते हैं तो इंस्पेक्ट करके इस पर जाते हैं एंड इसका जो बॉर्डर स्टाइल है सॉलिड से हटाकर लेट्स से इसको हम डैश करते हैं तो डैश बॉर्डर कुछ ऐसा दिखाई देता है इसके अलावा हम इसे डॉटेड बॉर्डर भी दे सकते हैं तो डॉटेड बॉर्डर मेरे पास कुछ ऐसा दिखाई देगा या फिर चाहे तो डबल बॉर्डर भी दे सकते हैं तो डबल बॉर्डर में डबल लाइन का बॉर्डर मेरे पास आ जाएगा तो जिस तरीके की चीजें हम टेक्स्ट डेकोरेशन में करते थे अपनी अंडरलाइन ओवरलाइन के साथ उसी सिमिलर तरीके की चीजें हम अपने बॉर्डर के साथ भी कर सकते हैं तो यहां पे वापस से इसे सॉलिड कर देते हैं तो ये मेरे पास सॉलिड बॉर्डर आ गया हम चाहे तो इसकी बॉर्डर विड्थ को भी इंक्रीज कर सकते हैं पांच पिक्सल्स का बॉर्डर थोड़ा सा मोटा दिखाई देगा 10 पिक्सल्स का बॉर्डर उससे भी मोटा दिखाई देगा बट अगर हम यहां पर वन पिक्सेल का बॉर्ड बड कर दें तो वो बहुत ही थिन इफेक्ट देगा इसको हम चाहे तो अपना बॉर्डर कलर भी चेंज कर सकते हैं पिंकी बॉर्डर हो गया तो व बिल्कुल चेंज हो जाएगा रेड बॉर्डर हम इसे दे सकते हैं या चाहे तो ग्रीन बॉर्डर हम इसे दे सकते हैं या फिर सिंपल प्लेन ब्लैक बॉर्डर भी हम इसे दे सकते हैं तो हम तीन मेजर प्रॉपर्टीज को सेट करते हैं जब भी हमें किसी भी एलिमेंट के बॉर्डर को सेट करना होता है व्हिच इज माय बॉर्डर विड्थ माय बॉर्डर स्टाइल एंड माय बॉर्डर कलर अब हम क्या करने वाले हैं हेडिंग h1 को भी एक बॉर्डर दे देते हैं तो इसको भी सबसे पहले तो तो इसकी बॉर्डर विड्थ सेट करते हैं लेट्स से थ्री पिक्सल्स हमने सेट किया इसको भी बॉर्डर स्टाइल दे देते हैं अपना डैश बॉर्डर हमें चाहिए एंड इसे एक बॉर्डर कलर दे देते हैं कि हमें इसके लिए ब्लैक कलर का बॉर्डर चाहिए सेफ एंड रिफ्रेश तो ये मेरी हेडिंग हो गई जिसके अराउंड एक बॉर्डर अपने आप में डिस्प्ले होकर मेरे पास आ गया अब एक और चीज देखते हैं जो हमने ऑलरेडी पढ़ी थी व्च वाज टेक्स्ट अलाइन अगर मैं हेडिंग के लिए टेक्स्ट अलाइन प्रॉपर्टी को यहां पर इफ आई मेक इट सेंटर सेंटर कर देते हैं सेव रिफ्रेश तो हेडिंग कहां गई हेडिंग पूरे पेज के सेंटर में नहीं गई इस बार हेडिंग अपने बॉक्स के सेंटर में गई यानी हेडिंग को जितनी हमने विड्थ और हाइट अलाउ की है उस विड्थ के अब हेडिंग सेंटर में उसका टेक्स्ट चला गया है तो यही इंटरेस्टिंग प्रॉपर्टी थी कि जब भी हम टेक्स्ट अलाइन की बात कर रहे थे टेक्स्ट अलाइन का मतलब ये बिल्कुल नहीं होता है कि पूरे डॉक्यूमेंट के हिसाब से अलाइन मेंट हो रहा है टेक्स्ट अलाइन मेंट का मतलब होता है कि जितनी आपको स्पेस दी गई है उसके हिसाब से भी आपका अलाइन मेंट होगा तो जितनी स्पेस हेडिंग को दी गई थी उस हिसाब से वो अब सेंटर में आ गया है अपने इस रेक्टेंगल बॉक्स के हम चाहे तो डिव के कंटेंट को भी सेंटर में कर सकते हैं इसे हम दे सकते हैं टेक्स्ट अलाइन इनफैक्ट इसे सेंटर नहीं इसे एक बार राइट करके देखते हैं सेव रिफ्रेश तो ये क्या हुआ जितना भी टेक्स्ट था मेरे डिव के राइट साइड में आ गया पेज के राइट साइड में नहीं आया डिव के राइट साइड में आ गया तो ये बहुत इंपॉर्टेंट चीजें सीएसएस के बारे में क्योंकि कुछ तरीके होते हैं जिससे हम सीएसएस को यूज करना सीख लेते हैं प्रॉपर्टीज याद कर लेते हैं वो सारी सेकेंडरी चीजें प्रॉपर्टी तो याद अल्टीमेटली हो ही जाएगी नहीं तो आप डॉक्यूमेंट ग भी कर लेंगे पर इंपॉर्टेंट चीज है कि हम प्रॉपर्टीज को समझे कि प्रॉपर्टीज एक्चुअली पेरेंट एलिमेंट से किस तरीके से चेंज होती हैं या उन पे अगर हमने हाइट विड्थ जैसी सीएसएस सेट कर दी तो उस हिसाब से कैसे चेंज होंगी क्योंकि सीएसएस ऐसी चीज है जो कंफ्यूज बहुत जल्दी कर देती है तो जितना गहराई से हम चीजों को अच्छे से समझते हुए चलेंगे उतना हमारे लिए बेटर रहेगा तो इस तरीके से हम अपने बॉर्डर को सेट कर सकते हैं यूजिंग स्टाइल कलर एंड आवर विड्थ नेक्स्ट हम बात कर ने वाले हैं बॉर्डर शॉर्ट हैंड के बारे में अब शॉर्ट हैंड बेसिकली शॉर्ट फॉर्म होता है या कह सकते हैं शॉर्टकट या शॉर्ट तरीका होता है किसी भी चीज को लिखने का अभी तक हमने बॉर्डर की तीन प्रॉपर्टीज को पढ़ा था विड्थ स्टाइल एंड कलर इन तीनों को जब भी हमें मिक्स करके सिंगल प्रॉपर्टी में लिखना हो तो उसके लिए हम यूज़ कर सकते हैं बॉर्डर प्रॉपर्टी जिसमें सबसे पहले हम मेंशन करते हैं अपनी विड्थ उसके बाद हम मेंशन करते हैं अपना स्टाइल एंड उसके बाद हम मेंशन करते हैं बॉर्डर का कलर तो तीनों को एक साथ लिखकर हम सिंगल लाइन के अंदर अपनी प्रॉपर्टी को मेंशन कर सकते हैं तो जैसे अगर हमें अपनी ऑलरेडी एसिस्टिंग प्रॉपर्टीज को शॉर्ट हैंड में कवर करना हो तो उसके लिए हम लिख सकते हैं बॉर्डर कोलन सबसे पहले विड्थ लिखेंगे टू पिक्सल्स उसके बाद स्टाइल लिखेंगे सॉलिड एंड उसके बाद अपना कलर लिखेंगे ब्राउन एंड इतने पार्ट को हम कमेंट आउट कर सकते हैं कमेंट आउट करने के लिए यहां स्लैश स्टार एंड यहां स्टार स्लैश तो इतना पार्ट मेरे पास कॉमेंट आउट हो गया एंड इसको अब हम सेव करके कर सकते हैं रिफ्रेश तो कोई चेंज नहीं आएगा क्यों क्योंकि जो काम ये तीन लाइने कर रही थी वो वो सारा काम अब ये सिंगल लाइन कर रही है सेम चीज हम h1 हेडिंग के लिए कर सकते हैं जो काम ये तीन लाइने कर रही थी कमांड एंड स्लैश पुट करके इसको कर देते हैं कॉमेंट आउट एंड अब लिख देते हैं अपना बॉर्डर शॉर्ट हैंड थ्री पिक्सल्स डैश एंड कलर लिख देते हैं अपने पास ब्लैक सेव एंड रिफ्रेश तो कोई चेंज नहीं आया क्योंकि सेम काम मेरा शॉर्ट हैंड परफॉर्म करता है तो इस तरीके से किसी भी एलिमेंट के लिए हम उसका बॉर्डर डिफाइन कर सकते हैं नेक्स्ट हम बॉर्डर से रिलेटेड एक बहुत इंटरेस्टिंग प्रॉपर्टी को पढ़ेंगे व्हिच इज बॉर्ड रेडियस बॉर्डर रेडियस का काम होता है कि वह जो बॉर्डर के एजेस होते हैं यानी किसी भी एलिमेंट का जो बॉर्डर होगा यूजुअली वो रेक्टेंगल शेप का होगा तो इसके एजेस एजेस यानी इसका जो कॉर्नर है ये मेरा लेफ्ट टॉप वाला कॉर्नर ये मेरा राइट टॉप वाला कॉर्नर यह मेरा राइट बॉटम वाला कॉर्नर एंड यह मेरा लेफ्ट बॉटम वाला कॉर्नर इन कॉर्नर्स को वो राउंड करने के काम आता है यानी आपने कई बार ऐसे बॉक्सेस देखे होंगे जिसमें इस तरीके की राउंड शेप होगी यानी एजेस के अराउंड इस तरीके की कुछ राउंड शेप क्रिएट होगी एंड वो पॉइंटेड नहीं होंगे अपने कॉर्नर से तो उस तरीके की राउंड शेप अगर किसी बॉक्स के अंदर हमें लानी होती है तो उसके लिए हम बॉर्डर रेडियस को यूज़ करते हैं बॉर्डर रेडियस को यूज़ करने के हम दो तरीके पढ़ेंगे पहला है कि डायरेक्टली हम पिक्सल्स में वैल्यू सेट कर सकते हैं कि उस बॉर्डर जब वो राउंड बनेगा तो उसकी क्या रेडियस होनी चाहिए कितना राउंड होना चाहिए जितनी बड़ी ये रेडियस होती है उतना ज्यादा राउंड मेरा बॉर्डर होता है जितनी छोटी ये रेडियस होती है उतना कम राउंड मेरा बॉर्डर होता है यानी मेरा बॉक्स होता है इसके लिए एक बार एग्जांपल देखते हैं हम क्या करेंगे इक्सड थोड़ी सी ऐड कर देते हैं बर लाइन ब्रेक के लिए यूज़ होता है एचटीएमएस मेरे पास आ गए यहां पर h1 का स्टाइल हम हटा देते हैं सेव रिफ्रेश तो इनके लिए हाइट हमने सेट कर रखी है 100 पिक्सल्स विड्थ भी 100 पिक्सल्स तो ये क्या है मेरे पास स्क्वेयर बॉक्सेस हैं तो स्क्वेयर बॉक्सेस हैं इनको बैकग्राउंड कलर बॉर्डर दे रखा है टेक्स्ट अलाइन राइट करने की अभी जरूरत नहीं है लेफ्ट में भी रहे तो कोई फर्क ज्यादा पड़ेगा नहीं तो ये मेरे तीन बॉक्सेस हैं अब इन तीनों बॉक्सेस के लिए हम इनके एजेस को थोड़ा सा राउंड करने वाले हैं उसके लिए हम प्रॉप यूज करेंगे बॉर्डर रेडियस बॉर्डर रेडियस को सबसे पहले स्मॉलेट वैल्यू वन पिक्सेल पे सेट करके देखते हैं सेव रिफ्रेश तो ज्यादा कुछ चेंज यहां पर देखने को मुझे मिला नहीं इसको थोड़ा सा बढ़ाते हैं एंड लेट्स मेक इट फाइव पिक्सल्स सेव रिफ्रेश तो अब छोटा सा चेंज मुझे दिखाई दिया ये जो बॉर्डर की रेडियस थी यह पॉइंटेड की जगह क्या हो गई है हल्की सी राउंड शेप इसमें आनी शुरू हो गई है एंड अब अगर इसे मैं कर दूं 25 पिक्सल्स जो कि काफी बड़ी वैल्यू होगी फाइव टाइम्स तो ये बॉक्स काफी ज्यादा राउंड हो गए थोड़ी सी कम इसको वैल्यू देते हैं 15 पिक्सल्स के अराउंड तो ये क्या हुआ अब जो एजेस हैं सारे के सारे बॉक्सेस के वो राउंड शेप के आने लग गए हैं जो कॉर्नर है पॉइंटेड नहीं है अब राउंड शेप के हैं तो इस तरीके से हमें किसी भी बॉक्स को अगर राउंडेड शेप देनी है तो उसे हम बॉर्डर रेडियस दे सकते हैं 15 पिक्सल्स अब एक और यहां पे ट्रिक की बात करते हैं जब भी हमारा कोई भी बॉक्स एक स्क्वेयर शेप में हो स्क्वेयर शेप यानी उसकी हाइट एंड विड्थ सेम है तो उस केस में अगर हम बॉर्डर रेडियस को सेट कर देते हैं 50 पर तो हमें क्या मिलेगा हमें एक सर्कल मिल जाएगा तो सीएसएस के अंदर जब भी मुझे सर्कल्स क्रिएट करने होते हैं एक तो होते हैं रेक्टेंगल क्रिएट करना रेक्टेंगल के लिए हाइट विड्थ हम सेट कर सकते हैं बॉक्स के लिए हाइट विड्थ सेट कर सकते हैं पर जब भी सीएसएस को यूज़ करके मुझे सर्कल्स क्रिएट करने हैं तो हम वहां पर पहले तो एक बॉक्स क्रिएट करते हैं यानी एक स्क्वेयर बॉक्स और उस स्क्वेयर बॉक्स की बॉर्डर रेडियस को हम सेट कर देते हैं टू 50 जैसे ही बॉर्डर रेडियस 50 पर सेट हो गई वैसे ही मेरे पास एक सर्कल क्रिएट होकर आ गया अगर इस बॉर्डर रेडियस को मैं 25 पर सेट कर दूं सेव रिफ्रेश तो इस तरीके का मेरे पास एलिमेंट क्रिएट होकर आएगा बट सर्कल के लिए हमें इसे 50 पर सेट करना पड़ेगा तो एक शॉर्ट तरीका है सर्कल्स को क्रिएट करने का तो बॉर्डर रेडियस में हम दो वैल्यू सेट कर सकते हैं एक होता है हमारा डायरेक्ट पिक्सेल वैल्यू जो यूनिट्स में होती है एंड दूसरा हम सेट कर सकते हैं परसेंटेज नेक्स्ट इसस प्रॉपर्टी की हम बात करने वाले हैं इसका नाम है पैडिट पैडिट की अगर बात करें तो जब भी हमारे पास कोई भी बॉक्स होता है तो उस बॉक्स के अंदर बाउ बाउंड्री यानी हमारा जो बॉर्डर है बॉर्डर और कंटेंट के जो बीच का स्पेस है इसे हम पैडिट कहते हैं मतलब हम अपने बॉक्स के कंटेंट वाले एरिया और उसके बॉर्डर के बीच में कुछ एडिशनल स्पेस को ऐड करते हैं तो पैडिट को हम डिफरेंट डिफरेंट डायरेक्शन से ऐड कर सकते हैं अगर हम सिर्फ लेफ्ट से स्पेस देना चाहते हैं मतलब सिर्फ ये वाली स्पेस रखना चाहते हैं तो उसके लिए हम पैडिट लेफ्ट यूज़ कर सकते हैं सिर्फ राइट से स्पेस देना चाहते हैं तो पैडिट राइट रख सकते हैं टॉप से देना चाहते हैं तो पैडिट टॉप कर सकते हैं एंड बॉटम से स्पेस देना चाहते हैं तो हम इस वाली स्पेस के लिए पैडिट बॉटम रख सकते हैं तो पैडिट को हम पिक्सल्स में दे सकते हैं जैसे पैडिट लेफ्ट को हम 25 पिक्सल्स रख सकते हैं तो इस तरीके से कंटेंट एंड बाउंड्री के बीच में एक स्पेस क्रिएट हो जाएगी एक बार इसे करके देखते हैं हमने क्या किया था हमने ऑलरेडी इस तरीके के बॉक्सेस बनाए हुए थे सबसे पहले तो इन्हें इनकी ओरिजिनल शेप में ले आते हैं सर्कल से स्क्वायर तक तो एक चीज यहां पर नोटिस करनी है पैडिट ऐड करने से पहले कि एक तो ये जो मेरा कंटेंट है यानी डिव वन जो मैंने टेक्स्ट लिखा हुआ है डिव के अंदर वो प्रॉ प्रॉपर्ली लेफ्ट अलाइन है तो वो कहां से स्टार्ट हो रहा है वो लेफ्ट से स्टार्ट हो रहा है बिल्कुल बाउंड्री से एंड इनफैक्ट इसको अगर हम एनालाइज करें तो यहां पर इस सिंगल इंडिविजुअल डिव पर जाए तो इसका ब्लू वाला पार्ट जो इसका कंटेंट एरिया होता है जब भी हम इंस्पेक्ट करते हैं क्रोम के अंदर तो ब्लू से जो हाइलाइटेड पार्ट होता है वो हमारा कंटेंट एरिया होता है एंड ये जो ऑरेंज है ये हमारी मार्जिन है जिसके बारे में हम अभी पढ़ने वाले हैं तो यहां पर बिल्कुल बाउंड्री पर मेरा कंटेंट स्टार्ट हो जाता है अब हम क्या करने वाले हैं इसे हम पैडिट देंगे लेफ्ट से लेट्स सपोज इसे हम हम लेफ्ट से पैडिट देंगे 20 पिक्सल्स या 25 पिक्सल्स इसे रख लेते हैं सेव एंड रिफ्रेश तो अब एक छोटा सा चेंज आया चेंज ये आया कि अब ये जो कंटेंट है ये डायरेक्टली लेफ्ट से स्टार्ट नहीं हो रहा थोड़ा सा गैप आ गया बाउंड्री और कंटेंट के बीच में ऐसा क्यों हुआ एक बार इंस्पेक्ट करते हैं इस एलिमेंट पर गए तो अब ब्लू वाला जो कंटेंट एरिया है उस ब्लू वाले एरिया के बिल्कुल लेफ्ट से मेरा डिव वन स्टार्ट हो रहा है बट एक बीच में स्पेस आ गई है बाउंड्री और ब्लू वाले एरिया के जो ग्रीन से हाइलाइटेड है ये जो ग्रीन से हाइलाइटेड स्पेस है इसी को हम पैडिट कहते हैं अगर मैं इस पर क्लिक करूं तो हम क्या कर सकते हैं राइट में जाके इंस्पेक्ट वाली जो विंडो है इसके अंदर पूरा का पूरा हमें अपना बॉक्स मॉडल दिखाई देता है मतलब इस इंडिविजुअल एलिमेंट के लिए अगर मुझे इसका कंटेंट एरिया देखना है तो वो 100 बा 100 का मुझे दिखाई दे रहा है 100 पिक्सेल नट 100 पिक्सेल जो इसकी हाइट एंड विड्थ है अगर हम इस सेम एलिमेंट के लिए इसकी पैडिप जाके स्क्रॉल कर सकते हैं पैडिट कलर में हाईलाइट है और यहां दिख रहा है ना टॉप पैडिट है ना राइट पैडिट है ना बॉटम पैडिव लेफ्ट से डिंग दी हुई है कितने पिक्सल्स की 25 पिक्सल्स की ऊपर जाकर और देख सकते हैं बॉर्डर कितना है बॉर्डर टॉप लेफ्ट राइट बॉटम हर जगह से टू पिक्सल्स ईच है एंड अभी मार्जिन इसको हमने नहीं दी हुई एक्स्ट्रा तो अगर पैडिट को सिर्फ एनालाइज करें तो यहां दिख रही है कि 25 पिक्सल्स की लेफ्ट से पैडिट दी गई है तो जो स्पेस है पैडिट वाली उसके अंदर कंटेंट नहीं आता कंटेंट हमेशा कंटेंट बॉक्स से स्टार्ट होगा एंड कंटेंट बॉक्स के बिल्कुल लेफ्ट से वो स्टार्ट हो गया है तो यह वाला मेरा कंटेंट बॉक्स बन गया एंड बाउंड्री यानी बडर और कंटेंट के बीच का जो एरिया है इसको हम पैडिलटन हम इसे राइट से भी दे सकते हैं तो पैडिट से दे 25 पिक्सेल रिफ्रेश करें तोब क्या हुआ दोबारा से जाके इंस्पेक्ट कर सकते हैं सेकंड वाले डिव को इंस्पेक्ट करते हैं तो यहां पर इस डिव के लिए जो पडि है वो 25 पिक्सेल लेफ्ट से 25 राइट से सिमिलरली हम टॉप से भी दे सकते हैं बॉटम से भी दे सकते हैं लेट्स सपोज हमने बॉटम से पडि दी सेव रिफ्रेश बॉटम से करें तो लेफ्ट से ग्रीन एरिया दिख रहा है बॉटम से दिख रहा है इस पर क्लिक करते ही हमारे राइट में जाके मुझे पूरा दिखाई देगा एलिमेंट के लिए बॉक्स मॉडल तो 25 पिक्सल्स फ्रॉम लेफ्ट 25 पिक्सल्स फ्रॉम बॉटम अब जैसे बॉर्डर के लिए शॉर्ट हैंड की हमने बात की थी वैसे ही हमारा पैडिट के लिए भी शॉर्ट हैंड होता है पैडिट के लिए जो शॉर्ट हैंड होता है उसमें या तो डायरेक्टली हम एक सिंगल वैल्यू लिख सकते हैं अगर मैंने सिंपली पैडिट लिखकर सिंगल वैल्यू लिखा तो इसका मतलब है टॉप राइट बॉटम एंड लेफ्ट चारों डायरेक्शन से सेम पैडिपला होगी नहीं तो हम एक फिक्स फॉर्मेट फॉलो कर सकते हैं यानी हमें अगर अलग-अलग पैडिया चारों डायरेक्शंस में तो हम क्लॉक वाइज जाते हैं मतलब अगर यह मेरा कोई भी इंडिविजुअल बॉक्स है तो इसमें क्लॉक वाइज जाने का मतलब होगा मैं यहां से शुरू करूं और s डायरेक्शन में जाऊं तो सबसे पहले हम टॉप की पैडिट लिखते हैं फिर हम राइट की पैडिट लिखते हैं फिर हम बॉटम की पैट लिखते हैं फिर हम लेफ्ट की पैडिट मैंने चार अलग-अलग पैडिट की वैल्यूज दी हुई है तो ये टॉप के लिए है राइट के लिए है बॉटम के लिए है लेफ्ट के लिए है और ये क्लॉक वाइज फॉर्मेट हमेशा फॉलो होता है तो एक बार इसको ट्राई करते हैं शॉर्ट हैंड के लिए हम क्या करेंगे सबसे पहले तो इंडिविजुअल पैडिट ऐड करेंगे फॉर 25 पिक्सल्स सेव रिफ्रेश तो अब हर डायरेक्शन में इंडिविजुअल पैडिट 25 पिक्सल्स आ गई है ये ग्रीन जो एरिया है चारों डायरेक्शंस में है एंड इंस्पेक्ट में जाके हम चेक भी कर सकते हैं 25 ऑन ईच डायरेक्शन अब अगर मुझे अलग-अलग देनी है हर डायरेक्शन में जैसे वन पिक्सल टू पिक्सल थ्री पिक्सल फोर पिक्सल इसको कर लेते हैं सेव एंड रिफ्रेश तो अब इसे जाकर एनालाइज करते हैं यह मेरा बॉक्स है यह मेरी पैडिया टॉप में वन पिक्सेल है राइट में टू पिक्सेल बॉटम में थ्री पिक्सल्स एंड लेफ्ट के अंदर फोर पिक्सल्स तो इस तरीके से हमारी पैडिका करती है जब भी मुझे बाउंड्री बॉर्डर और मेरे कंटेंट एरिया के बीच में कोई स्पेस क्रिएट करना होता है तो नेक्स्ट जिस प्रॉपर्टी की हम बात करने वाले हैं ये है मेरी मार्जिन प्रॉपर्टी मार्जिन बिल्कुल पैडिट की तरह वर्क करती है बट पैडिट होता है एरिया जो कंटेंट और बॉर्डर के बीच में आता है जबकि मार्जिन दो बॉक्सेस के बीच का एरिया होता है मतलब एक बॉक्स के बॉर्डर से लेकर दूसरे बॉक्स के बॉर्डर के बीच का जो एरिया है इसे हम मार्जिन कहेंगे मार्जिन को भी हम राइट से ऐड कर सकते हैं लेफ्ट टॉप एंड बॉटम तो अलग-अलग डायरेक्शन से मार्जिन ऐड की जा सकती है जैसे अभी अगर ये तीन बॉक्सेस मेरे पास अवेलेबल है और हर बॉक्स को मैं एक मार्जिन दे दूं लेट्स सपोज हम हर बॉक्स को एक मार्जिन देते हैं फ्रॉम टॉप मार्जिन फ्रॉम टॉप इसे हम देते हैं 50 पिक्सल्स सेव एंड रिफ्रेश तो अब क्या हुआ अब हर बॉक्स पर जाकर हम स्क्रोल करें तो सबसे पहले तो ये ऑरेंज वाला एरिया जो मुझे सिर्फ साइड में दिख रहा था राइट साइड में बाय डिफॉल्ट मार्जिन इसलिए डेड थी क्योंकि डिव क्या होता है डिव का जो डिस्प्ले टाइप होता है वो बाय डिफॉल्ट ब्लॉक टाइप का होता है मतलब डिव पूरी की पूरी विड्थ घेर है इसलिए बाय डिफॉल्ट कंटेंट के अराउंड जो एरिया बच गया वो फिर मार्जिन के अंदर ऐड हो जाता है बट टॉप से कोई एक्स्ट्रा मार्जिन नहीं मिलती डिव को बट यहां पर मैंने टॉप से इसे एक्स्ट्रा मार्जिन दी है और वो एक्स्ट्रा मार्जिन कितनी है वो इसके बॉक्स मॉडल में जाकर देख सकते हैं वो है इक्वल टू 50 पिक्सल्स तो पैडिट हमारी ग्रीन से हाइलाइटेड होती है क्रम के अंदर एंड मार्जिन हमारी ऑरेंज से हाइलाइटेड होती है अगर आप किसी और ब्राउजर पे हैं तो डिफरेंट कलर्स यूज हो रहे होंगे बट वो कलर्स कंसिस्टेंट रहेंगे आपके पूरे ब्राउजर पर तो मार्जिन हमने इसे टॉप से दी है 50 पिक्सल्स नीचे वाले एलिमेंट को जाकर सेकंड डिव को जाके स्क्रोल करें तो इसके लिए भी मार्जिन टॉप से सिर्फ 50 पिक्सल्स अब आप बोल सकते हैं राइट से मिली हुई है तो उसको हमने ऑलरेडी एक्सप्लेन कर दिया क्योंकि डिव है तो बाय डिफॉल्ट राइट से हमेशा जो भी एरिया बन जाएगा उसके लिए उसे मार्जिन काउंट ही किया जाएगा एंड थर्ड डिव की बात करें तो इसे भी टॉप से हमने मार्जिन दिए है हम चाहे तो बॉटम से भी दे सकते हैं सेम 50 पिक्सल्स की जो मार्जिन है उसे बॉटम से देकर देखते हैं इस पर जाकर स्क्रोल करेंगे इसके बॉक्स मॉडल पर आएंगे तो ये इसे मार्जिन मिला हुआ है बॉटम से बॉटम से 50 पिक्सल्स तो जो ऑरेंज वाला एरिया हाइलाइटेड है वो मार्जिन हो गई मतलब वो एक बॉक्स से दूसरे बॉक्स के बीच का गैप बन गया है एंड जैसे हमारा पैडिट के लिए शॉर्ट हैंड होता है वैसे ही हमारा मार्जिन के लिए शॉर्ट हैंड होता है जिसमें अगर हमने सिंगल वैल्यू दी तो ये जो मार्जिन है ये हर डायरेक्शन में अप्लाई होगी एंड अगर चारों डायरेक्शंस के लिए मुझे अलग-अलग चाहिए तो फिर वही क्लॉक वाइज फॉर्मेट हम फॉलो करेंगे टॉप राइट बॉटम लेफ्ट का इसको भी एक बार टेस्ट आउट करते हैं जैसे इस बार हम मार्जिन देने वाले हैं ऑफ 25 पिक्सल्स इसको कर लेते हैं सेव एंड यहां पैडिट भी देते हैं 25 पिक्सल्स की सेव रिफ्रेश अब एक चीज हम एनालाइज करेंगे एक सिंगल बॉक्स के लिए तो यहां पर क्लिक किया इसके बॉक्स मॉडल में ये तो मेरे पास इसकी पैडिट आ गई जो कहां पर आ रही है बॉर्डर के अंदर वाली साइड आ रही है बट मार्जिन कहां आती है मार्जिन बॉर्डर के बाहर वाली साइड आती है अब लेफ्ट बॉटम एंड टॉप की तो मार्जिन सेम ही है राइट से एक्स्ट्रा मिल रही है क्योंकि विड्थ एक्स्ट्रा इसको अवेलेबल है सिमिलर बॉक्स मॉडल हम देखेंगे अपने सेकंड डिव के लिए तो उसके लिए भी सेम सी चीज हमें दिखाई देगी ये मेरी मार्जिन आ जाएगी तो इस तरीके से मार्जिन और पैडिट को हम यूज़ करते हैं जब भी दो एलिमेंट्स होंगे बाहर की तरफ उनके बीच में मुझे स्पेस चाहिए तो मार्जिन यूज़ करेंगे जब भी एक एलिमेंट के अंदर मुझे थोड़ा सा स्पेस चाहिए तो हम पैडिट को यूज करेंगे नेक्स्ट हम सॉल्व करने वाले हैं अपने प्रैक्टिस सेट नंबर थ्री को तो इसके अंदर सबसे पहला सवाल सॉल्व करते हैं क्रिएट अ डिव विद हाइट एंड विड्थ ऑफ 100 पिक्सल्स तो सिर्फ इतना पार्ट अभी सॉल्व करते हैं एक पल के लिए क्या करेंगे इसको क्रॉस कर देते हैं स्टाइल को भी कंपलीटली हम हटाने वाले हैं इंक्स डॉ एचटीएमएल को भी खाली कर देते हैं और अभी हमें बोला गया है कि हमें एक डिव क्रिएट करना है तो ये हमने डिव क्रिएट कर दिया इस डिव को हम हाइट देने वाले हैं 100 पिक्सल्स एंड इसे विड्थ भी हम दे ने वाले हैं 100 पिक्सल्स तो कुछ इस तरीके का डिव हमारे लिए क्रिएट होगा जो अभी विजिबल नहीं है क्यों क्योंकि इसके अंदर अभी हमने कोई भी कंटेंट नहीं ऐड किया हुआ अब हमें क्या करना है सेट इट्स बैकग्राउंड कलर टू ग्रीन एंड साथ के साथ इसकी बॉर्डर रेडियस को हम करेंगे 50 पर बॉर्डर रेडियस को 50 पर करने का मतलब हमने अभी सीखा है कि इसकी शेप को हम स्क्वेयर से अब बनाने वाले हैं सर्किल की तरफ तो सबसे पहले इसका बैकग्राउंड कलर सेट करते हैं बैकग्राउंड कलर टू ग्रीन सेव रिफ्रेश तो यह मेरा आ गया एंड इसी सेम डिव के लिए अब हम इसकी बॉर्डर रेडियस को सेट करेंगे टू 50 पर सेव रिफ्रेश तो इस तरीके से मैंने ग्रीन कलर का सर्कल क्रिएट कर दिया है एंड काफी इंटरेस्टिंग चीजें कर सकते हैं हम सीएसएस के अंदर सर्कल्स बनाकर तो होमवर्क प्रॉब्लम यह है कि आपको एक बॉक्स क्रिएट करना है और यह ऐसा होमवर्क है जो आप आगे की सारी प्रॉपर्टीज मतलब लेवल टू कंप्लीट किए बिना नहीं कर पाएंगे अभी और भी काफी सारी प्रॉपर्टीज हैं जो इसको बनाने के लिए हमें सीखनी पड़ेंगी आपको एक बॉक्स क्रिएट करना है रेक्टेंगल जिसके अंदर तीन सर्कल होंगे यह वाला मैं सर्कल रेड कलर का होगा ये वाला मेरा सर्कल येलो कलर का होगा ये वाला मेरा सर्कल ग्रीन कलर का होगा और तीनों एक के नीचे एक होंगे एंड ये जो शेप होती है दिस इज अ ट्रैफिक लाइट शेप तो आप इस चीज को क्रिएट कर सकते हैं एज योर होमवर्क तो जितनी भी हम प्रॉपर्टीज पढ़ेंगे लेवल टू तक वो सारी की सारी आप यहां पर यूज करने वाले तो सोचना है थोड़ा सा कि इस चीज को हम कैसे क्रिएट करेंगे अब आ जाते हैं अपने क्वेश्चन टू की तरफ ये थोड़ा सा इंटरेस्टिंग होने वाला है क्वेश्चन टू के अंदर हम क्रिएट करेंगे अपना नव बार वव बार क्या होता है नाव बार हमारी नेविगेशन बार होते हैं जब भी हम वेबसाइट के ऊपर जाते हैं ऊपर कुछ-कुछ ऑप्शन हमें दिखाई देते हैं जैसे होम का ऑप्शन होता है कई सारी वेबसाइट्स पर या आप अपना कॉलेज की वेबसाइट पर जाएंगे तो माय कोर्सेस का ऑप्शन आपको मिल जाएगा लॉग आउट साइन इन के ऑप्शंस आपको मिल जाएंगे तो यूजुअली टॉप पे होते हैं वेबसाइट के अगर मैं एक एग्जांपल दिखाऊं तो amazononline.in कार्ट का ऑप्शन मिल जाएगा तो यह क्या है जो टॉप पे एक पैनल होता है जिसमें काफी सारे ऑप्शंस होते हैं वेबसाइट पर घूमने के लिए या मेन ऑप्शंस कह सकते हैं इनको उसको हम नेविगेशन बार कहते हैं जो वेबसाइट पर नेविगेट करने के काम आता है तो इस तरीके का amazon2 नेविगेशन बार हम क्रिएट करने की कोशिश करेंगे अब ये देखने में उतना सुंदर नहीं लगेगा ना ही ये बिल्कुल amazononline.in पूरी वेबसाइट को बिल्ड होने में तो उसका छोटा-छोटा फीचर जो है वो महीनों में आता है मतलब अगर amazononline.in कांटेक्ट अस का ऑप्शन आ सकता है और यहां पर हम एक सर्च बार देंगे अगर amazon.in को सर्च करना है विद अ सर्च बटन अब ऑलरेडी सवाल के अंदर कुछ-कुछ चीजें हैं जो हमें दी हुई है क्या चीजें दी हुई है सबसे पहले तो मुझे बताया हुआ है कुछ-कुछ लेआउट जो चीजें फिक्स्ड हैं और हमें वैसे ही इंप्लीमेंट करनी है पहले तो कलर्स देख लेते हैं जो बैकग्राउंड का कलर है जो ब्लैकिश कलर है वो हमें यही रखना है मतलब उसका हेक्स कोड हमें ऑलरेडी दिया हुआ है तो आप ये सोच सकते हैं कि आप आप एक डिजाइनर बन गए कंपनी के अंदर डिजाइनर इन द सेंस कि कोडर बन गए हैं फ्रंट एंड डेवलपर और आपको डिजाइनर ने यूआईयू जो डिजाइनर है उसने एक लेआउट दे दिया कि आपको ये प्रिपेयर करना है और अब आपका काम है इसको एक्चुअली कोड करके प्रिपेयर करना यूजिंग द नॉलेज ऑफ सीएसएस जो हमने अभी तक सीखा है तो इसके बैकग्राउंड के लिए ये ब्लैकिश कलर मुझे दिया हुआ है जो येलो कलर यूज हुआ है यहां पर बटन के अंदर और इस टेक्स्ट के अंदर उसका मुझे शेड दिया हुआ है ये हेक्स कोड दिया हुआ है इसके अलावा कई सारी चीजें दी हुई हैं जैसे amazon.in जो है या अकाउंट माय कार्ड कांटेक्ट अस ये सारे के सारे एंकर टैग्स हैं जो एक तरीके से लिंक जो दूसरे पेज पर जा रहे हैं एंड यह हमें ऑब् वियस पता है यह मेरा इनपुट होने वाला है एंड यह बटन मेरा सर्च बटन होने वाला है तो ये बटन टाइप हम क्रिएट करेंगे इसके अलावा आपको स्पेसिंग भी बताई गई है टेक्स साइज भी बताया गया है amazon.in का जो टेक्स्ट साइज है वो 25 पिक्सल्स हमें दिया हुआ है एंड बाकियों का टेक्स्ट साइज नहीं बताया तो हम अज्यू करेंगे कि यह बाय डिफॉल्ट जितना टेक्स्ट साइज होता है एंकर टैग के लिए उतना ही रहेगा इसके अलावा हमें गैप बताया हुआ है जो हमारी हाइट है इस पूरे नेविगेशन बार की वो है 60 पिक्सल्स एंड जो गैप है माय कार्ट और कांटेक्ट इसके बीच में जो गैप है यह है 200 पिक्सल्स एंड ये इवनली स्पेस लग रहे हैं तो ये गैप भी हमारा 200 पिक्सल्स होगा ये गैप भी हमारा 200 पिक्सल्स होगा एंड ये गैप भी हमारा 200 पिक्सल्स होने वाला है तो इस तरीके से हम अपने लेआउट को डिजाइन करेंगे नेविगेशन बार के सबसे पहले बेसिक प्रॉपर एटीएमएल के साथ स्टार्ट करते हैं और इन एलिमेंट्स को क्रिएट करते हैं हम क्या करेंगे जो डिव हमने बनाया था उसको कंप्लीट खाली कर देते हैं उसकी स्टाइलिंग एंड अपने बॉडी को कंप्लीट खाली कर देते हैं अभी प्लेन चीज के साथ स्टार्ट करते हैं तो नेविगेशन बार मुझे बनाना है तो उसके लिए हम क्या कर सकते हैं हम एक डिव को क्रिएट कर सकते हैं और इसको हम आईडी दे सकते हैं फफ बार ये मेरा डिव हो जाएगा जिसको आईडी हम दे देंगे नाव बार अब सबसे पहले तो इस वव बार की हम हाइट सेट कर देते हैं अब यहां पर हाइट सेट करने से पहले एक एडिशनल चीज है जो मैं आपको सिखाना चाहूंगी यूजुअली जब भी बड़े लेवल की जो वेबसाइट्स वर्क करती हैं वहां पर बाय डिफॉल्ट हम व वर्सल जो पैडिट और मार्जिन है उसे जीरो सेट कर देते हैं ऐसा आप चाहे तो ना भी करें तो भी आपका कोड वर्क कर जाएगा उसमें कोई परेशानी वाली बात नहीं है बट बाय डिफॉल्ट यूनिवर्सल पैडिट और मार्जिन को जरो सेट करने का बेसिक कुछ डेवलपर्स की आदत ये होती है कि क्योंकि हम शुरुआत से किसी चीज को क्रिएट कर रहे हैं एक ब्लैंक स्लेट हो जिसमें बाय डिफॉल्ट कोई पैडिट कोई मार्जिन एक्स्ट्रा अवेलेबल नहीं है तो थोड़ा सा आसान रहता है उसमें फिर आपको जो बाय डिफॉल्ट कुछ-कुछ चीजों में जैसे बटंस में हो सकता है या हेडिंग में हो सकता है या किसी और एलिमेंट में बाय डिफॉल्ट जो पैडिट मार्जिन ऐड हो रही है वो फिर आपको और थोड़ी सी हैंडल करनी पड़ती है तो उस चीज से बचने के लिए यूजुअली डेवलपर्स क्या करते हैं किसी बड़े प्रोजेक्ट से पहले सारी बेडिंग मार्जिन को जीरो सेट कर देते हैं तो इस तरीके से हम भी कर सकते हैं हम चाहे ना करें वो भी चल जाएगा हमारे लिए अब सबसे पहले क्या करना है सबसे पहले हम अपने वव बार के लिए इसकी हाइट सेट कर देंगे इसकी जो हाइट सेट होने वाली है दैट इज इक्वल टू 60 पिक्सल्स एंड हम इसका बैकग्राउंड कलर भी सेट कर सकते हैं बैकग्राउंड कलर क्या होने वाला है बैकग्राउंड कलर है हमारे पास 0f 1111 इसको कर लेते हैं सेव एंड रिफ्रेश तो यह मेरा कुछ नेविगेशन बार मेरे लिए सेट हो गया है इसको 100% पे लाऊं तो कुछ इतनी विड्थ आपको अपने ब्राउजर पर दिखाई देने वाली है अब इसके अंदर एलिमेंट्स को ऐड करना स्टार्ट करते हैं सबसे पहले हमने क्या किया सबसे पहले हमने एक एंकर टैग ऐड कर दिया एंड इस एंकर टैग को हम आईडी देने वाले हैं लोगो क्योंकि इसके अंदर हम लोगो ऐड कर रहे हैं यहां पर लिख देते हैं amazon.in इसके अलावा एक और एंकर टैग हम आगे ऐड कर देते हैं एंकर टैग के अंदर यहां पर लिखा होगा अकाउंट एक और ऐड कर देते हैं इसके अंदर हम लिखेंगे माय कार्ड एंड एक और ऐड कर देते हैं इसके अंदर हम लिखने वाले हैं कांटेक्ट अस तो ये डिफरेंट डिफरेंट जो ऑप्शंस है उनको हम लिख देंगे अब यहां पर इन सबको हमने क्रिएट कर दिया पर ये दिखाई नहीं दे रहे दिखाई ना देने का रीजन यह है क्योंकि इनका कलर ब्लैक है तो हम क्या कर सकते हैं सबसे पहले तो जाके अपने जो भी यूनिवर्सल जितना भी टेक्स्ट हम लिखने वाले हैं बाय डिफॉल्ट उसके कलर को हम चेंज कर सकते हैं टू वाइट करेंगे रिफ्रेश तो ये amazon.in मेरे पास लिखा हुआ आ गया यहां पर मेरे पास अकाउंट आ गया मेरे पास माय कार्ट आ गया मेरे पास कांटेक्ट अस आ गया इसके अलावा हम अपने इनपुट भी बना सकते हैं एक कॉमन डिव बना लेते हैं इस डिव के अंदर सबसे पहले तो अपना इनपुट बनाएंगे इनपुट के लिए कुछ प्लेस होल्डर रखेंगे प्लेस होल्डर वो चीज होती है जो बाय डिफॉल्ट इनपुट के अंदर दिखाई देती है तो उसके अंदर लिखेंगे amazon.in एंड इसके बाद हम एक बटन बनाने वाले हैं जिसके अंदर लिखेंगे सर्च इसको कर देते हैं सेव एंड रिफ्रेश तो ये मेरे पास इनपुट आ गया एंड मेरे पास एक बटन आ गया अब हम चाहे तो इस बटन का कलर सेट कर सकते हैं बटन का कलर सेट करने के लिए हम लिख सकते हैं बटन एंड इसका जो बैकग्राउंड कलर है उसको हम सेट कर सकते हैं टू दिस येलो शेड व इज ए0 8804 सेव रिफ्रेश ये मेरे बटन का कलर सेट हो गया एंड मैं चाह तो amazon.in का भी कलर सेट कर सकती हूं तो यहां पर जाकर लोगो को सिलेक्ट करके हम कलर सेट कर सकते हैं फॉर amazon.in व्हिच इज दिस येलो शेड सेव रिफ्रेश तो ये मेरा amazon.in हो गया अब इसके लिए हम चाहे तो इसका फॉन्ट साइज भी सेट कर सकते हैं फॉन्ट साइज में इसको थोड़ा बड़ा करेंगे तो फॉन्ट साइज इसका हमें दिया हुआ है 25 पिक्सल्स तो ये थोड़ा सा बड़ा हो गया व्हिच इज इक्वल टू 25 पिक्सल्स अब यहां पर स्पेसिंग थोड़ी सी बिगड़ी हुई है मेरा जो इनपुट पुट बॉक्स है मेरा जो बटन है ये नेक्स्ट लाइन पर आ रहा है ये नेक्स्ट लाइन पर इसलिए आ रहा है क्योंकि इसको हमने डिव के अंदर ऐड कर दिया है तो बेसिकली डिव के अंदर ऐड करना वाज नॉट अ गुड सॉल्यूशन क्योंकि हमें चीजें कहां चाहिए हमें चीजें सेम लाइन पर चाहिए जैसे ही आप डिव ऐड कर देते हो डिव का जो अंदर का कंटेंट होता है वो नेक्स्ट लाइन पर चला जाता है तो ऐसे करके हमने क्या किया डिव को हटाकर सारे कंटेंट को हम सेम लाइन पर लेकर आ गए अब अपने डिजाइन की तरफ देखते हैं हमने क्या-क्या इंप्लीमेंट कर लिया हमने कलर फॉन्ट साइज सेट कर दिया हमने बैकग्राउंड कलर सेट कर दिया एंकर टैग्स बना लिए हमने हाई सेट कर दी येलो कलर सेट कर दिया यहां पर इसके लिए वाइट कलर सेट कर दिया अपने टेक्स्ट के लिए अब हमारे पास काम है कि हम ये गैप कैसे क्रिएट करें एलिमेंट्स के बीच में तो गैप के लिए हमने दो चीजें सीखी थी मतलब स्पेस जब भी क्रिएट करना है एलिमेंट्स में तो हमने दो चीजें सीखी थी एक होता था हमारा पैडिट एंड एक होता था हमारा मार्जिन तो स्पेस क्रिएट करने के लिए हम दोनों को यूज कर सकते हैं पर यहां पर हमारे लिए कौन सा यूज करना सही रहेगा पैडिट क्या करती थी पैडिट मेरे बॉर्डर और अंदर के जो एलिमेंट्स हैं उसके बीच में स्पेस क्रिएट करती थी जबकि मार्जिन एक एलिमेंट के बॉर्डर से लेकर दूसरे एलिमेंट के बॉर्डर के बीच में स्पेस क्रिएट करती थी अब यहां पर ये जो एंकर टैग है और यह जो दूसरा एंकर टैग है हमें इन दोनों के बीच में स्पेस चाहिए यानी अगर हम इसे इंस्पेक्ट करें थोड़ा सा इंस्पेक्ट करके देखते हैं कौन सा ऐड होना चाहिए जैसे यह मेरा एक एलिमेंट है ये मेरा दूसरा एलिमेंट है ये मेरा तीसरा ये मेरा चौथा एलिमेंट ये मेरा पांचवा एलिमेंट ये मेरा छठा एलिमेंट तो इन सब के बीच में मुझे एक्स्ट्रा स्पेस चाहिए तो उस उसको क्रिएट करने के लिए हम क्या कर सकते हैं सबसे पहले तो एंकर टैग्स में हमें स्पेस चाहिए और ये जो इनपुट है सर्च के लिए और ये जो सर्च बटन है इन दोनों में हमें इतनी एक्स्ट्रा स्पेस नहीं चाहिए क्योंकि लेआउट के अंदर ये दोनों तो पासपास हैं पर हां एंकर टैग्स जो हैं वो एक दूसरे से दूर-दूर है तो उनके लिए अगर मुझे स्पेस चाहिए तो मैं कह सकती हूं कि मुझे एक एंकर टैग से दूसरे एंकर टैग के बीच की स्पेस चाहिए यानी एक एंकर टैग की बाउंड्री से लेकर दूसरे एंकर टैग की बाउंड्री तो बेसिकली हमें मार्जिन को यूज़ करना है पैडिट को यूज नहीं करना तो मार्जिन को यूज़ करने के लिए हम क्या कर सकते हैं एंकर टैग्स के बीच में स्पेस क्रिएट करने के लिए कौन सी मार्जिन हमें यहां पर देने की जरूरत है मैं चाहती हूं इस एंकर टैग और इस एंकर टैग के बीच में डिफरेंस हो इन दोनों के बीच में डिफरेंस हो इन दोनों के बीच में डिफरेंस हो तो मैं यहां पर राइट से स्पेस दे सकती हूं मतलब अगर मैंने a को सेलेक्ट किया एंड यहां से मैंने मार्जिन राइट सेट कर दी क्योंकि मुझे राइट की तरफ से स्पेस क्रिएट करनी है लेट्स सपोज इस मार्जिन को हम सेट कर देते हैं टू 200 पिक्सल्स इसको करेंगे सेव रिफ्रेश और अब इसको कर देते हैं क्रॉस तो ये क्या हुआ मैजिकली सारी चीजें अलाइन हो गई सिर्फ एक लाइन की वजह से व्हिच इज मार्जिन राइट 200 पिक्सल्स कैसे फिगर आउट किया हमने मार्जिन देनी है या नहीं हमने देखा पैडिट कहां से कहां तक होती है बॉर्डर से कंटेंट पर हमें बॉर्डर से कंटेंट नहीं चाहिए हमें तो बॉर्डर से बॉर्डर चाहिए यानी एंकर टैग के बॉर्डर से दूसरे एंकर टैग के बॉर्डर तक तो उसके लिए हमने डिसाइड किया कि हम मार्जिन देंगे और मार्जिन कौन सी डायरेक्शन में देनी थी हमें चाहिए कि राइट साइड में सबके लिए स्पेस क्रिएट हो जाए मतलब amazon.in के राइट्स में स्पेस हो अकाउंट के के राइट में स्पेस हो माय कार् के राइट में स्पेस हो कांटेक्ट के राइट में स्पेस हो इस तरीके से राइट में स्पेस देकर इस तरीके का एक नेविगेशन मैंने बना लिया है एंड यह एक नेविगेशन बार है यहां पर अगर एंकर टैग्स के लिए हम थोड़े से लिंक सेट कर दें अभी खैर वो वर्किंग लिंक नहीं होंगे तो सिर्फ हैश लिख देते हैं उससे कुछ नहीं होंगे सेम पेज पर ही हम रहने वाले हैं रिफ्रेश तो ये क्या हो गए यह लिंक हो गए मतलब अगर हम इस पर क्लिक करेंगे तो यह कहां जाएगा सेम पेज पर चला जाएगा इस पर क्लिक करेंगे सेम पेज पर जाएगा इस तरीके से हम इनको क्लिकब्रिक्स पे ट्रेवल कर सकते हैं पर जैसे ही लिंक दिया हमने तो एंकर टैग के नीचे बाय डिफॉल्ट अंडरलाइन आ गया उसके लिए क्या कर सकते हैं हर एंकर टैग के लिए हम टेक्स्ट डेकोरेशन को सेट कर सकते हैं टू नान सेव रिफ्रेश तो ये अंडरलाइन हट गया एंड इस तरीके से हमने अपनी एक्टिविटी को एक्टिविटी कहेंगे इसको अपने सेकंड क्वेश्चन को कर लिया है हमने कंप्लीट नेक्स्ट हम बढ़ते हैं अपने नेक्स्ट प्रॉपर्टी की तरफ जो कि काफी इंपॉर्टेंट प्रॉपर्टी है व्हिच इज़ माय डिस्प्ले प्रॉपर्टी डिस्प्ले प्रॉपर्टी के लिए हम चार डिफरेंट वैल्यूज को सेट कर सकते हैं जो है मेरी इनलाइन ब्लॉक इनलाइन ब्लॉक और नन हमने जबकि इनलाइन एलिमेंट्स उतनी ही स्पेस ऑक्यूपाइड होती है अब ब्लॉक एलिमेंट्स के क्या एग्जांपल्स थे ब्लॉक एलिमेंट्स में हमारा डिव आ जाता है हमारे हेडिंग टैग्स आ जाते हैं ब्लॉक एलिमेंट्स में इनलाइन एलिमेंट्स की बात करें तो इनलाइन में हमारा स्पैन आ जाता है इसके अलावा हम बटन की बात करें तो बटन एक इनलाइन एलिमेंट है हम इनपुट की बात करें इनपुट एक इनलाइन एलिमेंट है एंकर टैग एक इनलाइन एलिमेंट है तो बहुत सारे ब्लॉक एलिमेंट्स होते हैं बहुत सारे इनलाइन एलिमेंट्स होते हैं पर हम चाहे तो इनकी प्रॉपर्टीज को जाकर चेंज भी कर सकते हैं जैसे कैसे चेंज कर सकते हैं अगर कोई एलिमेंट ऑलरेडी मेरे पास इनलाइन एलिमेंट है और उसकी डिस्प्ले प्रॉपर्टी को मैं इनलाइन ही सेट कर दूं तो उसके अंदर कोई चेंज नहीं आएगा पर अगर उसकी डिस्प्ले प्रॉपर्टी को मैं ब्लॉक सेट कर दूं तो वो एलिमेंट क्या करेगा वो एलिमेंट पूरी स्पेस लेने लग जाएगा और जब कोई एलिमेंट जो बाय डिफॉल्ट ब्लॉक है बट उसकी प्रॉपर्टी को हम इनलाइन सेट कर दें तो वो क्या करेगा वोह सिर्फ उतनी स्पेस लेगा जितनी उसके लिए रिक्वायर्ड है इसका एक एग्जांपल देखते हैं हम इस डॉक्यूमेंट के साथ स्टार्ट करेंगे और सबसे पहले हम एक डिव को ट करेंगे तो यहां पर लिख देते हैं दिस इज अ डिव एंड इस डिव को हम एक बैकग्राउंड कलर देने वाले हैं लेट्स सपोज इसे हमने ये एजोर बैकग्राउंड कलर दे दिया सेव रिफ्रेश तो ये एक डिव आ गया थोड़ा सा और हल्का सा डार्कर कलर इसको हम दे देते हैं लेट्स सपोज मैंने इसे दिया पिंक अब मुझे दिखाई दे रहा है डिव के अंदर कंटेंट तो सिर्फ इतना ही है पर उसकी विड्थ कितने ऑक्यूपाइड ऑक्यूपाइड भी कर सकते हैं ये मेरे डिव के अंदर कंटेंट इतना है बट कंटेंट एरिया पूरी विड्थ तक जा रहा है जबकि अगर यहां पर मैंने एक बटन बनाया होता यहां पर एक बटन बनाते हैं और इसे हम देते हैं क्लिक मी सेव रिफ्रेश तो ये बटन पर अगर मैं जाऊं इसको जाकर इंस्पेक्ट करूं तो ये उतना ही कंटेंट एरिया उतना ही एरिया ऑक्यूपाइड कंटेंट लिखा हुआ है मतलब जितना बड़ा बटन है जिस साइज का है उतना ही एरिया ऑक्यूपाइड मेरा ब्लॉक लेवल एलिमेंट है बटन मेरा क्या है इनलाइन एलिमेंट है बट इनकी अब हम प्रॉपर्टीज को थोड़ा सा चेंज करेंगे डिव को जाकर मैं डिस्प्ले प्रॉपर्टी देने वाली हूं इनलाइन तो इससे क्या होगा यह इनलाइन एलिमेंट की तरह बिहेव करेगा सेव रिफ्रेश तो अब क्या हुआ बटन और डिव सेम लाइन पर आ गए ये सेम लाइन पर इसलिए आए क्योंकि मेरा जो डिव है वो पूरी विड्थ ऑकुपाड़ा तो बाकी की विड्थ खाली रह गई और बाय डिफॉल्ट मल्टीपल जो इनलाइन एलिमेंट्स होते हैं वो सेम लाइन पर आ सकते हैं तो बटन भी इनलाइन डिफ भी इनलाइन अब दोनों सेम लाइन पे आ गए तो डिव अब बस उतनी ही जगह ले रहा है जितनी उसके लिए जरूरी है इसको थोड़ा सा जूम इन करके भी दिखा देते हैं यह बस उतनी ही जगह ले रहा है लाइन पर जितनी इसके लिए जरूरी है और यही सिमिलर चीज हम जाकर बटन के साथ कर सकते हैं कि बटन अभी एक इनलाइन एलिमेंट है बट उसके डिस्प्ले को हम चेंज कर सकते हैं टू डिस्प्ले ब्लॉक तो अब वो एक ब्लॉक एलिमेंट की तरह बिहेव करेगा इसको करेंगे रिफ्रेश तो बटन नेक्स्ट लाइन पर आ गया क्यों क्योंकि एक ब्लॉक एलिमेंट को बाय डिफॉल्ट पूरी विड्थ चाहिए अब बटन पर जाकर हम स्क्रोल करेंगे तो देखेगा कि अब इसकी जो मार्जिन है यह पूरी मार्जिन ले रहा है मतलब जैसे पहले एक डिव करता था कि जितना कंटेंट उसके पास है सिर्फ उतना नहीं पूरी विट लेगा वैसे ही अब एक बटन बिहेव कर रहा है कि पूरी विट लेने वाला है और हमेशा एक ब्लॉक एलिमेंट नेक्स्ट लाइन के साथ स्टार्ट होता है तो मेरा जो बटन है वो भी अब नेक्स्ट लाइन के साथ स्टार्ट हो रहा है वो डिव वाली लाइन पर नहीं जा रहा जबकि ऊपर डिब वाली लाइन में उसके लिए स्पेस अवेलेबल है तो ये दो फीचर्स होते हैं जब हम डिस्प्ले इनलाइन या ब्लॉक सेट करते हैं अब नेक्स्ट चीज हम क्या करने वाले हैं अपने कोड के अंदर हम क्रिएट करने वाले हैं तीन डिब्स को दिस इज माय बॉक्स वन एंड इसी सेम तरीके से हम तीन बॉक्सेस को क्रिएट करेंगे दिस इज माय बॉक्स टू दिस इज माय बॉक्स थ्री बाय डिफॉल्ट सारे के सारे जो बॉक्सेस हैं उनको हम एक बैकग्राउंड कलर दे देते हैं लेट्स से हमने पिंक कलर इन्हें दिया है या फिर यहां चाहे तो इनलाइन स्टाइल में जाकर इन सबको एक डिफरेंट बैकग्राउंड कलर में सेट करने वाली हूं अब मैं टीचर हूं तो यहां पर मैं इनलाइन स्टाइल यूज कर सकती हूं बट आपके लिए रियल टाइम कोड्स के अंदर प्रिफरेबल होगा कि आप सारी स्टाइलिंग सीएसएस के अंदर करिए तो यहां पर थोड़ा सा टाइम बचाने के लिए इनलाइन स्टाइल कर लेते हैं पहले वाले को लेट्स सपोज वी गिव इट कलर ब्लू दूसरे वाले को हम एक ग्रीनि कलर दे देते हैं इसे एक ग्रीन दे देते हैं एंड तीसरे वाले को हम एक कलर दे देते हैं लेट्स सपोज रेड सेफ एंड यहां पर इन सभी डेप्स के लिए हम एक विड्थ सेट करने वाले हैं 200 पिक्सल्स एंड एक हाइट सेट करने वाले हैं 200 पिक्सल्स सेव एंड रिफ्रेश तो कुछ इस तरीके के तीन बॉक्सेस मेरे पास जाकर क्रिएट हो जाएंगे इन तीनों बॉक्सेस के लिए हम चाहे तो बाउंड्री वगैरह भी सेट कर सकते हैं बट अभी के लिए इतना काफी है अब इन बॉक्सेस के लिए क्या करने वाले इनको हम कुछ प्रॉपर्टीज देंगे जैसे मैं इन्हें एक प्रॉपर्टी देने वाली हूं मार्जिन मार्जिन हम सेट करेंगे टू 25 पिक्सल्स एंड तीनों के लिए हम एक पैडिट की वैल्यू भी सेट करेंगे टू 25 पिक्सल्स इसको कर लेते हैं सेव रिफ्रेश तो क्या हुआ तीनों बॉक्सेस को मार्जिन मिल गया पैडिट मिल गया एंड अब जाकर हम इसे इंस्पेक्ट भी कर सकते हैं कि इंडिविजुअल बॉक्स अब कैसा दिखता है इसको जाके इंस्पेक्ट किया तो इस इंडिविजुअल बॉक्स के पास पैडिया इंटरनली 25 पिक्सल्स की एंड मार्जिन भी है 25 पिक्सल्स की अब एक स्पेशल चीज हम करने वाले हैं कि इन सबका जो डिस्प्ले है उसको हम सेट कर देंगे इनलाइन डिस्प्ले को इनलाइन सेट करने का मतलब है कि अब यह ब्लॉक लेवल एलिमेंट्स नहीं रहेंगे अब ये इनलाइन एलिमेंट्स हो जाएंगे यानी सिर्फ उतनी स्पेस लेंगे जितनी इनके लिए जरूरी है अब हमने रिफ्रेश किया तो मेरे एलिमेंट्स कुछ ऐसे दिखाई देंगे और इंस्पेक्ट करके अगर मैं इस ब्लू बॉक्स के ऊपर जाऊं एंड इसके बॉक्स मॉडल को हम एनालाइज करें तो इसके लिए हम देखेंगे कि ये जो मार्जिन है मार्जिन सिर्फ लेफ्ट और राइट से सेट हुई है टॉप और बॉटम से सेट नहीं हुई यहां पर एक हम हेडिंग और ऐड कर देते हैं अपने एटीएमएल के अंदर तो हम हेडिंग देंगे लेट्स सपोज वी कॉल इट डिस्प्ले प्लेग्राउंड बिकॉज़ हम डिस्प्ले के साथ प्ले कर रहे हैं तो इस तरीके की कुछ चीज है एंड अब ब्लू बॉक्स को दोबारा आकर एनालाइज कर लेते हैं तो इसके लिए आप मार्जिन को ऑब्जर्व करें लेफ्ट और राइट से सेट हुई है टॉप और बॉटम से मार्जिन सेट नहीं हुई यही ड्रॉबैक होता है जब भी हम डिस्प्ले इनलाइन कर देते हैं ब्लॉक एलिमेंट्स के लिए क्योंकि डिस्प्ले इनलाइन करने के बाद हमारी जो मार्जिन जो हम टॉप और बॉटम से सेट करना चाहते हैं वो फिर अप्लाई नहीं होती इनलाइन एलिमेंट्स पर तो मार्जिन को टॉप और बॉटम से अप्लाई करने के लिए हम क्या करते हैं हम एक और नया डिस्प्ले टाइप सीखते हैं जिसका नाम है इनलाइन ब्लॉक इनलाइन ब्लॉक एलिमेंट कहने का मतलब है कि सिमिलर टू इनलाइन एलिमेंट होगा मतलब हमारी प्रॉपर्टीज हमारा जो बिहेवियर होगा डिस्प्ले का वो एलिमेंट के लिए हमेशा इनलाइन टाइप का ही होगा बट उस इनलाइन एलिमेंट के लिए हम सारी की सारी मार्जिन और पैडिट प्रॉपर्टीज को सेट कर पाएंगे और साथ के साथ एक और चीज हम नोटिस करेंगे यहां पर कि ये जो बॉक्स है इस इंडिविजुअल बॉक्स के लिए जो कंटेंट एरिया है वो सिर्फ अब उतना ही है जितना इसके अंदर कंटेंट लिखा गया है जबकि बाय डिफॉल्ट हर जो ब्लॉक एलिमेंट होता है उसके लिए हम विड्थ और हाइट को सेट कर सकते हैं तो ना ही जिस एलिमेंट को जो ऑलरेडी ब्लॉक था जिसको हमने इनलाइन बनाया उसके लिए हम विड्थ और हाइट सेट कर सकते हैं ना उसके लिए मार्जिन टॉप और बॉटम को सेट कर पा रहे हैं बट जैसे ही एक नई प्रॉपर्टी है हम इनलाइन ब्लॉक इन एलिमेंट्स को बना देंगे वैसे ही क्या होगा सारी की सारी प्रॉपर्टीज इन पर अप्लाई करना स्टार्ट होंगी तो इनलाइन ब्लॉक अगर हम डिस्प्ले वैल्यू को सेट करते हैं तो उसका मतलब ये होता है कि कोई भी एलिमेंट बिहेव तो इनलाइन एलिमेंट की तरह करेगा बट उसके लिए सारी की सारी प्रॉपर्टीज इंक्लूडिंग मार्जिन पैडिट एंड हाइट को हम सेट कर पाएंगे अब अगर मैं इंडिविजुअल डिव पर जाऊं तो इस डिव के लिए क्या होगा इस डिव के लिए अब मार्जिन टॉप से भी आ रही है बॉटम से भी आ रही है पैडिट टॉप से बॉटम से हर जगह से एंड कंटेंट एरिया भी उतना ही है जितना हमने इसके लिए डिफाइन किया है तो अगर हम किसी भी एलिमेंट को मल्टीपल एलिमेंट्स को सेम लाइन के अंदर लाना चाहते हैं इनलाइन बनाना चाहते हैं पर प्रॉपर्टी सेट करना चाहते हैं तो फिर उनके डिस्प्ले को हम हमेशा इनलाइन ब्लॉक रखेंगे एक और डिस्प्ले होता है हमारे पास व्हिच इज डिस्प्ले नन डिस्प्ले नन करना बेस्ट तरीका है किसी भी एलिमेंट को टू रिमूव इट फ्रॉम द डॉक्यूमेंट फ्लो मतलब डिस्प्ले नन करने का मतलब है कि आपने एलिमेंट को हटा ही दिया डॉक्यूमेंट फ्लो से जैसे अगर यह मेरा बॉक्स टू है इसे हम एक आईडी दे देते हैं लेट्स से वी गिव इट एन आईडी बॉक्स टू अब बॉक्स टू के लिए मैं एक स्पेशल चीज करने वाली हूं बॉक्स टू एंड इसके लिए हम इसकी डिस्प्ले प्रॉपर्टी को अलग से सेट कर देंगे नन सेव रिफ्रेश तो क्या हुआ बॉक्स टू यहां से पूरे के पूरे डॉक्यूमेंट से गायब हो गया एंड उसके लिए कोई जगह भी नहीं बची मतलब जहां पर बॉक्स टू पहले था वहां पर अब बॉक्स वन आ गया अगर हम चाहे तो सारी की सारी बॉक्स टू की प्रॉपर्टीज को यह यहां पर डिस्प्ले नन किया जैसे ही डिस्प्ले नन को हटा दिया बॉक्स टू आ गया बट जैसे ही डिस्प्ले नन किया तो बॉक्स टू की जगह बॉक्स थी आ गया मतलब वो बॉक्स गायब तो हो ही गया साथ के साथ उसके लिए सेकंड चीज कोई जगह क्रिएट नहीं हुई डॉक्यूमेंट के अंदर तो यहीं से एक और स्पेशल चीज हम डिस्कवर करते हैं अपनी वेबसाइट के ऊपर कोई एलिमेंट आपने लिखा हुआ है एचटीएमएल के अंदर पर उसको गायब करना है तो उसके लिए हम डिस्प्ले नन यूज़ करते हैं अब डिस्प्ले नन से सिमिलर सी मिलती जुलती एक चीज होती है हमारी विजिबिलिटी प्रॉपर्टी जब भी हम किसी भी एलिमेंट को विजिबिलिटी हिडन सेट कर देते हैं तो फिर वो एलिमेंट विजिबिलिटी हिडन होने की वजह से गायब हो जाता है विजिबिलिटी का मतलब है कि कोई चीज कितनी दिख रही है हिडन होने का मतलब है कि उसे हमने कंपलीटली गायब कर दिया बट हमारा जो विजिबिलिटी हिडन एंड डिस्प्ले नन होता है उन दोनों में डिफरेंस होता है विजिबिलिटी जब भी नन सेट की जाती है तो एलिमेंट के लिए स्पेस रिजर्व्ड होती है जबकि डिस्प्ले नन में कोई स्पेस रिजर्व्ड या ब्लॉक नहीं होती इसका एग्जांपल ये है कि डिस्प्ले नन किया तो बॉक्स टू गायब हो गया और बॉक्स टू की जगह बॉक्स थ्री आ गया बट यहीं पर अगर हमने विजिबिलिटी हिडन किया होता विजिबिलिटी को अगर हम हिडन कर देते तो उस केस में क्या होता बॉक्स टू के लिए जगह बचती और फिर बॉक्स थ्री आता पर डिस्प्ले में जगह नहीं बचती और विजिबिलिटी में डॉक्यूमेंट फ्लो के अंदर एक जगह बचती है नेक्स्ट हम पढ़ने वाले हैं अल्फा चैनल के बारे में तो हम थोड़ा सा अपने लेवल वन की तरफ जाएंगे यहां पर जब हमने आरजीबी वैल्यूज को पढ़ा था जब भी हमने आरजीबी वैल्यूज को पढ़ा था तो उसके अंदर हम एक कलर सेट करते थे अब हम पढ़ने वाले हैं आरजीबी ए वैल्यूज को इसमें आरजीबी वाला पार्ट तो सेम ही रहता है बट a से करके एक और नया पैरामीटर हमारे पास आ जाता है व्हिच इज माय अल्फा पैरामीटर अल्फा चैनल क्या करता है इसको अल्फा चैनल भी कह सकते हैं जैसे r को हम रेड चैनल कह सकते हैं जी को हम ग्रीन चैनल कह सकते हैं वैसे ही a को हम अल्फा चैनल कहते हैं अल्फा चैनल का मतलब होता है कि ये ओपेसिटी डिसाइड करता है ओपेसिटी कहने का मतलब है कि कोई भी कलर कितना ज्यादा दिख रहा है या कितना कम दिख रहा है जैसे रेड का रेड चैनल की वैल्यू जब हमें सेट करनी होती थी तो उसकी वैल्यू 0 से 255 के बीच में जाती थी वैसे ही अल्फा की जब हम वैल्यू सेट करते हैं तो वो रो से वन के बीच में जाती है मतलब वो रो भी हो सकती है 0.25 भी हो सकती है 0.75 भी हो सकती है या वन भी हो सकती है कोई और वैल्यू भी हो सकती है जो रो और वन के बीच में आए जिसमें अगर हमने ओपेसिटी की वैल्यू को जीरो सेट किया है तो इसका मतलब है मेरा जो कलर है वो बिल्कुल भी विजिबल नहीं होगा तो अगर मुझे कलर सेट किया है पर उसको दिखाना नहीं है तो हम ओपेसिटी जीरो सेट कर देते हैं और अगर कलर दिखाना है कंप्लीट दिखाना है तो उसके लिए हम ओपेसिटी को वन सेट कर देते हैं जैसे एग्जांपल यहां पर है आरजीबीए में हम आरजीबी की जगह आरजीबीए लिखते हैं मैंने लिखा है 2500 अब 25 रेड के लिए है ग्रीन के लिए रो ब्लू के लिए रो तो ओबवियसली ये कलर रेड हो जाएगा उसके लिए अगर ओपेसिटी 0.5 सेट की तो ये क्या हुआ थोड़ा सा हल्का सा लाइट रेड कलर मुझे मिलेगा बट जैसे ओपेसिटी वन सेट की वैसे ही डार्क रेड कलर जितना डार्क आ सकता है उतना डार्क मुझे दिखाई देगा इसका भी एक एग्जांपल देखते हैं जैसे हम क्या करेंगे यहां पर यह सारी की सारी बॉक्सेस हटा देते हैं एंड ये स्टाइल भी हटा देते हैं और सिर्फ एक डिव वन रखेंगे व्हिच इज माय बॉक्स वन ये मेरा बॉक्स वन है अब बॉक्स वन के लिए हम इसे बैकग्राउंड कलर देने वाले हैं इसे हटा लेते हैं एंड बॉक्स वन के लिए जो बैकग्राउंड कलर हम इसे देंगे उसे आरजीबीए वैल्यू से सेट करेंगे मैंने सेट किया 255 0 तो इसका मतलब है रेड कलर आएगा बट रेड कलर थोड़ा सा हम लाइट देंगे थोड़ा सा लाइट दिया तो मेरा इस तरीके का रेड कलर मेरे पास डिस्प्ले होकर आएगा इसे इंस्पेक्ट कर लेते हैं क्लिक किया तो इसकी प्रॉपर्टीज आ जाएंगी सारी की सारी यह मेरा बैकग्राउंड कलर रेड आ गया अब जैसे ही बैकग्राउंड कलर के अंदर हम ओपेसिटी को चेंज करके 0.75 कर देते हैं तो थोड़ा सा डार्कर रेड आ गया अगर मैंने इसे वन कर दिया तो सबसे ज्यादा ब्राइट रेड आएगा और अगर 0.25 कर दिया तो बहुत ही हल्का सा रेड कलर आएगा उसी तरीके से हम ग्रीन के शेड के साथ भी ट्राई कर सकते हैं 255 एंड यहां पर कर देंगे रो तो ये मेरा 25 पर ओपेसिटी के साथ आएगा इसे थोड़ा सा बढ़ा देंगे तो 50 पर ओपेसिटी के साथ और बढ़ा देंगे तो 75 पर ओपेसिटी एंड सबसे ज्यादा डार्क ग्रीन चाहिए तो हम ओपेसिटी को सेट कर सकते हैं एज वन तो अब हम कलर के साथ-साथ वो कलर कितना ब्राइट दिख रहा है या कितना लाइट दिख रहा है हम उसको भी कंट्रोल कर सकते हैं तो बहुत सारी वेरिएशंस आ जाती हैं जब भी हम बॉक्सेस को या किसी भी एलिमेंट को डिजाइन करते हैं जैसे यहां पर थोड़ा सा और इसके साथ एक्सपेरिमेंट करके देखते हैं पहला हमने जो डिव बनाया उसे आईडी दे देते हैं बॉक्स वन दूसरे वाले को आईडी दे दी बॉक्स टू तीसरे वाले को आईडी दे दी बॉक्स थ्री यहां पर बॉक्स एंड बॉक्स ्र कर देते हैं अब हम क्या करेंगे इस प्रॉपर्टी को हटाकर इंडिविजुअल बॉक्सेस के लिए हम बैकग्राउंड कलर सेट करेंगे बैकग्राउंड कलर आरजीबी सबसे पहले इसे हम ब्लू के शेड के साथ ट्राई करते हैं 0025 एंड ओपेसिटी देंगे इस बार 0.5 सिमिलर सी चीज हम करने वाले हैं बॉक्स टू के साथ जिसके अंदर ओपेसिटी को सेट करेंगे एस 0.75 एंड यहां पर बॉक्स थ्री जिसके लिए ओपेसिटी को सेट करेंगे हम वन सेफ एंड रिफ्रेश तो तीन बॉक्सेस जिसमें अलग-अलग शेड ऑफ ब्लू यूज हुआ है वो मेरे पास आकर क्रिएट हो गए तो इस तरीके से भी हम कलर्स के साथ खेल सकते हैं जब भी हम सीएसएस को पढ़ रहे हैं नेक्स्ट हम करने वाले हैं अपना प्रैक्टिस सेट नंबर फोर जिसके अंदर और भी काफी सारे मजेदार सवालों को कंप्लीट करेंगे तो यहां पर मुझे दिया हुआ है क्रिएट अ वेब पेज लेआउट विद अ हेडर अ फुटर एंड अ कंटेंट एरिया मतलब मतलब मुझे एक वेब पेज का जनरल लेआउट क्रिएट करना है यूजुअली जब भी वेब पेजेस क्रिएट होते हैं मतलब अगर मैंने कोई भी वेब पेज बनाया है इस तरीके का मेरा पूरा का पूरा पेज है तो उसके अंदर यह जो ऊपर वाला एरिया होता है इसको हम हेडर एरिया कहते हैं जो हमने नाव बार बनाया था नाव बर्स यूजुअली हेडर एरिया के अंदर ही आते हैं नीचे का छोटा सा एरिया होता है जिसको हम फुटर कह देते हैं एंड बीच वाला हमारा एरिया होता है जिसको हम कंटेंट एरिया कह देते हैं जैसे अगर हम तो amazon.in हो गया amazon.in के अंदर यह वाला जो एरिया है ये इसका हेडर एरिया होगा बीच में जितना भी कंटेंट आ रहा है वो कंटेंट एरिया होगा लास्ट में जो इंफॉर्मेशन लिखी होती है कांटेक्ट अस करियर्स अबाउट अस या इस तरीके की जो चीजें होती है यह सारा हमारा फुटर वाला एरिया होता है इसको हम इंस्पेक्ट करके भी चेक कर सकते हैं जैसे यहां पर इस वेबसाइट के ऊपर अगर हम जाएं तो वेबसाइट्स पर यूजुअली फुटर हेडर यह सब हमेशा अवेलेबल होते ही होते हैं जैसे यहां पर ये क्लास इ इक्वल टू नाव लेफ्ट फुटर इस तरीके से इन्होंने क्या किया डिव को ही क्लास दे दिया है व्हिच इज द फुटर क्लास तो यहां पर यह पूरा का पूरा इस वेबसाइट का फुटर है इसके हेडर की बात करें तो बॉडी के अंदर हेडर जो है वो यह वाला मेरा एरिया पूरा का पूरा यूजुअली होता है तो हेडर की बात करें तो यह वाला मेरा एरिया पूरा का पूरा होता है बीच में मेरा कंटेंट एरिया आएगा तो इस तरीके का एक लेआउट मुझे मेरी वेबसाइट के लिए क्रिएट करना है उसके लिए क्या करेंगे पहले तो हम अपनी पुरानी स्टाइलिंग हटा लेते हैं और इन तीनों सेक्शंस को क्रिएट करने के लिए हम हेडर टैग को यूज कर सकते हैं तो हेडर टैग हो गया यह मेरा इस पे हम हेडर लिख देते हैं एक पल के लिए फिर हम क्या करेंगे अपना कंटेंट एरिया क्रिएट कर सकते हैं अब कंटेंट एरिया क्रिएट करने के लिए हम यहां पर एक सिंपल डिव भी बना सकते हैं जिसको हम आईडी दे सकते हैं कंटेंट एंड लास्ट में हम क्रिएट कर सकते हैं अपना फुटर तो यहां पर हम फुटर लिख सकते हैं सेव एंड रिफ्रेश तो ये मेरा हेडर हो गया ये मेरा फुटर हो गया कंटेंट एरिया के अंदर अभी कोई कंटेंट नहीं है तो इसीलिए उसके कोई स्पेस ज्यादा रिजर्व नहीं है नेक्स्ट पार्ट पर आ जाते हैं कंटेंट एरिया के अंदर तीन डिव होने चाहिए तो तीन डिब्स को यहां पर क्रिएट कर लेते हैं दिस इज माय डिव वन एंड इसी तरीके से यह मेरा डिव टू हो जाएगा यह मेरा डिव थ्री हो जाएगा तो तीन डिब्स को हमने क्रिएट कर लिया जो मेरे कंटेंट का पार्ट है इनफैक्ट इन तीनों डिल्स को हम एक क्लास दे सकते हैं व्हिच इज कंटेंट बॉक्स तीनों डव्स को कंटेंट बॉक्स क्लास दी जा सकती है नेक्स्ट पार्ट कहता है कि सेट द हाइट एंड विड्थ ऑफ द डिब्स टू 100 पिक्सल्स तो इन तीनों ये जो डिब्स हमने बनाए हैं इन तीनों की हाइट एंड विड्थ हमें सेट करनी है तो उसके लिए यहां पर डॉट में जाके कंटेंट बॉक्स क्लास के लिए हाइट को सेट कर लेते हैं 100 पिक्सल्स एंड विड्थ को हम सेट कर लेते हैं टू 100 पिक्सल्स सेव रिफ्रेश तो यहां पर स्पेस मुझे दिखाई दे रही है बट क्योंकि बैकग्राउंड कलर अभी दिया नहीं तो वो डिब्स दिखाई नहीं दे रहे एंड एक और चीज बोला कि ट द प्रीवियस नव बार इन द हेडर यानी पुराना जो नेविगेशन बार हमने क्रिएट किया था उसको हम इस हेडर के अंदर ऐड कर सकते हैं यानी पहले जो हमने नाव बार बनाया था उसको हेडर के अंदर ऐड किया जा सकता है तो हमने क्या किया है अपना पुराना जो नेविगेशन बार का कोड था उसे हमने यहां से उठाया है और यहां पर ऐड कर दिया है तो यह मेरा नेविगेशन बार आ गया है एंड इसकी स्टाइलिंग भी हम कॉपी कर लेते हैं तो नेविगेशन बार की स्टाइलिंग के लिए ऊपर से स्टार्ट कर देते हैं यह कुछ स्टाइलिंग ऐड कर दिया हमने पूरी की पूरी पुरानी जो ने लिखी थी उसको कॉपी कर दिया है सेव एंड नाउ रिफ्रेश तो ऊपर मेरा नेविगेशन बार आ गया है वेबसाइट का जो मेरे हेडर के अंदर आया है यह मेरा फुटर है फुट्स पे यूजुअली काफी सारी चीजें लिखी होती हैं कई-कई लोग यहां पे कॉपीराइट मेंशन करते हैं कि कॉपीराइट ऑफ लेट्स से amazononline.in य पे थोड़ा जूम इन करके अगर मैं दिखाऊं आपको कॉपीराइट का साइन आ गया 1996 टू 2003 यह इस तरीके की चीज हम ऐड कर सकते हैं तो यहां पर यह मैंने ऐड कर दिया सेव हम चाहे तो कॉपीराइट का साइन भी ऐड कर सकते हैं तो मैं सर्च कर सकती हूं मुझे नहीं पता कॉपीराइट का साइन एचटीएमएल के अंदर कैसे ऐड होता है तो यूजुअली हम सर्च कर सकते हैं कॉपीराइट सिंबल फॉर एचटीएमएल तो यह मेरा कॉपीराइट सिंबल होता है इसके लिए हम इसे यूज कर सकते हैं तो यहां पर ये मेरा सिंबल मुझे डिस्प्ले होकर दिखाई देने लग जाएगा रिफ्रेश तो ये क्या हुआ सेम सिंबल डिस्प्ले होकर मुझे दिखाई दे रहा है कुछ लोग यहां पर एक और एडिशनल चीज ऐड करते हैं जैसे कई जो मॉडर्न वेबसाइट्स हैं तो मेड विद लव तो हम लव का सिंबल भी इसी तरीके से सर्च कर सकते हैं लव इज बेसिकली र हार्ट सिंबल तो इस तरीके से मेरा हार्ट का सिंबल आ जाएगा बाय एन एंड उसके बाद एक हम नेक्स्ट लाइन या लाइन ब्रेक किसको दे देंगे य बेसिकली मेरे फुटर के अंदर यह वाला कंटेंट मैं देने वाली हूं सेव एंड रिफ्रेश तो ये कुछ एडिशनल चीजें हमने सीख लिए प्रैक्टिस करते टाइम कि ये मेरा फुटर आ गया है एंड फुटर अभी ओबवियसली इसका कंटेंट जो है लेफ्ट की साइड है उसको हम राइट की साइड कर सकते हैं इसको बैकग्राउंड कलर कई सारी चीजें दी जा सकती हैं बट पहले आगे की एक्टिविटीज देखते हैं हमारा पार्ट टू क्वेश्चन टू कह रहा है कि ऐड बॉर्डर्स टू ऑल डिब्स ये जो हमने डिब्स बनाए थे इन सबके लिए हम एक बॉर्डर ऐड करने वाले हैं तो ये जो मेरे डिब्स थे व्हिच इज बेसिकली माय कंटेंट बॉक्स इन सब के लिए एक बॉर्डर ऐड कर देते हैं लेट्स से टू पिक्सल सॉलिड ब्लैक बॉर्डर यूजुअली मैं पढ़ाते टाइम टू पिक्सल सॉलिड ब्लैक ही रखती हूं सबसे इजी टू राइट होता है तो ये मेरे तीनों आ गए तीनों बॉक्सेस विद बॉर्डर अब ऐड अ डिफरेंट बैकग्राउंड कलर टू ईच डिव विद एन ओपेसिटी ऑफ़ 0.5 तो तीनों डिब्स को एक डिफरेंट बैकग्राउंड कलर हम देंगे इनफैक्ट बैकग्राउंड कलर को हम इनलाइन ही ऐड कर सकते हैं तो स्टाइल इज इक्वल टू बैकग्राउंड कलर तो आरजी ब लिख देते हैं पहले वाले को लेट्स से हम रेड कलर देते हैं तो 255 00 विद एन ओपेसिटी ऑफ 0.5 एंड इसी सेम तरीके से इसको हमने रेड दे दिया है तो अगले वाले डिव को हम ग्रीन दे सकते हैं यहां पर कर देंगे 0 255 एंड इसी तरीके से इसे हम ब्लू दे सकते हैं इसे हम कर देंगे 0 0 255 इसको कर लेंगे सेव एंड रिफ्रेश तो ये मेरा फर्स्ट बॉक्स आ जाएगा मेरा सेकंड बॉक्स आ जाएगा मेरा थर्ड बॉक्स आ जाएगा हम चाहे तो तीनों बॉक्सेस को सेम लाइन के अंदर भी लेकर आ सकते हैं मतलब ये एक एडिशनल चीज होगी तो इसके डिस्प्ले को हम कर सकते हैं इनलाइन ब्लॉक तो क्या हुआ तीनों ब्लॉक्स अब आ गए हैं सेम लाइन के ऊपर यह मेरा फुटर आ गया अब फुटर के लिए मैं कुछ-कुछ एडिशनल चेंजेज आपको करके दिखाऊंगी जो बिल्कुल एक्स्ट्रा है जो कलर मैंने हेडर में दिया है वही सेम कलर मैं फुटर को देना चाहूंगी बैकग्राउंड में तो इसको बैकग्राउंड में सेम कलर देने के लिए हम क्या करेंगे फुटर पर जाएंगे और इसके लिए हम बैकग्राउंड कलर को सेट कर देंगे टू दिस वैल्यू यह वाला ब्लैक जो हमने अपने हेडर में नेविगेशन बार बनाते टाइम यूज़ किया था एंड इसके टेक्स्ट कलर को हम सेट कर देंगे टू वाइट सेव रिफ्रेश तो क्या हुआ मेरे लिए एक प्यारा सा फुटर तैयार हो गया इसके कंटेंट को हम चाहे तो सेंटर भी कर सकते हैं तो सेंटर करने के लिए हमें पता है हमें करना होता है टेक्स्ट अलाइन सेंटर सेव रिफ्रेश तो ये सेंटर में सारा का सारा कंटेंट आ गया तो मेरा एक हेडर बन गया मेरा एक फुटर बन गया अब नेक्स्ट क्वेश्चन की तरफ आ जाते हैं व्हिच इज कि गिव द कंटेंट एरिया एन एप्रोप्रियेट एप्रोप्रियेट आ गया है तो कंटेंट के अंदर हम हाइट को सेट कर देंगे टू लेट्स से 500 पिक्सल्स सेव रिफ्रेश तो ये क्या हुआ कंटेंट की हाइट इतनी सेट हो गई बट फुटर अभी भी नीचे नहीं आया आप लोगों की हो सकता है किसी-किसी की लैपटॉप स्क्रीन बड़ी हो तो आपको मुझसे ज्यादा हाइट देनी पड़े किसी-किसी की लैपटॉप स्क्रीन छोटी हो तो मुझसे कम हाइट देनी पड़े तो आपको यहां पर अपनी लैपटॉप स्क्रीन या अपने डिवाइस स्क्रीन के हिसाब से थोड़ा सा एडजस्ट करना है लेट्स सपोज वी मेक इट 700 पिक्सल्स तो यह मेरा फुटर बिल्कुल नीचे आ गया एंड 750 पिक्सल्स करें तो बिल्कुल ही नीचे आ गया तो आई थिंक अराउंड 7 टू 20 पिक्सल्स वुड बी गुड तो यह मेरा हेडर हो गया यह मेरे वेबसाइट का फुटर हो गया बीच में हमारा कंटेंट हो गया हम चाहे तो इन बॉक्सेस के अंदर के लिए कुछ है तो थोड़ा सा टेक्स्ट ठीक कर लेते हैं बायर फेवरेट सोप यहां पर फेवरेट साबुन आप खरीद सकते हैं इस तरीके का कुछ लिख सकते हैं या बाय योर फेवरेट गैजेट्स यह गैजेट्स के लिए बॉक्स हो गया या फिर यहां पर कुछ बाय योर फेवरेट या फिर इसको कर देते हैं रेंट योर फेवरेट मूवीज सेव रिफ्रेश तो ये अलग-अलग तरीके के बॉक्सेस हो गए जिनको हम बना सकते हैं एंड इस तरीके से मल्टीपल बॉक्सेस क्रिएट किए जा सकते हैं जिसके अंदर फोटो लगा सकते हैं नीचे उनका डिस्क्रिप्शन दे सकते हैं बाय के लिए बटन भी लगा सकते हैं पर वो सारी एडिशनल चीजें हैं बट आप चाहे तो अभी आपको इतनी एचटीएमएल सीएसएस आती है कि आप वो एडिशनल चीजें अपने टाइम में ट्राई कर सकते हैं बट बेसिकली हमारा जो प्रैक्टिस क्वेश्चन था उसको हमने कंप्लीट कर दिया एक प्यारा सा हेडर बना दिया एक प्यारा सा फुटर बना दिया है डिफ्स के साथ मैनिपुलेशन कर दिया है एंड इस तरीके से लेवल टू हमारा सीएसएस के अंदर हो गया है क कंप्लीट तो अब शुरुआत करते हैं अपने लेवल थ्री की जिसके अंदर हम और सीएसएस यूनिट्स एंड पोजीशन प्रॉपर्टी के बारे में पढ़ने वाले हैं तो सबसे पहले शुरुआत करते हैं यूनिट्स इन सीएसएस के साथ अभी तक हमने एब्सलूट यूनिट्स के बारे में बात की है एब्सलूट यूनिट्स कौन से यूनिट्स होते थे जिनकी वैल्यू फिक्स होती थी मतलब 1 किलोमीटर जो दुनिया के अंदर अगर हम कहीं भी जाकर बोले कि 1 किलोमीटर ये होता है तो वो हमेशा 1 किलोमीटर ही रहेगा उसकी वैल्यू छोटी है उसकी वैल्यू बड़ी नहीं हो जाएगी वैसे ही हम सीएसएस के अंदर जब एब्सलूट यूनिट्स में पढ़ रहे थे तो हमने सबसे पॉपुलर एब्सलूट यूनिट के बारे में पढ़ा है व्हिच इज पिक्सल्स इसके अलावा हमने बात की थी कि आप सीएसएस के अंदर सेंटीमीटर भी यूज़ कर सकते हैं मिलीमीटर भी यूज़ कर सकते हैं इंचेज भी यूज़ कर सकते हैं बट सबसे ज्यादा पॉपुलर और सबसे ज्यादा जो फ्रीक्वेंसी होता है वैसे ही अब हम बात करने वाले हैं रिलेटिव यूनिट्स के बारे में रिलेटिव यूनिट्स यानी ये ऐसे यूनिट्स हैं ये ऐसा साइज आप सेट कर रहे होंगे जो एब्सलूट नहीं है मतलब जैसे रिलेटिव यूनिट्स में अगर हम 20 पर लिखें तो 20 पर हो सकता है किसी एक पर्टिकुलर वेबसाइट के लिए 20 का मतलब कुछ और हो और किसी दूसरी पर्टिकुलर वेबसाइट के लिए 20 पर का मतलब कुछ और हो इनफैक्ट वेबसाइट के अंदर भी किसी बटन के लिए 20 का मतलब कुछ और हो किसी डिव के लिए 20 पर का मतलब कुछ और हो तो परसेंट क्या है परसेंट एक रिलेटिव यूनिट है जबकि 20 पिक्सेल बटन के लिए भी सेम रहेगा 20 पिक्सल डिव के लिए भी सेम रहेगा पर परसेंटेज अलग-अलग होंगे तो इन्हीं को हम रिलेटिव यूनिट्स कहते हैं रिलेटिव यूनिट्स में बहुत सारे डिफरेंट डिफरेंट यूनिट्स होते हैं बट सबसे पॉपुलर जो यूज्ड होने वाले यूनिट है वो ये तीन हैं जिसमें से सबसे पहले पला परसेंटेज दूसरा है एम तीसरा है रेम अब नाम थोड़े से इनके फनी लग रहे होंगे पर पर्पस बहुत ही ज्यादा सीरियस एंड फ्रीक्वेंसी यूनिट की परसेंटेज यूनिट का काम होता है डिफाइन करना साइज एज अ रिलेटिव टू एन एलिमेंट्स पेरेंट ऑब्जेक्ट मतलब पेरेंट चाइल्ड रिलेशनशिप की हमने पहले भी बात की है सीएसएस के अंदर यूजुअली क्या होता है जो हमारा पेरेंट होता है वो हायरा की में बाहर वाला टैग या बाहर वाला एलिमेंट होता है एंड उसके अंदर हमारा चाइल्ड एलिमेंट आता है तो पेरेंट की किसी प्रॉपर्टी के हिसाब से अगर हम चाइल्ड की कोई प्रॉपर्टी सेट करना चाहते हैं तो उसके लिए हम यूज करते हैं परसेंटेज का जैसे अगर मैंने विड्थ 33 पर कर दी तो परसेंट क्या होगा मतलब अगर मैंने बाहर कोई डिव बनाया है एंड इसके अंदर कोई स्पेसिफिक डिव मैंने क्रिएट किया है तो यहां पर क्या होगा ये जो डिव वन है ये मेरा फर्स्ट डिव वो पैरेंट बन जाएगा एंड जो मेरा डिव टू है वो चाइल्ड बन जाएगा ये है मेरा सेकंड डिव तो डिव टू के लिए अगर मैंने उसकी विड 33 पर सेट कर दिए तो मतलब क्या डिव वन की विड्थ अगर 100 थी तो उसका 33 पर पार्ट मेरे डिव टू को मिल रहा होगा तो इस तरीके से पेरेंट की वो स्पेसिफिक प्रॉपर्टी का परसेंटेज चाइल्ड एलिमेंट ले रहा होता है इसका एक एग्जांपल देखते हैं जैसे हमने क्या किया है एक इक्सड html5 क्रिएट की है सीएसएस लेवल 3 के लिए उसके अंदर स्टाइल ड सीएसएस को क्रिएट किया है जो भी खाली है हमारा पेज कंप्लीट खाली है अब बॉक्स वन एंड इसके अंदर एक और डिव हम क्रिएट करेंगे इसको आईडी दे देते हैं बॉक्स टू अब यह मेरा बॉक्स टू बन गया इन दोनों को ही हम क्या करने वाले हैं सबसे पहले तो बॉक्स वन को एक अलग से हाइट वेट हम दे सकते हैं इसको लेट्स सपोज हाइट हमने दे दी है 100 पिक्सल्स एंड विड्थ भी हमने इसको दे दी है 100 पिक्सल्स के इक्वल एंड इसको हम बैकग्राउंड कलर दे देते हैं थोड़ा सा ग्रीन कलर वहीं पर हमारे पास आ जाता है बॉक्स टू बॉक्स टू को हम क्या देने वाले हैं बॉक्स टू को हाइट हम देने वाले हैं लेट्स सपोज 50 पिक्सल्स बट इसकी जो विड्थ होगी उस विड्थ को हम सेट करेंगे 30 पर पर मतलब इस बार 300 पिक्सल्स 30 पिक्सल्स 100 पिक्सल्स ऐसा नहीं परसेंटेज में विड्थ सेट कि है एंड इसको भी एक बैकग्राउंड कलर दे देते हैं हम लेट्स सपोज वी गिव इट अ येलो कलर अभी के लिए क्या करेंगे ये विड्थ 30 पर वाली प्रॉपर्टी हटा देते हैं एंड बाय डिफॉल्ट बॉक्स टू की विड्थ क्या होगी बाय डिफॉल्ट बॉक्स टू की की विड्थ कंप्लीट विड्थ जो उसके पेरेंट की है उसी के इक्वल होगी तो अभी क्या हुआ ये मेरा पूरा का पूरा बॉक्स वन है जो ग्रीन है एंड इसके अंदर मेरा बॉक्स टू है जो येलो कलर में आ रहा है हम चाहे तो इसको एक अलग विड्थ भी दे सकते हैं लेट्स सपोज हमने इसे 50 पिक्सेल दे दिया तो ये मेरा पूरा का पूरा ग्रीन है बॉक्स टू यहां पर इंस्पेक्ट कर लेते हैं ये मेरा बॉक्स वन पूरा का पूरा ग्रीन है जिसके अंदर बॉक्स टू येलो कलर में आ रहा है बट जैसे ही हमने इसकी ये वाली विड्थ हटाकर इसे विड्थ 30 पर दे दी वैसे ही क्या होगा वैसे ही इसके साइज पर एक बार हम नोटिस करने वाले क्या-क्या चेंजेज आए आउटर बॉक्स के अगर डायमेंशन देखें तो वो हमें पता है कि 100 पिक्सेल विड्थ है 100 पिक्सल्स हाइट है पर इनर बॉक्स के लिए थोड़ा सा इसके बॉक्स मॉडल पर जाते हैं इनर बॉक्स के लिए अब जो इसका साइज हो गया है वो हाइट तो हमने सेट कर दी थी व्हिच वाज 50 पिक्सल्स पर विड्थ कितनी हुई विड्थ हुई 30 पिक्सल्स यहां पर 30 क्रॉस 50 में 30 की विड्थ है 50 इस की हाइट है पर 30 पिक्सल्स विड्थ आई कहां से वो यहां से आई कि इसके पैर पेरेंट की जो विड्थ थी पेरेंट कौन था पेरेंट था बॉक्स वन चाइल्ड था बॉक्स टू तो बॉक्स टू का जो पेरेंट था बॉक्स वन उसकी विड्थ थी 100 पिक्सल्स एंड 100 पिक्सल्स का 30 पर होता है 30 पिक्सल्स तो इसीलिए इसकी भी विड्थ है 30 पिक्सल्स के इक्वल हम चाहे तो इसे थोड़ा सा चेंज करके मॉडिफाई करके भी देख सकते हैं अगर हम इसकी विड्थ को थोड़ा सा बढ़ा दें यानी 50 पिक्सल्स कर दें तो इसकी आधी मतलब 50 पिक्सल्स के इक्वल विड्थ हो जाएगी एंड अगर इसे 100% कर दे तो इसकी भी विड्थ 100 पिक्सल के इक्वल हो जाएगी व्हिच इज इक्वल टू द विड्थ ऑफ इस पेरेंट तो परसेंटेज जो होता है वो पैरेंट के कंपैरिजन में होता है यही सेम चीज हम मार्जिन के साथ भी टेस्ट कर सकते हैं मतलब अगर यहां पर बॉक्स टू को मैंने दे दिया मार्जिन लेफ्ट से 10 पर तो उसका क्या मतलब होगा इसे करेंगे रिफ्रेश तो मार्जिन लेफ्ट से 10 पर कहने का मतलब है कि अब इसकी जो मार्जिन है वो इक्वल है 10 पिक्सल्स के तो विड्थ कितनी थी बॉक्स वन की विड्थ थी 100 पिक्सल्स तो 100 का 10 पर यहां पर लिया जाएगा मतलब जो भी विड्थ है उसका 10 पर यहां पे लिया जाएगा जो कि इक्वल होगा 10 पिक्सल्स के तो इसीलिए लेफ्ट से जो बॉक्स टू को मार्जिन मिली है वो है 10 पिक्सल्स के इक्वल हम चाहे तो एक और चीज टेस्ट कर सकते हैं अगर मैंने विथ 200 पिक्सल्स कर दी पेरेंट की तो अब मार्जिन लेफ्ट कितना होना चाहिए 200 पिक्सल्स का 10 पर कितना होता है 20 पिक्सल्स तो अब इसे रिफ्रेश करेंगे और अब हम इसकी मार्जिन लेफ्ट देखें तो मार्जिन हो जाएगी इनर बॉक्स की 20 पिक्सल्स के इक्वल तो इस तरीके से परसेंटेज काम करती है सीएसएस के अंदर एंड इट इज अ वेरी इंपॉर्टेंट यूनिट ऑफ मेजरमेंट इन सीएसएस नेक्स्ट हम बात करने वाले हैं अपनी सेकंड यूनिट के बारे में जो है हमारा एम अब एम को हम एम जो हमारा इंग्लिश वाला एम होता है वैसे ही प्रोनाउंस करते हैं बट इसे बोलते हैं हम ए ए में अगर हम टेक्स्ट रिलेटेड प्रॉपर्टीज की बात करें मतलब जैसे फॉन्ट साइज हो गया या और दूसरी जो टेक्स्ट रिलेटेड फॉन्ट रिलेटेड प्रॉपर्टीज हो गई उन सारी केसेस में अगर मैंने 1m लिख दिया तो वो होगा रिलेटिव टू द फंट साइज ऑफ पैरेंट मतलब अगर मेरे बाहर कोई डिव लिखा हुआ है और उसके अंदर मैंने कोई डिव बनाया है एंड डिव के अंदर मैंने कुछ टेक्स्ट को ऐड किया है लेट्स सपोज मैंने यहां पे बॉक्स टू लिख दिया यहां पे मैंने बॉक्स वन लिख दिया है डिव के लिए एंड बॉक्स वन का अगर फॉन्ट साइज 100 पिक्सल्स है जो काफी बड़ा फॉन्ट साइज होगा एंड अगर मैं बॉक्स टू के लिए फॉन्ट साइज को लिखूं 1m तो इसका मतलब होगा कि बॉक्स टू के लिए भी फॉन्ट साइज 100 पिक्सेल ही होने वाला है तो 1m का मतलब होता है रिलेटिव टू द फॉन्ट साइज ऑफ पेरेंट और जब हम फॉन्ट रिलेटेड से दूसरी प्रॉपर्टीज के बारे में बात करते हैं जैसे हमारी विड्थ हो गई तो उसमें हम फॉन्ट साइज ऑफ एलिमेंट को ही कंसीडर करते हैं ये थोड़ा सा प्रैक्टिकली हम चीजों को देखेंगे तो ज्यादा समझ में आएगा बेसिकली यहां पर फॉन्ट साइज के कंपैरिजन में चीजें चेंज होती हैं जैसे अगर यहां पर मैंने लिया एक बॉक्स वन बॉक्स वन के लिए मैंने इसका फॉन्ट साइज लेट्स सपोज सेट किया है फॉन्ट साइज इक्वल टू 10 पिक्सल्स तो फॉन्ट साइज मेरा 10 पिक्सल्स के इक्वल सेट हो गया ये मेरा बॉक्स वन 10 पिक्सल्स लिखा हुआ है और अब यहां पर मैंने बॉक्स टू लिखा है और अब अगर हम बॉक्स टू के लिए जाएं तो इसके फॉन्ट साइज को लेट्स सपोज हम सेट करते हैं टू 2m 2m यानी जितना फॉन्ट साइज मेरे बॉक्स वन का है उससे डबल फॉन्ट साइज इस बॉक्स टू का होना चाहिए इसको करेंगे रिफ्रेश एंड अब जाके स्क्रोल कर सकते हैं हर कर सकते हैं बॉक्स वन का फॉन्ट साइज मुझे पता चल रहा है 10 पिक्सल्स है एंड बॉक्स टू का फॉन्ट साइज मुझे दिखा रहा है 20 पिक्सल्स है तो क्या हुआ जितना मेरे पैरेंट एलिमेंट का फॉन्ट साइज था उससे मेरा फॉन्ट साइज क्या हो गया है डबल हो गया है 2m मतलब टू टाइम ऑफ पेरेंट्स फॉन्ट साइज इसको मैं लिखकर भी बता देती हूं इसको कह सकते हैं टू टाइम्स ऑफ पेरेंट्स फॉन्ट साइज और अगर यहां 3m कर दिया तो मतलब थ्री टाइम्स 5m कर दिया तो फाइव टाइम्स और इसको हम आधा भी कर सकते हैं यानी अगर यहां मैंने 0.5m कर दिया तो इसका मतलब होगा हाफ ऑफ पेरेंट्स फॉन्ट साइज पेरेंट का फॉन्ट साइज है 10 पिक्सल्स तो मेरा 0.5m है तो मतलब पांच पिक्सल्स होगा बॉक्स टू के लिए तो यहां बॉक्स वन का 10 पिक्सल्स है बॉक्स टू का फाइव पिक्सल्स है जो काफी छोटा होता है तो इस तरीके से m काम करता है सीएसएस के अंदर हम चाहे तो इसे दूसरी प्रॉपर्टीज के लिए भी यूज कर सकते हैं जैसे अगर यहां पर मैंने 1m लिख दिया तो पैरेंट का फॉन्ट साइज अगर 10 पिक्सल्स है तो बॉक्स टू का फॉन्ट साइज होगा 10 पिक्सल्स के इक्वल यानी सेम बट अगर यहां मैंने विड्थ को लिख दिया इक्वल टू 5m विड्थ के 5m होने का मतलब होगा कि फॉन्ट साइज का फाइव टाइम्स यानी विड्थ ऐसी प्रॉपर्टी है जिसमें m का मतलब होता है इट सेल्फ यानी फॉन्ट साइज ऐसी प्रॉपर्टी है जिसमें फंट साइज ऑफ पेरेंट देखा जाए आएगा जबकि विड्थ ऐसी प्रॉपर्टी है जिसमें फॉन्ट साइज ऑफ़ एलिमेंट इट सेल्फ देखा जाएगा मतलब यह अपना फॉन्ट साइज देखेगा अगर इसके फॉन्ट साइज को हमने 2m कर दिया पेरेंट का फॉन्ट साइज है 10 पिक्सल्स तो चाइल्ड एलिमेंट का फॉन्ट साइज हो जाएगा 20 पिक्सल्स और इसकी विड्थ हो जाएगी 20 * 5 यानी 100 पिक्सल्स इसको एक बार करते हैं रिफ्रेश एंड अब इस पर जाकर स्क्रोल करेंगे तो बॉक्स टू के लिए जो विड्थ हो जाएगी विड्थ है 5m तो इसकी विड्थ देख लेते हैं दैट इज इक्वल टू 100 पिक्सल्स 100 पिक्सल्स यानी फाइव टाइम्स ऑफ फॉन्ट साइज फॉन्ट साइज कि कितना है इसका फॉन्ट साइज है 20 पिक्सल्स यानी टू टाइम्स ऑफ पेरेंट्स फॉन्ट साइज तो m जो प्रॉपर्टी है हमेशा पेरेंट के फॉन्ट साइज पर डिपेंड नहीं करती कुछ ऐसी प्रॉपर्टीज होंगी जैसे फॉन्ट साइज जो पेरेंट के फॉन्ट साइज पर डिपेंड करेंगी पर कुछ ऐसी प्रॉपर्टीज होंगी जो एलिमेंट के खुद के फॉन्ट साइज पर डिपेंड करेंगी तो ये जो खास ख्याल है वो याद रखना इंपॉर्टेंट है अब सीएसएस को समझने में काफी जगह आपको लिखा हुआ दिखाई देगा रिसोर्सेस में कि पैरेंट का ही फॉन्ट साइज होता है हमेशा जो कि कंपलीटली गलत है कुछ-कुछ प्रॉपर्टीज के लिए खुद का फॉन्ट साइज होता है m का मतलब अब इसके बाद एक तीसरा रिलेटिव यूनिट हमारे पास आता है व्हिच इज द √ m जिसको हम शॉर्ट में रेम भी कह देते हैं तो इसका मतलब होता है कि हमेशा पेरेंट का नहीं हमेशा अपने रूट एलिमेंट का यानी सबसे बाहर जो एलिमेंट है जो आपका html5 रेम और अब अगर हम रिफ्रेश करें तो इस बार विड्थ कितनी होगी इस बार मेरी जो विड्थ है इनर बॉक्स की वो हो जाएगी 80 पिक्सल्स अब ये 880 पिक्सल्स कहां से आया 80 पिक्सल्स को समझने के लिए हम क्या कर सकते हैं अपने बॉडी टैग के अंदर जाकर मैं लिखने वाली हूं एक हेलो सिंपली हम हेलो लिखेंगे ये हेलो क्या हो गया ये हेलो यहां पर आ गया अब इस हेलो पर जाकर अगर मैं स्क्रोल करूं तो हेलो के लिए फॉन्ट साइज दिखा रहा है 16 पिक्सल्स के इक्वल यानी बाय डिफॉल्ट जो मेरे बॉडी टैग के अंदर कोई भी टेक्स्ट अगर लिखा जाता है तो वो कितने साइज का होगा मेरे ब्राउजर पर बाय डिफॉल्ट बॉडी टैग के अंदर अगर कुछ भी लिखा गया है जो पैराग्राफ टैग के अंदर नहीं है किसी टैग के अंदर नहीं है ऐसे रैंडम टेक्स्ट लिखा आ गया है तो वह 16 पिक्सल्स के इक्वल है अब 16 पिक्सल्स फॉन्ट साइज के हिसाब से अगर मैंने यहां पर इसकी विड्थ फाइव रेम सेट कर दी तो 5 ड बा 16 कितना हो जाएगा 5 म बा 16 हो जाएगा 80 पिक्सल्स एंड वही सेम चीज इस इनर बॉक्स की विड्थ है व्हिच इज इक्वल टू 80 पिक्सल्स तो रम का मतलब जो सबसे आउटर लेवल पर आपने फॉन्ट साइज लिखा है रूट एलिमेंट का जो फॉन्ट साइज है उसके हिसाब से आप चीजों को सेट कर रहे हैं तो थोड़ा सा मैथ यहां पर हो गया पर मैथ से कंफ्यूज नहीं होना बेसिकली अंडरस्टैंडिंग बिल्ड करने के लिए थोड़ा सा नंबर्स को बैकग्राउंड में चल के आ रहा है उसको समझना जरूरी है बट इस तरीके से हमारे रिलेटिव यूनिट्स काम करते हैं इसके अलावा दो और रिलेटिव यूनिट्स हैं जो इतना ज्यादा फ्रीक्वेंसी जो मुझे दिखाई दे रहा है तो बेसिकली व्यू पोर्ट की जगह इसको ब्राउजर भी कह सकते हैं तो रिलेटिव टू 1 पर ऑफ व्यूपोर्ट हाइट कहने का मतलब है कि अगर बॉक्स टू को इसके लिए हम हाइट यहां से हाइट हटा देते हैं एंड अगर बॉक्स टू को मैं हाइट दे दूं % ऑफ व्यूपोर्ट यानी वनवी ए तो इसका मतलब होगा व्यूपोर्ट की ब्राउजर की जितनी हाइट है बॉक्स टू की हाइट उसका % होगी बट अगर मैंने इसको 50 लिख दिया तो मतलब ब्राउजर की जितनी हाइट है अभी मेरी विंडो की जितनी हाइट मुझे दिखाई दे रही है ये जो इनर बॉक्स है येलो वाला इसकी हाइट 50 पर कवर कर रही है स्क्रीन का पर अगर मैंने इसे 100 दे दिया तो इसका मतलब होगा जितनी मेरी स्क्रीन साइज है ब्राउजर में जो मुझे अभी दिखाई दे रही है उतना ही साइज मेरा येलो वाला बॉक्स लेगा इसको करते हैं रिफ्रेश तो पूरी स्क्रीन जितना साइज यानी इतना टोटल साइज मेरा येलो वाला बॉक्स ऑक्यूपाइड हाइट जितनी हाइट है स्क्रीन की उसके हिसाब से एंड उसी सिमिलर वे में हम किसी यूनिट को रिलेटिव सेट कर सकते हैं टू 1 पर ऑफ व्यू पोर्ट विड्थ यानी जितनी मेरी स्क्रीन की विड्थ है चौड़ाई है उस हिसाब से रिलेटिव सेट करना नेक्स्ट हम बात करने वाले हैं पोजीशन प्रॉपर्टी का जो काफी इंपॉर्टेंट ट सीएसएस प्रॉपर्टी है पोजीशन प्रॉपर्टी क्या कहती है सीएसएस पोजीशन प्रॉपर्टी सेट्स हाउ एन एलिमेंट इज पोजीशन इन अ डॉक्यूमेंट यानी अगर यह मेरा डॉक्यूमेंट है तो इस डॉक्यूमेंट के अंदर कौन सा एलिमेंट कौन सी पोजीशन पर है हो सकता है एक डिव यहां पर हो तो एक डिव यहां पर हो तो एक डिव नीचे की तरफ हो एक डिव बिल्कुल टॉप से जुड़ा हुआ हो एक डिव बिल्कुल बॉटम से जुड़ा हुआ हो तो ये डिव की पोजीशन या किसी और एलिमेंट की किसी बटन की पैराग्राफ की हेडिंग की पोजीशन को जो प्रॉपर्टी सेट करती है उसे हम पोजीशन प्रॉपर्टी कहते हैं पोजीशन प्रॉपर्टी के लिए हमारे पास चार पॉसिबल वैल्यूज होती हैं एक स्टैटिक एक रिलेटिव एक एब्सलूट एक फिक्स्ड तो चारों प्रॉपर्टीज को हम डिटेल में कवर करेंगे सबसे पहले बात करते हैं पोजीशन में स्टैटिक वैल्यू की स्टैटिक बाय डिफॉल्ट सारे के सारे एलिमेंट्स स्टैटिक ही होते हैं पोजीशन को और थोड़ा सा एनालाइज करने के लिए हम क्या करेंगे हम अपने index.htm के अंदर कुछ-कुछ डिब्स को क्रिएट करने वाले हैं जैसे यह हो गया मेरा डिव यहां पर एक हेडिंग दे देते हैं h1 हेडिंग इसको कहेंगे पोजीशन प्लेग्राउंड ये मेरा पोजीशन प्लेग्राउंड बन गया थोड़ा सा मिनिमाइज कर लेते हैं इंस्पेक्ट को एंड इसके बाद डिफ्स को हम क्रिएट करने वाले हैं तो यह मेरा हो गया बॉक्स वन वाला डिव इसके बाद क्रिएट कर लेते हैं एक बॉक्स टू वाला डिव एंड बॉक्स थ्री वाला डेव एंड इसके साथ-साथ एक और बॉक्स फोर वाला डेव तो ये चारों डव्स मेरे पास आ गए इनको नाम भी दे देते हैं दिस इज बॉक्स वन दिस इज बॉक्स टू दिस इज बॉक्स थ्री एंड ये हो गया हमारे पास बॉक्स फोर तो ये चारों डिब्स मेरे पास आ गए कुछ इस तरीके के डिब्स होंगे इन सारे डिब्स को कुछ प्रॉपर्टीज भी दे देते हैं जैसे सब की हम हाइट सेट कर देते हैं लेट्स से 100 पिक्सल्स एंड विड्थ भी सेट कर देते हैं 100 पिक्सल्स एंड इन सबको एक बैकग्राउंड कलर दे देते हैं बैकग्राउंड कलर लेट्स से हम एक्वा सेट करते हैं चारों के लिए चारों डिब्स इस तरीके से आ गए इनका बॉर्डर सेट कर देते हैं बॉर्डर हो गया टू पिक्सल सॉलिड ब्लैक इस तरीके से बॉर्डर हमने दे दिया है एंड चारों डिव मेरे पास आ गए हैं अब ये यहां पर इस डिव के लिए डबल बॉर्डर कैसे डिस्प्ले हुआ डबल बॉर्डर इसलिए डिस्प्ले हुआ क्योंकि ये जो मेरे चारों डिब्स हैं ये इस डिव के अंदर है जिसको भी हमने बॉर्डर दे दिया है तो इंस्टेड ऑफ दिस क्या करते हैं आउटर डिव को हम हटा देते हैं एंड अब क्या हुआ सबके लिए इक्वल बॉर्डर हो गया एंड एक और चीज मैं करने वाली हूं कि सब का जो डिस्प्ले है इसको सेट कर लेते हैं टू इनलाइन ब्लॉक सेव रिफ्रेश चारों बॉक्सेस सेम लाइन के अंदर आ गए एंड अब इनकी जो पोजीशन है उसको स्टडी करना थोड़ा सा आसान रहेगा इसको पेज को हम दोबारा ले आते हैं 100% पे तो 100% पे पेज आ गया इस तरीके से चार बॉक्सेस हैं मेरे पास इन चारों बॉक्सेस के साथ अब हम पोजीशन पोजीशन खेलने वाले हैं तो पोजीशन खेलते हुए सबसे पहले आ जाते हैं अपने बॉक्स वन पे बॉक्स वन की पोजीशन को हम सेट करने वाले हैं स्टैटिक जैसे ही पोजीशन को स्टैटिक किया एंड इसको हमने रिफ्रेश किया बॉक्स वन के अंदर कोई चेंज नहीं आया क्योंकि बाय डिफॉल्ट सारे के सारे एलिमेंट्स की जो पोजीशन होती है सीएसएस के अंदर वो स्टैटिक होती है स्टैटिक यानी मेरी डिफॉल्ट पोजीशन तो डिफॉल्ट पोजीशन के अंदर आप कोई चेंजेज नहीं कर सकते तो पोजीशन से रिलेटेड हमारे पास तीन-चार प्रॉपर्टीज और होती हैं जैसे एक होती है मेरी टॉप प्रॉपर्टी एक होती है मेरी राइट प्रॉपर्टी एक होती है मेरी बॉटम प्रॉपर्टी एक होती है मेरी लेफ्ट प्रॉपर्टी एंड एक होती है मेरी z इंडेक्स या z इंडेक्स प्रॉपर्टी अब z इंडेक्स क्या है z इंडेक्स क्या है उसके बारे में हम थोड़ा सा अभी बाद में जाके बात करने वाले हैं तो सबसे पहले बात करते हैं टॉप राइट बॉटम एंड लेफ्ट प्रॉपर्टी के बारे में जब भी मुझे टॉप से कोई डिस्टेंस सेट करना होता है कि पेज के टॉप से मेरा एलिमेंट कितने डिस्टेंस पर होना चाहिए तो उसके लिए हम टॉप प्रॉपर्टी का यूज़ करते हैं मैं सिंपली लिख सकती हूं टॉप से 20 पिक्सल्स होना चाहिए और जब भी हमें राइट से डिस्टेंस चाहिए होता है मतलब ये अगर मेरा डॉक्यूमेंट है और मैं डॉक्यूमेंट की राइट लाइन से अपने एलिमेंट को सेट करना चाहती हूं तो उसके लिए हम राइट को सेट कर सकते हैं लेट्स से 20 पिक्सल्स उसी तरीके से डॉक्यूमेंट है डॉक्यूमेंट से बॉटम से अगर मुझे कुछ डिस्टेंस देना है अपने एलिमेंट को तो उसके लिए हम बॉटम को सेट कर सकते हैं 20 पिक्सल्स एंड सिमिलरली डॉक्यूमेंट के लेफ्ट से अगर मुझे कोई डिस्टेंस देना है अपने एलिमेंट को तो उसके लिए हम सेट कर सकते हैं लेफ्ट से 20 पिक्सल्स या 50 पिक्सल्स या जो भी डिफरेंट डिफरेंट यूनिट्स को यूज़ करके तो इन चार प्रॉपर्टीज को यूज़ करके हम अपने एलिमेंट को आगे पीछे कर सकते हैं अब ये चारों प्रॉपर्टीज स्टैटिक के साथ काम नहीं करती मतलब अगर मैंने किसी भी बॉक्स वन के लिए पोजीशन को स्टैटिक कर दिया और फिर मैंने कोशिश की कि मैं इसको डिस्टेंस टॉप से 50 पिक्सल्स देना चाहती हूं और मैंने किया रिफ्रेश तो ये बॉक्स वन बिल्कुल मूव नहीं करेगा अगर मैं चाहूं कि मैं इसे बॉटम से डिस्टेंस 50 पिक्सल्स देना चाहती हूं और मैंने किया रिफ्रेश तो भी यह बॉक्स वन बिल्कुल मूव नहीं करेगा तो ये जो टॉप बॉटम लेफ्ट राइट प्रॉपर्टीज होती हैं कोई भी बॉक्स वन की पोजीशन अगर स्टैटिक है तो स्टैटिक के लिए काम नहीं करेंगी स्टैटिक का मतलब होता है बाय डिफॉल्ट अब आ जाते हैं सेकंड वैल्यू पर जो है मेरी रिलेटिव यानी पोजीशन को अगर रिलेटिव सेट किया तो उसका मतलब है एलिमेंट की पोजीशन में अगर अब कोई चेंज आएगा तो वो एलिमेंट रिलेटिव टू इट सेल्फ हो जाएगा जैसे बॉक्स टू की बात करते हैं अगर मैंने बात की बॉक्स टू की एंड बॉक्स टू के लिए मैंने पोजीशन को सेट कर दिया एज रिलेटिव इसको कर देते हैं सेव रिफ्रेश तो अभी तो बॉक्स टू के अंदर कोई चेंज नहीं आया बट अगर मैं बॉक्स टू को बोलूं कि वो क्या हो जाए वो टॉप से 10 पिक्सल्स शिफ्ट हो जाए तो टॉप से 10 पिक्सल्स शिफ्ट होने का मतलब है रिलेटिव यानी खुद का उसके जो अभी पॉइंट है मतलब अभी अगर इसकी बाउंड्री यहां पर है तो टॉप से 10 पिक्सल शिफ्ट होने का मतलब है इस बाउंड्री से अब वो नीचे की तरफ 10 पिक्सल शिफ्ट हो जाएगा करूंगी रिफ्रेश तो वही सेम चेंज आया यानी टॉप पर अगर बाउंड्री पहले यहां पर थी थोड़ा सा ज़ूम इन कर लेते हैं टॉप पर बाउंड्री अगर पहले यहां पर थी अब वो टॉप से 10 पिक्सेल शिफ्ट हो गया है अगर हम चाहे कि ये टॉप से 20 पिक्सेल शिफ्ट हो जाए तो थोड़ा सा और नीचे की तरफ शिफ्ट हो जाएगा और अभी अगर हम चाहते हैं कि ये लेफ्ट से भी 10 पिक्सल्स शिफ्ट हो जाए सेव तो लेफ्ट से 10 पिक्सल्स कहने का मतलब है कि ये राइट की तरफ खींचकर 10 पिक्सल्स चला जाएगा तो अगर टॉप 20 पिक्सल्स होता है तो मतलब बॉटम पे जाएगा लेफ्ट 10 पिक्सल्स होता है तो मतलब मतलब राइट की तरफ जाएगा राइट लिखा हुआ है तो मतलब लेफ्ट की तरफ खींच कर जाएगा तो इसे करेंगे रिफ्रेश तो ये क्या हुआ लेफ्ट से 10 पिक्सेल शिफ्ट हो गया जहां पहले इसकी बाउंड्री थी और अब ये दूसरे एलिमेंट के साथ ओवरलैप कर रहा है तो जब भी एक एलिमेंट दूसरे एलिमेंट के साथ ओवरलैप करता है तो कुछ इस तरीके के एचटीएमएल एलिमेंट्स हमारे पास क्रिएट होते हैं तो रिलेटिव प्रॉपर्टी का यही मतलब है कि एलिमेंट अब रिलेटिव टू इट सेल्फ होगा और जैसे ही आप किसी भी एलिमेंट की पोजीशन को रिलेटिव कर देते हैं तो टॉप राइट बॉटम लेफ्ट z इंडेक्स ये सारी प्रॉपर्टीज वर्क करती हैं तीसरा होता है हमारे पास पोजीशन के लिए एब्सलूट पोजीशन एब्सलूट पोजीशन होती है पोजीशन रिलेटिव टू इट्स क्लोजेस्ट पोजीशन एंसे पोजीशंड एंसे का मतलब है ऐसा एंसेट जो नॉन स्टैटिक हो मतलब जिसकी पोजीशन स्टैटिक ना हो कोई और हो पोजीशन रिलेटिव भी हो सकती है एब्सलूट भी हो सकती है फिक्स्ड भी हो सकती है स्टिकी कुछ और हो बस स्टैटिक ना हो तो ऐसा उसका जो एंसेट होगा एंसेट क्या होता है एंसेट यानी पेरेंट पेरेंट एलिमेंट या पेरेंट का पेरेंट एलिमेंट या उसका भी पेरेंट एलिमेंट तो जितने भी आपके पेरेंट्स हो जाते हैं मतलब बाहर की साइड जो टैग्स लिखे हुए हैं जो एलिमेंट्स लिखे हुए हैं उनको हम एंसेट कहते हैं जैसे यहां पर अगर मैंने एक डिव बनाया और डिव के अंदर मैंने एक और डिव क्रिएट किया डिव के अंदर एक और डिव क्रिएट किया उसके अंदर एक और पैराग्राफ क्रिएट किया तो इस पैराग्राफ टैग के लिए जो बाहर वाला डिव है ये तीनों डिब्स इसके एंसेट हो जाएंगे एंसेट मानी पूर्वज तो बाहर के लेवल में जितने भी आ गए वो सारे उसके पूर्वज हो जाएंगे तो एब्सलूट कहने का मतलब है कि अब पेरेंट या किसी भी एंसेट के रिलेटिव जो नॉन स्ट टिक आंसेस्टर है उसके रिलेटिव अब मुझे शिफ्ट होना है जैसे यहां पर अभी के लिए हमने कोई पैरेंट नहीं बनाया हुआ तो बेसिकली अगर मैं इस बॉक्स थ्री की बात करूं तो बॉक्स थ्री का पेरेंट कौन है इसे थोड़ा सा सही तरीके से लिख लेते हैं तो बॉक्स थ्री का पेरेंट है बॉडी टैग बॉडी टैग क्या है सबसे आउटर में है बॉडी टैग के अंदर ही h1 आ रहा है अंदर ही बॉक्स वन आ रहा है अंदर ही बॉक्स टू आ रहा है अंदर ही बॉक्स थ्री आ रहा है तो बॉक्स थ्री के लिए इसका पैरेंट या इंसेस्टर हो जाएगा बॉडी टैग तो बॉडी टैग के रिलेटिव अब चीजें शिफ्ट होने वाली हैं तो अगर मैं बॉक्स थ्री के लिए इसकी पोजीशन को कर दूं एब्सलूट तो एब्सलूट कहने का मतलब होगा इसको करेंगे रिफ्रेश तो अभी तो बॉक्स थ्री में कोई चेंज नहीं आएगा मतलब पोजीशन वाइज बॉक्स थ्री मेरा वहीं के वहीं रखा हुआ है बट मेरा बॉक्स फोर गायब हो गया बॉक्स फोर एक्चुअली गायब नहीं हुआ है बॉक्स फोर बॉक्स थ्री के बिल्कुल नीचे जाकर प्लेस हो गया है ये क्यों हुआ क्योंकि जैसे ही पोजीशन को एब्सलूट रखा गया वो डॉक्यूमेंट फ्लो से हट गया और अब उसकी पोजीशन डॉक्यूमेंट के बॉडी टैग के हिसाब से चेंज हो रही है मतलब अगर मैं चाहती हूं टॉप से सिर्फ 10 पिक्सल्स हो तो यहां पर अब टॉप कहां पर है टॉप है बॉडी टैग का टॉप यानी पूरे डॉक्यूमेंट का टॉप तो जो मेरे ऊपर ब्राउजर के ऊपर वाला जो टॉप है उससे 10 पिक्सल्स पे शिफ्ट हो जाएगा मेरा बॉक्स थ्री एंड ये इसके नीचे छुपा हुआ ये रहा मेरा बॉक्स फोर ये वाला बट बॉक्स थ्री यहां पर है अब मैं क्या करती हूं एक बार के लिए इनको हम क्या कर लेते हैं अलग-अलग कलर्स दे देते हैं ताकि ये और क्लियर हमें दिखाई दे तो एक के लिए बैकग्राउंड कलर को सेट कर लेते हैं रेड एक के लिए हम बैकग्राउंड कलर को सेट कर लेते हैं टू लेट्स से ग्रीन एंड इस बॉक्स फोर के लिए बैकग्राउंड कलर को सेट कर लेते हैं टू ब्लैक तो ये मेरा बॉक्स वन हो गया बॉक्स टू हो गया बॉक्स थ्री हो गया बॉक्स फोर हो गया तो यहां पे क्लियर दिखाई दे रहा है बॉक्स फोर क्या था बॉक्स थ्री के नीचे हिडन हो गया था अब बॉक्स थ्री कहां आया टॉप से 10 पिक्सल्स हो गया और टॉप कहां से मेजर हो रहा है टॉप मेजर हो रहा है क्लोजेस्ट पोजीशन एंसेट यानी मेरे बॉडी टैग से ये समझना बहुत जरूरी है क्लोजेस्ट पोजीशन यानी नॉन स्टैटिक एंसेट कौन हो गया बॉक्स थ्री के लिए उसका बॉडी टैग बॉडी टैग यानी पूरा का पूरा ब्राउजर विंडो या मेरा डॉक्यूमेंट हम चाहे तो इसको लेफ्ट से भी दे सकते हैं लेफ्ट से अगर मैंने इसे 20 पिक्सल्स दिया तो ये कहां जाएगा इस पूरे के पूरे डॉक्यूमेंट के लेफ्ट साइड से 20 पिक्सल्स जाएगा रिफ्रेश तो अब ये लेफ्ट से 20 पिक्सल्स चला गया मतलब यहां से 20 पिक्सल्स है एंड टॉप से अब ये 10 पिक्सल्स है अब बात करते हैं बॉक्स फोर की जिसके अंदर अप्लाई करेंगे हम फिक्स्ड तो पोजीशन फिक्स्ड होने का मतलब है कि पोजीशन इज नाउ रिलेटिव टू द ब्राउजर एब्सलूट के केस में एंसेनर के रिलेटिव थी जो किसी-किसी केस में ब्राउजर भी हो सकता है बट फिक्स्ड के केस में हमेशा ब्राउजर ही होगा एंड इस केस में हमारा जो एलिमेंट है वो डॉक्यूमेंट फ्लो से हट जाएगा तो यहां पर आ जाते हैं बॉक्स फोर पर एंड बॉक्स फोर के लिए लिए पोजीशन को कर देंगे फिक्स्ड अब अगर मैंने पोजीशन को फिक्स कर दिया एंड इसे लेट्स सपोज मैं राइट से 10 पिक्सल्स रखना चाहती हूं तो राइट यानी मेरे डॉक्यूमेंट का राइट इसके लिए कलर को ब्लैक की जगह कोई और कलर दे देते हैं ताकि ये थोड़ा और विजिबल हो तो पिंक कर दिया और राइट यानी मेरे डॉक्यूमेंट का पूरा का पूरा राइट साइड राइट से 10 पिक्सेल जाएगा रिफ्रेश करेंगे तो ये बॉक्स फोर यहां पर है और ये राइट एंड से पूरे के पूरे डॉक्यूमेंट के राइट से 10 पिक्सल्स है मैं चाहूं तो इसे बॉटम से भी दे सकती हूं बॉटम से अगर हम इसे 20 पिक्सल्स कर दें तो अब क्या हो गया रिफ्रेश हो गया एंड यह बॉटम से 20 पिक्सल्स हो गया तो जो हमारे फुटर्सीज के बिल्कुल नीचे आते हैं उनको हम क्या कर देते हैं पोजीशन फिक्स कर देते हैं कि आप डॉक्यूमेंट के बिल्कुल नीचे ही रहेंगे या हेडर है तो उसकी पोजीशन डॉक्यूमेंट के ऊपर फिक्स कर देते हैं कि टॉप से 10 पिक्सल्स हो गया टॉप से रो पिक्सेल भी हम कर सकते हैं अगर मुझे बिल्कुल इस बॉक्स फोर को फुटर की तरह बनाना है तो मैं इसे बॉटम से रो पिक्सल्स कर सकती हूं पिक्सेल भी नहीं सिर्फ रो लिखने की जरूरत है रिफ्रेश तो क्या हो गया अब हमेशा यह जो बॉटम होगा पेज का उससे सटा रहेगा एंड इसकी जो विड्थ है इसको अगर मैं 100% कर दूं सेव रिफ्रेश तो ये क्या हुआ पूरा का पूरा जो मेरा डॉक्यूमेंट है उसकी कंप्लीट विड्थ इसने ऑक्यूपाइड विड्थ अगर मैं कह दूं परसेंटेज की जगह सेव रिफ्रेश तो कुछ इस तरीके से मुझे दिखाई दे रहा है एंड इसी तरीके से हम अपने फुट्स को क्रिएट कर सकते हैं अब एक और स्पेशल चीज हम देखने वाले हैं मैं क्या करूंगी इस बॉक्स फोर को पेज के सबसे टॉप पे लगा दूंगी हमने क्या किया बॉक्स फोर को पेज के सबसे टॉप पे लगा दिया html5 अब क्या करेंगे यहां पर बहुत सारे पैराग्राफ्स हम ऐड करने वाले हैं हेडिंग के बाद पैराग्राफ्स में काफी सारा टेक्स्ट ऐड कर देते हैं लेट्स सपोज वी मेक इट अ लॉट ऑफ टेक्स्ट लोरम * 100 कर दिया है मैंने बहुत सारा टेक्स्ट जनरेट कर लिया है एंड बॉक्स थ्री के लिए इसकी पोजीशन थोड़ी सी नीचे कर देते हैं तो टॉप से इसे लेट्स सपोज कर देते हैं 100 पिक्सल सेव रिफ्रेश और थोड़ा नीचे करते हैं 500 पिक्सल्स कर देते हैं सेव रिफ्रेश अब ये जो h1 हेडिंग है ये इस बॉक्स के बिल्कुल पीछे की तरफ जा रही है सारी चीजें इस तरीके से मुझे दिखाई दे रही है बहुत सारा टेक्स्ट आ गया मेरी स्क्रीन पर अब अगर मैं इस पेज पर स्क्रोल करूंगी तो स्क्रोल करने पर एक स्पेशल चीज हम नोटिस करेंगे क्या स्पेशल चीज नोटिस करेंगे कि मेरा जो बॉक्स फोर है उसकी पोजीशन हमेशा फिक्स्ड रहती है यानी बॉक्स फोर को एक बार मैंने टॉप से जीरो पिक्सल्स पे सेट कर दिया तो वो पूरा टाइम टॉप से जीरो पिक्सल्स पर ही सेट रहेगा तो इस तरीके से हम अपने नव बार्स को क्रिएट करते हैं तो पूरा टाइम ये टॉप से जीरो पिक्सल्स पर सेट रहेगा अब एक और चीज ट्राई करते हैं पोजीशन के लिए वैल्यू स्टिकी स्टिकी कहने का मतलब है दिस इज बेस्ड ऑन द यूजर्स स्क्रोल पोजीशन जैसे अगर बॉक्स थ्री को एब्सलूट की जगह अगर मैं पोजीशन स्टिकी दूं तो अब अगर यहां पर बॉक्स थ्री के बाद जाकर बहुत सारा अगर हमने एक पैराग्राफ ऐड कर दिया जिसके अंदर और काफी सारा टेक्स्ट लेट्स से लोरम * 100 एंटर काफी सारा टेक्स्ट जनरेट कर लिया है तो जैसे ही मैं स्क्रोल कर रही हूं मेरा बॉक्स फोर तो हमेशा फिक्स्ड रहेगा अब हमने पोजीशन स्टिकी कर दिया है इस बॉक्स थ्री की तो बॉक्स थी क्या हो रहा है बॉक्स थ्री जैसे ही मुझे दिखाई देगा और जैसे ही हम स्क्रोल करने लगेंगे बॉक्स थ्री की भी पोजीशन फिक्स्ड हो जाएगी तो स्टिकी यानी जब हम स्क्रॉल करते हैं तो उस हिसाब से स्टिक हो जाने वाला बॉक्स हमारा बॉक्स थ्री होगा एक और चीज ट्राई कर सकते हैं कि बॉक्स थ्री को टॉप से पोजीशन दे देते हैं जीरो पिक्सल सेव रिफ्रेश तो अब जैसे ही मैं स्क्रोल कर रही हूं बॉक्स फोर हमेशा फिक्स रहेगा क्योंकि फिक्स्ड पोजीशन है पर बॉक्स थ्री कब फिक्स होगा बॉक्स थ्री तब फिक्स होगा जब वो अपनी सही पोजीशन पर पहुंच जाएगा मतलब जैसे ही टॉप से जीरो पिक्सल्स पहुंच गया अब बॉक्स थ्री भी मेरा फिक्स्ड हो गया तो इस तरीके से फिक्स्ड एंड स्टिकी को भी हम यूज़ कर सकते हैं अपने नेविगेशन बार या फिर हेडर्स के लिए नेक्स्ट हम करने वाले हैं z इंडेक्स को z इंडेक्स भी कह सकते हैं इसे z इंडेक्स भी कह सकते हैं z इंडेक्स का काम होता है ये डिसाइड करना कि स्टैक लेवल पर एलिमेंट्स किस तरीके से प्लेस होंगे बेसिक बहुत ही आसान भाषा में समझते हैं अभी हमने देखा कि एलिमेंट्स एक दूसरे के ऊपर ओवरलैप भी कर सकते हैं ओवरलैप कहने का मतलब है कि यहां पर ये जो बॉक्स टू है और यह जो बॉक्स थ्री है एक दूसरे पर ओवरलैप कर रहे हैं इनका कुछ हिस्सा एक दूसरे के ऊपर आ रहा है और थोड़ा सा ओवरलैप कराने के के लिए बॉक्स टू को हम लेफ्ट से 25 पिक्सल्स दे देते हैं तो ये थोड़ा सा और ओवरलैप हो जाएगा रिफ्रेश तो ये और ज्यादा जाकर ओवरलैप हो गया तो इस तरीके से जब भी एलिमेंट्स ओवरलैप होते हैं बाद में लिखा जाता है पहले वाला हमेशा अंडर आता है मतलब नीचे आ जाता है एंड बाद वाला हमेशा ओवर आ जाता है यूजुअली अगर बहुत सारे डिब्स हमने क्रिएट किए और काफी सारे डिब्स ओवरलैप हो रहे हैं तो बॉक्स टू पहले लिखा गया है तो वो नीचे जा रहा है एंड बॉक्स थ्री बाद में लिखा गया है तो वो ऊपर जा रहा है तो इस तरीके से ये बाय डिफॉल्ट फीचर है पर हम चाहे तो इस चीज को कंट्रोल भी कर सकते हैं और कंट्रोल करने के लिए हम एक प्रॉपर्टी को यूज़ करते हैं व्हिच इज z इंडेक्स बाय डिफॉल्ट सारे के सारे एलिमेंट्स का जो z इंडेक्स होता है वो जीरो के इक्वल होता है मतलब सबका z इंडेक्स सेम है जो पहले आएगा जो बाद में आएगा उस हिसाब से ऑर्डर डिसाइड होगा बट अगर z इंडेक्स की वैल्यू को किसी एलिमेंट के लिए वन या वन से ज्यादा सेट कर दिया जाए तो उस केस में उसकी प्रायोरिटी बढ़ जाती है मतलब पॉजिटिव अगर z इंडेक्स जितना बड़ा पॉजिटिव वैल्यू में दे दिया जाए एलिमेंट उतना ही ऊपर लेवल पे आता है और जितना नेगेटिव वैल्यू उसको दे दी जाए -1 -2 -10 -100 उतना ही नीचे की तरफ मेरा एलिमेंट जाता जाता है तो अगर मैंने इस तरीके से एक बॉक्स बनाया जिसका बाय डिफॉल्ट z इंडेक्स रो है तो अब अगर मैं एक दूस दूसरा बॉक्स बनाती हूं जिसका z इंडेक्स वन है तो वह हमेशा इस एलिमेंट के ऊपर आकर प्लेस हो जाएगा और अगर मैंने एक ऐसा बॉक्स बनाया जिसका z इंडेक्स -1 है तो वो रो वाले के नीचे जाकर प्लेस होगा तो इसका -1 हो जाएगा तो पॉजिटिव वैल्यूज है मतलब ऊपर की तरफ आएगा नेगेटिव वैल्यू है मतलब नीचे की तरफ आएगा तो इस तरीके से z इंडेक्स कंट्रोल करता है कि ओवरलैपिंग एलिमेंट्स में से कौन सा किस एलिमेंट को कवर कर रहा होगा अब ये z इंडेक्स प्रॉपर्टी आई कहां से है हमने बचपन के अंदर मैथ में अपने ने एक्सेस के बारे में पढ़ा होगा एक्सेस यानी हम अभी तक पढ़ते आए हैं थोड़ा सा देखते आए हैं कि हमारे पास 2d अगर प्लेन की बात की जाए तो उसके अंदर एक हमारे पास एकस एक्सिस होता है एक हमारे पास y एक्सिस होता है एकस एक्सिस यानी मेरी हॉरिजॉन्टल डायरेक्शन ये वाली डायरेक्शन वा एक्सिस यानी वर्टिकल डायरेक्शन ये वाली डायरेक्शन बट इसके अलावा एक और 3d स्पेस की अगर बात की जाती है जब भी 3d स्पेस के अंदर एक और एक्सिस होता है व्हिच इज माय z एक्सिस जो बाहर की तरफ आ रहा होता है एंड अंदर की तरफ जा रहा होता है तो बाहर अंदर की तरफ जो 3डी स्पेस में एक्सेस जाता है उसको हम जड एक्सेस कहते हैं और वहीं से इसका नाम जड इंडेक्स आया है मतलब अगर कौन सी चीज टॉप पे आएगी कौन सी चीज बॉटम पे आएगी एक एक्सिस में जिस चीज की पॉजिटिव वैल्यू होती है वो राइट की तरफ जाती है जिसकी नेगेटिव होती है वो लेफ्ट की तरफ जाती है जैसे यहां पर अगर टॉप से मैं पोजीशन को -20 पिक्सेल दे दूं टॉप से -20 पिक्सल्स फॉर बॉक्स टू इसको करें रिफ्रेश तो ये क्या हुआ बॉक्स टू अब अपने नॉर्म नर्मल लेवल से और ऊपर की तरफ चला गया अगर लेफ्ट से इसको -20 पिक्सल्स दे दूं रिफ्रेश करूं तो जहां नॉर्मली इसको होना चाहिए था उससे और लेफ्ट की तरफ चला गया तो जितना हम लेफ्ट की तरफ चीजों को करना चाहते हैं उतना हम नेगेटिव उसके एक्स एक्सिस को यानी लेफ्ट राइट के प्रॉपर्टी को रखते हैं और जितना ऊपर नीचे करना चाहते हैं उसके लिए टॉप और बॉटम को यूज करते हैं पर जितना ज्यादा हम ऊपर ओवर या अंडर लेकर आना चाहते हैं एलिमेंट को उसके लिए हम z इंडेक्स या z एक्सिस को यूज करते हैं तो बहुत सिमिलर है टॉप बॉटम के z एक्सेस इसको भी एक बार चेक आउट करते हैं हम क्या करेंगे नॉर्मल स्टेट में यानी पहले वाली स्टेट में अपने एलिमेंट्स को ले आते हैं जब बहुत सारे पैराग्राफ टैग्स हमारे पास नहीं थे सेव रिफ्रेश इस तरीके का कुछ हमारा लेआउट था इसको भी हटाकर ले आते हैं यहां पर सेव रिफ्रेश तो ये चार बॉक्सेस थे हमारे पास एंड इन चारों बॉक्सेस के लिए यहां स्टिकी से हटाकर इसकी पोजीशन को कर देते हैं लेट्स से एब्सलूट तो यह चारों पोजीशंस कुछ इस तरीके से आ गए थे टॉप से 50 पिक्सल्स कर देते हैं सेव रिफ्रेश तो यहां पर क्या हो रहा है बॉक्स टू एंड बॉक्स फोर ओवरलैप कर रहे हैं बाय डिफॉल्ट बॉक्स टू और बॉक्स फोर का जो z इंडेक्स है z इंडेक्स है वो जीरो है और बॉक्स टू पहले आ रहा है तो वो नीचे की तरफ जा रहा है पर जैसे ही बॉक्स टू के लिए मैंने z इंडेक्स की वैल्यू पॉजिटिव सेट कर दी वैसे ही वो ऊपर आ जाएगा मतलब इसके लिए जाकर z इंडेक्स की वैल्यू को सेट कर देते हैं लेट्स से वन सेव रिफ्रेश तो क्या हुआ बॉक्स टू ऊपर आ गया पर बॉक्स फोर को अगर उससे भी बड़ी वैल्यू दे दी यानी बॉक्स फोर को अगर मैंने z इंडेक्स दे दिया लेट्स से थ्री या टू या फाइव रिफ्रेश करेंगे तो वह दोबारा से ऊपर आ जाएगा बट यहीं पर इसको अगर मैंने नेगेटिव वैल्यू दे दी होती -3 तो वो क्या करता नीचे ही रहता तो इस तरीके से वैल्यू जितनी नेगेटिव होगी वो उतना पीछे जाएगा जितनी पॉजिटिव होगी वो उतना ऊपर की तरफ आ रहा होगा अब एक चीज हमें हमेशा याद रखनी है कि जब भी हमारी जो पोजीशन है वह स्टैटिक होती है उस केस में हम z इंडेक्स प्रॉपर्टी को सेट नहीं कर सकते मतलब अगर मैं चाहूं कि बॉक्स वन के लिए हम z इंडेक्स को सेट कर दें तो वो चीज पॉसिबल नहीं हो पाएगी तो कौन सी प्रॉपर्टी कहां पे अप्लाई करती है उसको हमें याद रखना है एंड थोड़ा सा अपना रिवीजन कर लेते हैं पोजीशन के लिए मेन जो वैल्यूज होती हैं वो चार होती हैं स्टिकी एक एडिशनल होती है अगर आप स्टैटिक रखेंगे तो ये बाय डिफॉल्ट है जिसके अंदर हमारी टॉप बॉटम लेफ्ट एंड राइट साथ के साथ z इंडेक्स ये पांचों प्रॉपर्टीज वर्क नहीं करती रिलेटिव यानी रिलेटिव टू इट सेल्फ एब्सलूट यानी रिलेटिव टू द पेरेंट या यरली पोजीशन पेरेंट एंड फिक्स्ड कम मतलब होता है रिलेटिव टू द ब्राउजर विंडो अब नेक्स्ट चीज जिसके बारे में हम बात करने वाले हैं वो है सेटिंग अ बैकग्राउंड इमेज कभी-कभार हम चाहते हैं कि अपने डॉक्यूमेंट में हम कुछ बैकग्राउंड इमेज सेट करें जैसे यहां पर इन डव्स के लिए ये सारी वैल्यूज को हम एक बार के लिए हटा देते हैं और इसको करते हैं रिफ्रेश तो ये क्या हुआ चार बॉक्सेस मेरे पास आ गए अब यहां पर बॉक्सेस के हमने कलर सेट कर दिए हैं पर मैं हर एक इंडिविजुअल बॉक्स के अंदर अगर चाहूं कि हर बॉक्स का बैकग्राउंड इमेज एक सेट कर पाऊं तो उसके लिए हम क्या कर सकते हैं उसके लिए हम बैकग्राउंड इमेज अपनी प्रॉपर्टी का यूज कर सकते हैं तो एक वेबसाइट मैं यहां पर इंट्रोड्यूस करूंगी अनस्प्लैश के नाम से unsplash.com काफी फेमस वेबसाइट है जिसके अंदर काफी सारी फ्री आप कॉपीराइट फ्री एंड ट्रेडमार्क फ्री इस तरीके की फोटोज डाउनलोड कर सकते हैं तो बेसिकली आप उनको रियल लाइफ के अंदर यूज कर पाएंगे लेट्स से कि मैं मुझे एनिमल्स से रिलेटेड कॉपीराइट फ्री फोटोज को डाउनलोड करना है तो बहुत सारी फोटोज मुझे यहां पर मिल जाएंगी यहां पर लाइसेंस में जाके मैं फ्री जिसका लाइसेंस है वैसी फोटोज हम जाक सेलेक्ट कर सकते हैं लेट्स से मैंने एक कैट की फोटो चूज की है एंड इस फोटो को हम डाउनलोड कर सकते हैं फॉर फ्री तो ये जाकर डाउनलोड हो जाएगी डाउनलोड में जाके मैं क्या करने वाली हूं अपने डाउनलोड्स में जाके इस फोटो का हम नाम चेंज कर देंगे सबसे पहले तो इसको कर देते हैं रिनेम लेट्स से कैट अको फोटो कैट अंडरस्कोर फोटो कर दिया एंड इस फोटो को ड्रैग करके अब मैं अपने क्लासरूम वाले फोल्डर में लेकर आना चाहती हूं तो ये मेरी कैट वाली जो फोटो है जिसको मैंने अन स्लैश से डाउनलोड किया है इसको फोल्डर में लेके आ गए एंड ये मुझे ऑटोमेटिक अब वीएस कोड के अंदर भी दिखने लगेगा यानी वीएस कोड के अंदर जाऊंगी फाइल आइकन पे क्लिक करूंगी तो एक कैट वाली फोटो वीएस कोड के अंदर आ गई हम चाहे तो इसको डिस्प्ले करा सकते हैं पर बाइनरी फॉर्मेट में डिस्प्ले होंगी कुछ-कुछ फोटोज हैं जो डिस्प्ले हो जाती हैं वीएस कोड के अंदर पर सारी नहीं होती बट बेसिकली क्लासरूम वाले फोल्डर के अंदर मेरे पास यह फोटो आ गई है अब इस फोटो को हम बैकग्राउंड इमेज की तरह सेट करने के लिए पूरी तरह तैयार है मैं चाहती हूं कि मेरा ये जो बॉक्स वन है इसका बैकग्राउंड कैट वाली फोटो आ जाए तो उसके लिए मुझे जाकर क्या करना है मुझे जाना है बॉक्स वन के लिए एंड यूज करना है बैकग्राउंड इमेज प्रॉपर्टी को तो हम लिखेंगे बैकग्राउंड इमेज एंड अब मैं लिखूंगी यूआरएल यूआरएल यानी जो लिंक होता है डबल कोड्स लिखेंगे एंड अब इस फोटो का हम पूरा लिंक लिखने वाले हैं अगर यह फोटो मेरे फोल्डर के अंदर एजिस्ट करती है तो जो इसका नाम है हम वो लिखेंगे व्हिच इज कट इमेज ड जपजी इस तरीके से हम लिख सकते हैं पर अगर मान लेते हैं हमने कोई और अलग से फोल्डर बना जिसके अंदर बहुत सारी फोटोज हमने रखी हुई है तो उस केस में हम उस फोल्डर का पूरा का पूरा जो पाथ है जो लिंक होता है उसको यहां पर लिख रहे होंगे पर सिंपलीसिटी की बात करते हैं अभी डेवलपमेंट के अंदर सीएसएस में हम शुरुआत ही कर रहे हैं एक तरीके से इतने ज्यादा प्रो लेवल पे आए नहीं है तो अभी के लिए जब भी हमें फोटो ऐड करनी होगी हम क्या करेंगे अपने फोल्डर के अंदर ही उस चीज को ऐड कर रहे होंगे तो फोटो का हमने यहां पर नाम लिख दिया इसको कर लिया सेव अब करेंगे इसको रिफ्रेश तो यहां रिफ्रेश होके कुछ आ नहीं रहा क्योंकि कैट इमेज की जगह मुझे क्या लिखना था यहां पर हमें लिखना था कैट फोटो जो कि सही नाम है सेव रिफ्रेश तो क्या हुआ अब एक फोटो दिखाई तो दे रही है मतलब कलर तो यहां पे चेंज हो गया है कुछ कुछ बट फॉर सम रीजन यहां सिर्फ ब्लैक दिखाई दे रहा है मैं चाहूं तो बॉक्स वन की जो हाइट है उसको इंक्रीज कर सकती हूं लेट्स सपोज इसकी हाइट को इंक्रीज करके मैंने 50 पिक्सल्स कर दिया रिफ्रेश हाइट 50 पिक्सल्स है तो कुछ-कुछ ऐसा फोटो जैसा दिखाई दे रहा है पर पिक्सल्स थोड़े से फटे हुए हैं एंड चीज अच्छे से वर्क आउट नहीं कर रही है तो उसका रीजन यह है कि बैकग्राउंड इमेज जब भी आप आप सेट करते हैं सेम बैकग्राउंड इमेज अगर मैं बॉडी के साथ सेट करूं यानी मैंने अपने बॉडी टैग के लिए पूरे डॉक्यूमेंट के लिए सेम बैकग्राउंड इमेज सेट की तो क्या हुआ इमेज अच्छे से नहीं आई बहुत बड़ी इनलार्ज इमेज बैकग्राउंड में जाके सेट हो गई है एंड पिक्सेलेटेड थोड़ी सी दिखाई दे रही है इसीलिए सिर्फ बैकग्राउंड इमेज प्रॉपर्टी जो है उसको सीखना इंपॉर्टेंट नहीं है उसके साथ हमें एक और प्रॉपर्टी को सीखना पड़ता है व्हिच इज माय बैकग्राउंड साइज प्रॉपर्टी बैकग्राउंड साइज प्रॉपर्टी बहुत काम आती है जब भी हम बैकग्राउंड इमेज को यूज़ कर रहे होते हैं यानी इमेज हमेशा खींच जाती है या बहुत छोटी नजर आ रही होती है तो उसके लिए हम बैकग्राउंड साइज प्रॉपर्टी को यूज़ करते हैं इसके लिए हमारे पास तीन वैल्यूज होती हैं अगर हम बैकग्राउंड साइज को कवर सेट कर देते हैं तो कवर कहने का मतलब होता है कि अब मेरा जितने भी एरिया के अंदर मैं अपनी फोटो डालने की कोशिश कर रही हूं मेरी फोटो अब कंप्लीट कवर कर लेगी उस एरिया को यानी भी कोई भी एमटी स्पेसेस हमारे पास नहीं रहेंगी सो देयर विल बी नो एमटी स्पेस अगर हम कवर को यूज करते हैं कोई एम्टी स्पेस नहीं रहेगी उस बॉक्स के अंदर और पिक्चर जो है कंप्लीट फिट करेगी उस एरिया में तो यहां पर बैकग्राउंड इमेज के साथ अगर हम बैकग्राउंड साइज प्रॉपर्टी को यूज करते हैं और उसमें ऐड करते हैं कवर तो अब करेंगे सेव रिफ्रेश तो क्या हुआ इस बॉक्स के वन के अंदर कंप्लीट मेरी कैट वाली फोटो बहुत सुंदर तरीके से आ गई है मैं चाहूं तो बॉक्स वन की जगह यहां पर अगर बॉडी टैग लिखूं सेव रिफ्रेश तो क्या हुआ अब पूरी बॉडी के अंदर मेरी कैट वाली इमेज जो है कंप्लीट आ गई है अच्छे से एंड वो पूरी तो नहीं आ पाई इमेज बट कोई भी एमटी स्पेस खाली नहीं है तो जब भी हमें इस तरीके से पूरी इमेज को फिट कराना होता है अपने किसी भी बॉक्स के अंदर और हम चाहते हैं पूरी इमेज कंप्लीट कवर करें कोई एम्टी स्पेस ना बचे तो उसके लिए हम बैकग्राउंड साइज कवर को यूज करते हैं और मैक्सिमम केसेस में हम बैकग्राउंड साइज कवर ही यूज करेंगे बहुत कम केसेस में हम कंटेन या ऑटो को यूज करने वाले हैं तो दूसरी प्रॉपर्टी भी देखना लेकिन जरूरी है कंटेन का मतलब होता है कि इस केस में भी मेरी इमेज जो है वो कंप्लीट फिट तो आ जाएगी पर इस केस में प्रायोरिटी यह होगी कि इमेज कंप्लीट विजिबल हो मतलब दो प्रायोरिटी हो सकती हैं एक है कि मेरा बॉक्स है और मेरी इमेज जो है इस बॉक्स से बड़ी है उस केस में क्या होगा उस केस में जितना पार्ट इस बॉक्स का आ सकता होगा मतलब जितना पार्ट इमेज का इस बॉक्स के अंदर आ सकता होगा उतना आ जाएगा वो तो होगा कवर पर उस केस में जिस केस में इमेज ही छोटी होकर बॉक्स के अंदर आ जाएगी वो होगा कंटेन तो कंटेन को भी एक बार टेस्ट करते हैं अगर कैट की फोटो मैंने कंटेन करके डाली सेफ रिफ्रेश तो क्या हुआ अब ये रिपीट भी हो रही है मतलब कैट की फोटो जो है वो अब रिपीट भी हो रही है बट पूरी की पूरी फोटो यहां पर आ गई है एमटी स्पेस इस केस में भी नहीं है बट पूरी की पूरी फोटो आ गई एंड जो भी खाली जगह बच गई वो वहां पर जाकर रिपीट हो रही है हम चाहे तो इसे रिपीट से भी बचा सकते हैं बैकग्राउंड रिपीट को हम नो रिपीट अगर सेट कर देते हैं सेव रिफ्रेश तो ये रिपीट नहीं होगी तो जो बैकग्राउंड कलर सेट किया है वही आ जाएगा बट यूजुअली हम कंटेन को इतना ज्यादा यूज नहीं करते क्योंकि कवर इससे बेटर रहता है कवर में रिपीट नहीं होता कवर में थोड़ा सा इनलार्ज हो जाती है इमेज एंड तीसरा ऑप्शन बैकग्राउंड साइज में हमारे पास होता है ऑटो का ऑटो के केस में क्या होता है ऑटोमेटिक जितनी इमेज आ पा रही होती है उतनी आ रही होती है तो अगर बैकग्राउंड को हमने ऑटो सेट किया है रिफ्रेश तो ऑटोमेटिक मतलब थोड़ी सी इनलार्ज इमेज मेरे पास आ रही होती है बाय डिफॉल्ट जो होता है वो हमारे पास ऑटो ही होता है बट दोबारा मैं रिपीट कर देती हूं हम हमेशा कोशिश करेंगे कि हम कवर को यूज करें क्योंकि उससे हमारी इमेजेस और ज्यादा बेटर तरीके से दिखती है अब हम बात करने वाले हैं अपने प्रैक्टिस सेट नंबर फाइव के बारे में तो इसे हम सॉल्व करेंगे प्रैक्टिस सेट नंबर फाइव के अंदर हमें एक सवाल दिया है क्रिएट द फॉलोइंग लेआउट यूजिंग द गिवन एटीएमएल तो हमें कुछ इस तरीके की एटीएमएल दी हुई है कि पहले मुझे एक पैराग्राफ टैग को क्रिएट करना है फिर मुझे डिव को क्रिएट करना है फिर मुझे एक और पैराग्राफ क्रिएट करना है यहां हमने रम * 5 लिखा हुआ है रम * 5 कहने का मतलब है बेसिकली हम एमिट कह रहे हैं एमेट यानी लोरम एप्सम वाले एमेट से हमें जनरेट करना है बहुत सारा रैंडम टेक्स्ट अगर आपके वीएस कोड के अंदर अभी एट इंस्टॉल्ड नहीं है और आप रैंडम टेक्स्ट जनरेट नहीं कर पा रहे हैं तो उसमें टेंशन वाली बात नहीं है बेसिकली यहां पर हमें काफी सारा एटलीस्ट 10 लाइंस ऑफ रैंडम टेक्स्ट हमें लिख देना है तो अगर आप ऑटोमेटिक टेक्स्ट जनरेट नहीं कर पा रहे कोई बात नहीं किसी भी रैंडम वेबसाइट पर जाना है वहां से कॉपी पेस्ट करना है और उसको यहां पर पैराग्राफ के अंदर पेस्ट कर देना है तो बस टेंशन नहीं लेनी क्योंकि एज अ प्रोग्रामर आपका माइंड सेट ये होना चाहिए एज अ डेवलपर कि सारी प्रॉब्लम्स सॉल्वेबल है और उन्हें सॉल्व करने की जिम्मेदार हमें खुद रखनी है अब हमें इस तरीके का लेआउट क्रिएट करना है एचटीएमएल के अंदर और फिर उस लेआउट के साथ हमें यह चेंजेज करने हैं तो सबसे पहले तो यह वाला लेआउट क्रिएट कर लेते हैं एचटीएमएस html5 बनाई है एक स्टाइल ड सीएसएस बनाई है दोनों को हमने लिंक कर रखा है अब हम अपना पैराग्राफ टैग क्रिएट करते हैं लोरम * 5 तो काफी सारा रैंडम टेक्स्ट मेरे पास जनरेट हो गया ओबवियसली 10 लाइंस जितना नहीं है पर है काफी सारा है इसके बाद हम एक डिव को ज ट कर लेते हैं दिस इज माय डिव एंड उसके बाद दोबारा से एक और पैराग्राफ टैग जनरेट करते हैं जिसमें लिखेंगे लोरम इट 5 तो यह और रैंडम टेक्स्ट जनरेट हो गया इसे करेंगे सेव एंड रिफ्रेश तो इस तरीके से मेरे पास काफी सारा रैंडम टेक्स्ट आ गया हम चाहे तो इस रैंडम टेक्स्ट को और भी ज्यादा बड़ा कर सकते हैं यह लोरम न 5 से सिर्फ फाइव लाइंस जनरेट हुई है तो कॉपी करके थोड़ा सा और एक्स्ट्रा यहां पर पेस्ट किया जा सकता है इस तरीके से एंड यहां पर भी हम सेम चीज कर सकते हैं कि और रैंडम टेक्स्ट क्योंकि हम बेसिकली चाहते हैं हमारा जो डॉक्यूमेंट बने वो थोड़ा सा स्क्रॉलेबल बन जाए कि थोड़ा हम स्क्रोल कर पा रहे हो डॉक्यूमेंट में इस तरीके से हम स्क्रोल कर पा रहे हैं ऊपर नीचे लेकर जा पा रहे हैं एंड हम चाहे तो थोड़ा सा और भी ऐड कर सकते हैं ऐड करना जरूरी नहीं है यह मैं थोड़ा सा एक्स्ट्रा ही आपको करा रही हूं ताकि हमें क्वेश्चन की जो फील है प्रैक्टिस करने की जो फील है वो पूरी हम ले सके इस तरीके से स्क्रोल कर रहे हैं डॉक्यूमेंट एंड ये बीच में जो एक लाइन खाली है बेसिकली मेरे की है इंस्पेक्ट करके चेक भी कर सकते हैं यहां पर इंस्पेक्ट करेंगे तो ये जो स्पेस खाली है बीच में थोड़ी सी यह मेरे डिव की वजह से नेक्स्ट लाइन आ गई है अब बढ़ जाते हैं अपने फर्स्ट पार्ट की तरफ फर्स्ट पार्ट कह रहा है गिव द डिव अ हाइट विड्थ एंड सम बैकग्राउंड इमेज यानी डिव के लिए हमें हाइट विड्थ और एक बैकग्राउंड इमेज को सेट करना है अच्छा डिव के अंदर हम लव नेचर भी लिख सकते हैं तो डिव और अच्छे से दिखाई देगा तो यहां लिख देते हैं लव नेचर सेव रिफ्रेश तो ये मेरा डिव है एक्चुअली जो फॉर्म हुआ है अब इस डिव के लिए यहां पर आकर एक हाइट सेट कर देते हैं लेट्स मेक इट 100 पिक्सल्स एंड एक विड्थ सेट कर देते हैं उसे भी सेट करते हैं 100 पिक्सल्स तो यह मैंने इसे हाइट दे दी विड्थ दे दी अब चाहे तो इसे एक बैकग्राउंड इमेज भी दे सकते हैं बैकग्राउंड इमेज के लिए हम लिख सकते हैं यूआरएल तो अनस्प्लैश से जाकर कोई भी इमेज हम डाउनलोड कर सकते हैं हमने क्या किया है डाउनलोड्स में ऑलरेडी एक इमेज हमने डाउनलोड कर रखी है तो इसको हम करने वाले हैं कॉपी एंड इसको हम करने वाले पेस्ट इस इमेज को मैंने ने रिनेम कर दिया टू नेचर जपजी तो यह नेर . जपजी कुछ इमेज है जो यहां पर लग गई है तो इसी को हम लिखने वाले हैं रड जपजी सेव करेंगे रिफ्रेश करेंगे तो जूम इन होकर आ रही है इमेज को सेट करने के लिए हमें ऑलरेडी पता है कि हमें क्या करना होता है हम लिख सकते हैं बैकग्राउंड साइज एंड इसको लिख सकते हैं हम कवर सेव रिफ्रेश इस तरीके से एक नेचर टाइप इमेज यहां पर मेरे पास आ गई है हम चाहे तो इसके जो कलर है फंट का कलर उसको भी चेंज कर सकते हैं ताकि और थोड़ा सा दिखाई दे फॉन्ट कलर को हम वाइट कर सकते हैं तो थोड़ा सा अब दिखाई दे रहा है थोड़ा सा बेटर लग रहा है राउंडेड एजेस कर सकते हैं काफी सारे चेंजेज किए जा सकते हैं जो आपके मन में आ रहा है आप वो चेंज इंप्लीमेंट कर सकते हैं यहां पर अब हम क्या करेंगे नेक्स्ट पार्ट में हमें बोला है यूज दी एप्रोप्राइटिंग ऑफ द पेज मतलब अभी मेरा डिव अगर यहां पर है तो मुझे इसको पेज के राइट साइड में प्लेस करना है तो उसके लिए हमें कोई पोजीशन प्रॉपर्टी को यूज करना पड़ेगा तो कौन सी एप्रोप्रियेट पटी होगी तो एक बार देख लेते हैं पोजीशन के लिए हमने अलग-अलग प्रॉपर्टीज को स्टडी किया है एक होती है मेरी स्टैटिक पोजीशन एक होती है मेरी एब्सलूट पोजीशन एक होती है मेरी रिलेटिव पोजीशन इसके अलावा हमारे पास फिक्स्ड पोजीशन भी होती है एंड हमारे पास टिकी भी होती है तो अभी के लिए क्या करते हैं मुझे अगर पेज के राइट साइड में प्लेस करना है तो हमें पता है कि हम क्या कर सकते हैं हम एब्सलूट यूज कर सकते हैं रिलेटिव क्या होता है रिलेटिव होता है पेरेंट या यरली पोजीशन पेरेंट के रिलेटिव में अब इस केस में क्या है डिव का जो पेरेंट है है वो बेसिकली हमारा बॉडी टैग ही है तो चाहे हम एब्सलूट यूज़ कर लें चाहे हम रिलेटिव यूज़ कर लें रिलेटिव में क्या होता है रिलेटिव में बेसिकली पेरेंट के रिलेटिव में या फिर खुद के रिलेटिव में कुछ-कुछ प्रॉपर्टीज के लिए एब्सलूट में ब्राउजर विंडो के रिलेटिव हमारा एलिमेंट प्लेस होता है तो हम यहां पर यूज़ करेंगे पोजीशन एब्सलूट का पोजीशन एब्सलूट डिव के ऊपर सेट करने वाले हैं लेट्स मेक इट पोजीशन एब्सलूट एंड पोजीशन एब्सलूट तो हमने सेट कर ही दिया बट अब क्या हुआ पोजीशन एब्सलूट क्या करती है हमारे पेज लेआउट में से उसे हटा देती है मतलब यहां पर उसके लिए जगह अलग से रिजर्व नहीं होगी टेक्स्ट के ऊपर आ जाएगा डिफ अब टेक्स्ट के ऊपर आ गया बट इसे राइट साइड में प्लेस करने के लिए हम क्या कर सकते हैं इसे मार्जिन दे सकते हैं या मार्जिन की जगह राइट साइड के लिए हम इसे दे सकते हैं राइट से जीरो पिक्सल्स सेव रिफ्रेश तो ये क्या हो गया एगजैक्टली राइट साइड में जाकर प्लेस हो गया और अभी स्क्रोल कर रहे हैं तो ये साथ में स्क्रोल भी हो रहा है हमारे लिए बट एक और चीज हमें सेकंड पार्ट के अंदर मेंशन करके दी हुई है डिव शुड नॉट मूव इवन ऑन स्क्रोल यानी स्क्रोल करने पर डिव मूव नहीं करना चाहिए उसी जगह पर रहना चाहिए तो जब हम ऐसी चीज चाहते हैं कि स्क्रोल करने पर कोई चेंज ना आए तो उस केस में हम यूज करते हैं पोजीशन फिक्स्ड का तो पोजीशन फिक्स्ड करने के लिए हम यहां पर चेंज कर देते हैं टू पोजीशन फिक्स सेव रिफ्रेश अब यहां पर अगर हम इसे स्क्रोल करेंगे तो य क्या करेगा डिव उसी पोजीशन पर सेट है हम चाहे तो इसे थोड़ा सा ऊपर भी सेट कर सकते हैं इसे टॉप से हम थोड़ा सा रख सकते 250 पिक्सल्स सेव रिफ्रेश तो एगजैक्टली यहां पर आकर प्लेस हो जाएगा हम कितना भी स्क्रोल कर लें उसकी पोजीशन हम हमेशा फिक्स रहेगी तो अब स्क्रोल कर रहे हैं तब भी मेरा एलिमेंट फिक्स है तो इस तरीके से हमने कंप्लीट कर लिया है अपने प्रैक्टिस सेट नंबर फाइव को तो अब बढ़ते हैं अपने नेक्स्ट लेवल की तरफ नेक्स्ट हम शुरुआत करने वाले हैं अपने लेवल फोर के साथ जिसके अंदर हम पढ़ेंगे फ्लेक्स बॉक्स के बारे में अब फ्लेक्स बॉक्स कौन सा बॉक्स है उसके बारे में डिस्कवर करेंगे कैसे ये हमें सीएसएस स्टाइलिंग में और अपने एलिमेंट्स के अरेंजमेंट में और बढ़िया तरीके से हेल्प करता है वो भी डिस्कस करेंगे तो शुरुआत करते हैं फ्लेक्स बॉक्स को समझने की जब भी हम सीएसएस को पढ़ते हैं सबसे जो माइंड को चकराने वाला कांसेप्ट होता है जिसमें सारे स्टूडेंट्स गड़बड़ा जाते हैं शुरुआत में पढ़ते-पढ़ते वो एक्चुअली फ्लेक्स बॉक्स ही होता है फ्लेक्स बॉक्स वैसे इतना डिफिकल्ट कांसेप्ट नहीं है बट जब हम इसको एक्चुअली अप्लाई करने जाते हैं या जब हम इसकी बहुत सारी प्रॉपर्टीज को देखते हैं तो हम थोड़ा सा कंफ्यूज हो जाते हैं तो इसीलिए मैं छोटा सा डिस्क्लेमर आपको पहले ही देना चाहूंगी कि शुरुआत में ना जब हम फर्स्ट टाइम फ्लेक्स बॉक्स आज पढ़ रहे हैं तो इसकी प्रॉपर्टीज को रटने में या याद करने में हमें फोकस नहीं करना हमें क्या करना है चीजों को समझने पर फोकस करना है उसके बाद जाकर नोट्स से पढ़ लेना है फिर रिवाइज कर लेना है फिर याद कर लेना उसमें टेंशन की बात नहीं है पर फ्लेक्स बॉक्स को सबसे पहला फोकस जो होना चाहिए वो पढ़ने पर होना चाहिए और घबराना नहीं है मतलब बहुत ही प्यारे तरीके से हम इसको समझने वाले हैं बहुत ही आसान तरीके से समझेंगे एंड इनफैक्ट एक बार आप जब पूरा कर लेंगे ना तो आपको समझ आएगा कि उतनी घबराने वाली बात तो थी नहीं दीदी ऐसे क्यों बोल रही थी बट ध्यान से समझना है क्योंकि ध्यान से नहीं समझेंगे तब कंफ्यूजन ज्यादा आएगा तो फ्लेक्स बॉक्स को अगर प्यारे तरीके से बताया जाए तो फ्लेक्सस बॉक्स होता है फ्लेक्सिबल बॉक्स लेआउट कॉम्प्लेक्टेड होता है कोई कंटेनर यानी हमारे पास कोई बॉक्स हो सकता है ये थोड़ा सा सीधा नहीं बना इसको थोड़ा सीधा कर लेते हैं कोई भी मान लेते हैं मैंने डिव बनाया या नव बार बनाया या कुछ भी बनाया हमने पहले नव बार जो बनाया था उसके अंदर अंदर हमने क्या किया था एक एंकर टैग दिया था यहां पर एक एंकर टैग था यहां पर हमारा मेन वेबसाइट का लोगो था यहां पर हमने कोई बटन दिया था तो इस तरीके से एक आउटसाइड कंटेनर के अंदर कंटेनर क्या हो गया ये जो बाहर वाला नैव बार था जो हमने बनाया था इसको हम कह सकते हैं ये कंटेनर है और इसके अंदर कुछ एलिमेंट्स है ये मेरा एलिमेंट या कुछ आइटम है ये मेरा आइटम वन है ये मेरा आइटम टू है ये मेरा आइटम फोर हो सकता है इस तरीके से मल्टीपल आइटम्स हो सकते हैं तो ऐसे लेआउटस हम सीएसएस के अंदर एचटीएमएल के अंदर बार-बार बनाते रहते हैं जिसमें बाहर की तरफ एक कंटेनर होता है और अंदर बहुत सारे एलिमेंट्स होते हैं जिनको हमें अरेंज करना होता है जैसे यहां पर बाहर की तरफ हमने एक डिव बना दिया और इसके अंदर ये मेरा एक आइटम आ गया ये मेरा दूसरा आइटम आ गया ये मेरा तीसरा आइटम आ गया हो सकता है ये वाला जो आइटम है ये एक्चुअली एक बटन है ये एक एंकर टैग है ये लेट्स सपोज कोई दूसरा डिव है मेरे पास एंड ये बाहर वाला जो कंटेनर है ये खुद में एक डिव है तो इस तरीके से एलिमेंट्स का लेआउट बहुत कॉमन है में हम अच्छे से कैसे एलिमेंट्स को अरेंज कर सकते हैं किसी भी रो में रो यानी जो लेफ्ट से राइट की तरफ डायरेक्शन में जाती है उसको हम रो कहते हैं जो टॉप से बॉटम डायरेक्शन में जाती है टॉप टू बॉटम इसको हम कॉलम कहते हैं तो अगर मुझे एक बॉक्स में या एक कंटेनर में एलिमेंट्स को अरेंज करना है रो या कॉलम की डायरेक्शन में तो उन एलिमेंट्स को अच्छे से कैसे अरेंज किया जा सकता है वो वन डायमेंशन वन डायमेंशन मतलब या तो हॉरिजॉन्टल डायरेक्शन या वर्टिकल डायरेक्शन इन डायरेक्शंस में अच्छे से एलिमेंट्स को अरेंज करना उसके रे आउटस को डिसाइड करना उस चीज में हमें फ्लेक्स बॉक्स बहुत ज्यादा हेल्प करता है तो फ्लेक्स बॉक्स को समझने से पहले हमें फ्लेक्स बॉक्स के फ्लेक्स मॉडल को समझना पड़ेगा जब भी हमें कंटेनर की बात करते हैं फ्लेक्स बॉक्स के अंदर तो हम उस कंटेनर को कहते हैं फ्लेक्स कंटेनर और कोई भी कंटेनर फ्लेक्स कंटेनर कब बनता है जब हम किसी भी कंटेनर यह कंटेनर मेरा डिव हो सकता है यह कंटेनर मेरा पैन हो सकता है ये कंटेनर वव बार टैग से बना हो सकता है ये कंटेनर सेक्शन एलिमेंट हो सकता है कुछ भी हो सकता है बेसिकली जो बाहर की तरफ आ रहा है जो पेरेंट है उस कंटेनर में अगर मैंने डिस्प्ले प्रॉपर्टी को सेट कर दिया टू फ्लेक्स डिस्प्ले प्रॉपर्टी को जिस भी कंटेनर के लिए हम डिस्प्ले फ्लेक्स सेट कर देते हैं वो क्या बन जाता है वो मेरे लिए फ्लेक्स कंटेनर बन जाता है अब इस कंटेनर के अंदर मल्टीपल आइटम्स हो सकते हैं इन इंडिविजुअल आइटम्स को हम फ्लेक्स आइटम्स कहते हैं अब जब भी हम इस तरीके से फ्लेक्स बॉक्स बना देते किसी भी कंटेनर को तो हम सारी की सारी जो चीजें देखेंगे वो दो डायरेक्शंस में देखने वाले हैं एक डायरेक्शन होती है मेरी हॉरिजॉन्टल डायरेक्शन एक डायरेक्शन होती है मेरी वर्टिकल डायरेक्शन अब जो मैक्सिमम केसेस होते हैं बाय डिफॉल्ट केसेस उसमें हॉरिजॉन्टल डायरेक्शन जो होती है उसको हम अपना मेन एक्सेस कहते हैं और वर्टिकल डायरेक्शन को अपना क्रॉस एक्सिस कहते हैं बट ये डायरेक्शन उल्टी भी हो सकती है मतलब अगर हम चाहे तो ये अगर मेरा फ्लेक्स कंटेनर बन जाए जिसके अंदर मेरे फ्लेक्स आइटम्स आ जाते हैं तो हम चाहे तो डायरेक्शन इस तरी तरीके से भी सेट कर सकते हैं कि हॉरिजॉन्टल डायरेक्शन में मेरा क्रॉस एक्सिस आ जाए और वर्टिकल डायरेक्शन में मेरा मेन एक्सिस आ जाए अब यहां पर एक्सेस एक्सेस सुनकर हमें लग सकता है कि इतनी हम कॉम्प्लेक्टेड पढ़ने वाले हैं तो ऐसा हम कोई कॉम्प्लेक्शन कोडिंग करना स्टार्ट करेंगे बट उससे पहले थोड़ा सा थ्योरी का आईडिया होना जरूरी है क्योंकि फ्लेक्स बॉक्स में हम कंफ्यूज ना हो जाए डायरेक्शन कौन सी है तो हर बार जब हम कोड करेंगे फ्लेक्सस बॉक्स के अंदर तो हम हर बार डिस्कस करेंगे कि अभी डायरेक्शन क्या चल रही है ताकि हमें एक पल के बाद थोड़े से टाइम के बाद आदत हो जाए कि फ्लेक्स बॉक्स के अंदर डायरेक्शन को आइडेंटिफिकेशन फ्लेक्स आइटम्स होते हैं ये चीज याद कर लेनी है अभी के अभी और जब भी फ्लेक्स बॉक्स की बात चल रही होती है दो डायरेक्शंस होती हैं एक डायरेक्शन मेरी मेन एक्सिस होती है एक डायरेक्शन मेरी क्रॉस एक्सिस होती है पर हमेशा जरूरी नहीं है कि मेन एक्सिस हॉरिजॉन्टल हो मेन एक्सिस वर्टिकल भी हो सकता है क्रॉस एक्सिस वर्टिकल भी हो सकता है हॉरिजॉन्टल भी हो सकता है पर ये पता है दोनों हमेशा एक दूसरे के 90° एंगल पे रहेंगे मतलब अगर मेन एक्सिस हॉरिजॉन्टल होगा तो क्रॉस एक्सिस वर्टिकल क्रॉस एक्सिस हॉरिजॉन्टल होगा तो मेन एक्सेस वर्टिकल होगा तो इतना हमें शुरुआत कर लेनी है और एक फ्लेक्स बॉक्स की शुरुआत से पहले एक बार हम लेआउट देख लेते हैं कि लेवल फोर के लिए हमने क्या रखा है हमने लेवल फोर में इस तरीके के प्लेग्राउंड के साथ हम शुरुआत करेंगे इसको बनाने के लिए index.htm के अंदर हमने एक हेडिंग टैग बना दिया है जिसके अंदर फ्लेक्स बॉक्स प्लेग्राउंड हमने लिखा हुआ है एक हमने डिव बना लिया जिसको आईडी दी है कंटेनर जो फाइनली हमारा फ्लेक्सस बॉक्स कंटेनर बनने वाला है इसके अंदर हमने पांच बॉक्सेस को क्रिएट किया है यूजिंग फाइव डिब्स इन पांचों को इंडिविजुअल हमने आईडी दे दी है आप चाहे तो यहां पर पॉज करके एक बार अपनी index.htm के अंदर सेम कोड लिख सकते हैं स्टाइल css1 अलाइन सेंटर दे दिया है इसीलिए सारी की सारी जो चीजें हैं फिर चाहे वो हेडिंग हो गया हो डिब्स हो गए हो वो सारे के सारे पेज के सेंटर में आ रहे हैं डिव की बात करें तो उनको हमने हाइट विड्थ डिस्प्ले बॉर्डर इस तरीके की प्रॉपर्टी दे दिए है कंटेनर को हमने थोड़ा सा बड़ा रखा है साइज में यह आउटर जो मेरा बॉक्स है ताकि ये साइज में थोड़ा सा सारे के सारे बॉक्सेस को कंटेन कर पाए सारे के सारे पांचों इंडिविजुअल बॉक्सेस को हमने अलग-अलग कलर्स दे दिए हैं तो ब्यूटीफुल सा लेआउट आप सोच सकते हैं इतना ब्यूटीफुल नहीं है बट बेसिकली पांच डिफरेंट कलर्स हमने दे दिए हैं तो अब हम शुरुआत करने वाले हैं फ्लेक्सस बॉक्स के साथ अब सबसे पहले हमने बात की है कि किसी भी कंटेनर के अंदर फ्लेक्स बॉक्स प्रॉपर्टीज को यूज करने के लिए हमें क्या करना पड़ेगा उस कंटेनर का डिस्प्ले करना पड़ गा फ्लेक्स के इक्वल तो हम कंटेनर के अंदर जाएंगे style.css में इसमें कर देंगे डिस्प्ले फ्लेक्स डिस्प्ले फ्लेक्स जैसे ही किया रिफ्रेश किया तो कुछ-कुछ चेंजेज आ गए यहां पर चेंजेज आ गए मतलब सारे के सारे बॉक्सेस लेफ्ट साइड में चले गए मेरा पूरा जो कंटेनर बॉक्स है वो भी खुद लेफ्ट साइड में चला गया ये चेंजेज क्यों आए वो अभी हम फ्लेक्स बॉक्स के अंदर पढ़ेंगे पर बेसिकली ये सारे के सारे चेंजेज डिस्प्ले फ्लेक्स की वजह से आए हैं डिस्प्ले फ्लेक्स का मतलब होता है अब हमने एक बटन दबा दिया है जिससे अब फ्लेक्स बॉक्स चालू हो गया है और हम फ्लेक्स बॉक्स की प्रॉपर्टीज को यूज़ करना स्टार्ट कर सकते हैं तो सबसे पहली प्रॉपर्टी जिसको हम यूज़ करेंगे फ्लेक्स बॉक्स के अंदर है यह है फ्लेक्स बॉक्स डायरेक्शन डायरेक्शन का मतलब होता है इट सेट्स हाउ फ्लेक्स आइटम्स आर प्लेस्क कंटेनर मतलब जितने भी मेरे फ्लेक्स आइटम्स होते हैं वो किस डायरेक्शन में प्लेस हैं वो हमें फ्लेक्स बॉक्स डायरेक्शन बताती है तो हमारे पास चार पॉसिबल डायरेक्शंस होती हैं एक डायरेक्शन है हमारे पास रो एक है रो रिवर्स एक है कॉलम एक है कॉलम रिवर्स बाय डिफॉल्ट फ्लेक्स डायरेक्शन हमेशा रो रहती है फ्लेक्स बॉक्स डायरेक्शन रो करने से हमारे डॉक्यूमेंट के अंदर कोई चेंज नहीं आएगा तो डायरेक्शन ऐसी प्रॉपर्टी है जो हम कंटेनर के लिए यूज करते हैं इंडिविजुअल आइटम के लिए नहीं तो अगर हम यहां लिखें फ्लेक्स डायरेक्शन एंड इसको अगर हम सेट करें टू रो इसको कर लेते हैं सेव एंड रिफ्रेश तो कोई चेंज नहीं आएगा क्योंकि बाय डिफॉल्ट सारे के सारे आइटम्स जो हैं वो रो डायरेक्शन में ही है फ्लेक्स बॉक्स रो डायरेक्शन सेट करने का मतलब है कि अब सारे के सारे एलिमेंट्स का जो मेन एक्सस होगा वो रो होगा और रो कहने का मतलब है लेफ्ट से राइट तो सारे एलिमेंट्स लेफ्ट से राइट की तरफ जाकर अरेंज हो जाएंगे तो जो सबसे पहला एलिमेंट है वो लेफ्ट की तरफ आ गया दूसरा एलिमेंट उसके बाद आ गया तीसरा उसके बाद आ गया एंड इस तरीके से लेफ्ट से राइट की तरफ अरेंजमेंट आ जाता है एंड रो रिवर्स क्या कहता है रो रिवर्स इसके कंप्लीट अपोजिट कहता है रो रिवर्स कहता है कि मेन एक्सिस जो रहेगा वो रो तो रहेगा बट इस बार डायरेक्शन रिवर्स हो जाएगी यानी राइट से हम लेफ्ट की तरफ एलिमेंट्स को अरेंज कर करेंगे तो जैसे ही हम यहां पर रो रिवर्स कर देंगे इसको करेंगे सेव एंड रिफ्रेश तो क्या हुआ फर्स्ट एलिमेंट अब लेफ्ट की तरफ नहीं आ रहा फर्स्ट एलिमेंट अब राइट की तरफ आ रहा है सेकंड एलिमेंट उसके बाद आ रहा है थर्ड एलिमेंट उसके बाद आ रहा है तो इस तरीके से जो पूरा लेआउट था वो रिवर्स हो गया और डायरेक्शन कौन सी रही इस बार डायरेक्शन क्या है मेरे मेन एक्सिस की डायरेक्शन है राइट से लेकर लेफ्ट और क्रॉस एक्सिस की डायरेक्शन है टॉप से राइट की तरफ अब जैसे ही मैं वापस से इसे रो कर दूंगी तो वापस से एलिमेंट डिफॉल्ट फॉर्मेट में चले जाएंगे इस बार मेन एक्सेस लेफ्ट से लेकर राइट की तरफ है एंड क्रॉस एक्सिस टॉप से लेकर बॉटम की तरफ है तो रो में अगर थोड़ा डायग्राम से दिखाया जाए रो में अगर बॉक्स की बात करें तो मेरा मेन एक्सिस कहां से कहां तक होता है मेन एक्सिस होता है लेफ्ट से राइट रो रिवर्स की बात करें तो मेन एक्सिस कहां से कहां तक होता है यह होता है राइट से लेफ्ट की तरफ मतलब इस डायरेक्शन में और यहां पर इस डायरेक्शन में इसके अलावा हमारे पास फ्लेक्स डायरेक्शन हम कॉलम भी सेट कर सकते हैं यहां पर एक चेंज कर लेना है कि यहां पर फ्लेक्स बॉक्स नहीं है यह फ्लेक्स डायरेक्शन है हर जगह तो प्रॉपर्टी जो होती है वह मेरी फ्लेक्स डायरेक्शन प्रॉपर्टी होती है तो जैसे ही हम कॉलम सेट करेंगे मे एलिमेंट्स हॉरिजॉन्टल अरेंज होने की जगह क्या करेंगे वर्टिकली अरेंज हो जाएंगे तो एलिमेंट्स जब वर्टिकली अरेंज होंगे तो मेरा मेन एक्सिस टॉप से बॉटम वाली डायरेक्शन में आ जाएगा इसको भी एक बार करके देखते हैं जैसे ही फ्लेक्स बॉक्स को हम डायरेक्शन कर देंगे कॉलम इसको करते हैं सेव रिफ्रेश तो मेरे एलिमेंट्स क्या हुए टॉप से लेकर बॉटम की तरफ अरेंज हो गए अब एक और स्पेशल चीज आपने नोटिस की होगी कि ये सारे के सारे जो एलिमेंट्स हैं इवन दो इनकी हाइट को हमने 100 पिक्सल सेट किया था यहां पर और मेरे पूरे कंटेनर की जो हाइट है वो 200 पिक्सल्स है पर इन्होंने क्या किया कंटेनर में फिट करने के लिए अपनी हाइट को कम कर लिया तो फ्लेक्स की एक और स्पेशल प्रॉपर्टी ये भी होती है कि अगर आपने एक फ्लेक्स बॉक्स कंटेनर बना दिया तो सारे के सारे फ्लेक्स आइटम्स उसी के अंदर रहेंगे उससे बाहर नहीं निकल सकते फिर चाहे उन्हें अपने साइज को छोटा करना पड़े या बड़ा करना पड़े पर बाय डिफॉल्ट वो सारे के सारे कंटेनर में ही फिट इन करने की कोशिश करेंगे अगर मैं अपने कंटेनर की हाइट को 100 पिक्सल्स भी कर लूं तब भी ये सारे के सारे एलिमेंट्स मेरे कंटेनर के अंदर रहने की कोशिश करेंगे जब तक इनका कंटेंट अलाउ करता है मतलब जब तक इनका फॉन्ट साइज इतना है कि वो कंटेनर के अंदर रहना इनको अलाव कर रहा है फॉन्ट साइज अगर एक्सीड कर रहा है तो फॉन्ट साइज मतलब अगर उनका कंटेंट बड़ा है तब तो वो एक्सपेंड करें ही बट जब तक फॉन्ट साइज कंटेंट अलाव करता है तब तक वो कंटेनर के अंदर ही रहने की कोशिश करेंगे एक्सटर्नल उन की जो हाइट की या विड्थ की प्रॉपर्टी सेट हुई है उस हिसाब से चेंज नहीं होने वाला अगर मैं यहां पर 300 पिक्सल्स कर दूं इसको रिफ्रेश करें तो भी ये कंटेनर के अंदर ही रहेंगे एंड अभी सीएसएस के अंदर जो मेरा मेन एक्सेस है वो कहां से कहां तक है मेन एक्सेस अब है टॉप से बॉटम की तरफ इसीलिए फर्स्ट एलिमेंट टॉप में है लास्ट एलिमेंट बॉटम में है अगर मुझे इसका रिवर्स चाहिए तो इसके रिवर्स के लिए हम लिख सकते हैं कॉलम रिवर्स सेव एंड रिफ्रेश तो फर्स्ट एलिमेंट बॉटम में आ गया एंड लास्ट एलिमेंट मेरा टॉप पे चला गया तो कॉलम रिवर्स कहने का मतलब हुआ कि अगर ये मेरा फ्लेक्स बॉक्स कंटेनर है तो इसमें मेन एक्सेस अब बॉटम से टॉप की तरफ हो जाएगा तो डायरेक्शन कंप्लीट रिवर्स हो जाएगी तो फ्लेक्स डायरेक्शन मेरे लिए डिसाइड करती है कि मेरे जो एलिमेंट्स का अरेंजमेंट है वो रो के अंदर होगा मतलब हॉरिजॉन्टल होगा या वर्टिकली होगा अगर रो है उस केस में मेन एक्सिस हॉरिजॉन्टल होगा अगर कॉलम है उस केस में मेन एक्सिस वर्टिकल होगा और जहां पर मेरा मेन एक्सिस होगा उसके 90° में मेरा क्रॉस एक्सिस मतलब यहां पर ये मेरे क्रॉस एक्सिस हो जाएंगे और यहां पर हॉरिजॉन्टल क्रॉस एक्सिस बन जाएंगे तो फ्लेक्स बॉक्स डायरेक्शन बहुत ही इंपॉर्टेंट है इसे हम वापस से रिसेट कर लेते हैं टू लेट्स से रो तो रो पे रिसेट किया तो इस तरीके से मेरे एलिमेंट्स अरेंज होकर आ गए अब ये जो फ्लेक्स बॉक्स के अंदर फिट इन होने वाली बात थी यह रो डायरेक्शन में भी अप्लाई करती है कि अगर मैं हर एक डिव को विड्थ दे दूं 500 पिक्सल्स हर एक डिव को विड्थ दे दी 500 पिक्सल्स और कंटेनर की विड्थ है 800 तो ये क्या करेंगे ये कंटेनर के अंदर ही फिट इन करने की कोशिश करेंगे जब तक इनका कंटेंट अलाउ करता है ऐसा नहीं है कि इनको 500 500 दे दिया तो ये पूरे लेआउट से ही बाहर निकल जाएंगे फ्लेक्स आइटम्स हमेशा कंटेनर के अंदर फिट इन करेंगे जब तक मेरे फ्लेक्स प्रॉपर्टीज अप्लाई कर रही हैं नेक्स्ट हम बात करने वाले हैं कुछ ऐसी फ्लेक्स प्रॉपर्टीज की जिनको हम फ्लेक्स कंटेनर के लिए यूज करते हैं और ये काफी ज्यादा यूज होने वाली फ्लेक्स प्रॉपर्टीज हैं जिनमें से सबसे पहली है मेरी जस्टिफाई कंटेंट जस्टिफाई कंटेंट अगर हम फ्लेक्स कंटेनर के ऊपर सेट करते हैं तो ये डिसाइड करता है कि मेन एक्सेस के अलोंग मेरे फ्लेक्स आइटम्स का क्या अलाइन मेंट रहेगा इसको एक बार थोड़ा सा एक्शन में देखते हैं जैसे यहां पर विड्थ को हर एक जो विड्थ है उसको 50 पिक्सेल अगर मैं सेट करूं डिव की विड्थ तो इस तरीके से मेरे डिव आ जाएंगे इनकी हाइट को भी हम छोटा कर सकते हैं लेट्स से वी सेट इट टू 50 पिक्सल्स तो इस तरीके से मेरे बॉक्सेस आ जाएंगे हम चाहे तो कंटेनर को भी थोड़ा सा छोटा कर सकते हैं ू 200 पिक्सल्स सेफ रिफ्रेश तो इस तरीके से मेरा कंटेनर आ गया अब हम क्या करने वाले कंटेनर के लिए कंटेनर के लिए हम जस्टिफाई कंटेंट को सेट करने वाले हैं टू फ्लेक्स स्टार्ट इसको करेंगे रिफ्रेश तो मेरे जो पूरा लेआउट है उसके अंदर कोई चेंज नहीं आएगा फ्लेक्स स्टार्ट कहने का मतलब है कि मेन एक्सिस का स्टार्ट फ्लेक्सस स्टार्ट कहने का मतलब है मेन एक्सिस का स्टार्ट डायरेक्शन क्या है रो तो मेन एक्सिस कहां से कहां तक हुआ लेफ्ट से लेकर राइट की तरफ और लेफ्ट से लेकर राइट में स्टार्ट कहां होता है लेफ्ट की तरफ तो मेरे सारे के सारे एलिमेंट्स लेफ्ट में आ गए पर अगर यहां पर मैंने फ्लेक्स स्टार्ट की जगह फले एंड कर दिया तो उसका मतलब क्या होगा मेन एक्सिस का एंड मेन एक्सिस कहां से कहां तक है लेफ्ट से राइट की तरफ उसका एंड क्या होगा मेरा राइट वाली डायरेक्शन तो इसको करेंगे रिफ्रेश तो अब सारे के सारे एलिमेंट राइट की तरफ आ गए डायरेक्शन रिवर्स नहीं हुई है मतलब बॉक्स वन अभी भी पहले आ रहा है और बॉक्स फाइव अभी भी बाद में आ रहा है बट जो अरेंजमेंट है लेआउट है वो पूरा का पूरा राइट साइड में मेरे मेन एक्सिस के एंड में शिफ्ट हो गया एंड फ्लेक्स स्टार्ट फ्लेक्स एंड के अलावा मेरे पास एक और ऑप्शन होता है सेंटर का इसको करेंगे फ्रेश तो मेन एक्सिस लेफ्ट से राइट के पूरे सेंटर में मेरे सारे के सारे फ्लेक्स आइटम्स आ जाते हैं तो ये तीन मेन वैल्यूज होती हैं जो जस्टिफाई कंटेंट के लिए हम सेट कर सकते हैं इसके अलावा और भी वैल्यूज होती हैं जैसे एक ऑप्शन होता है मेरे पास स्पेस अराउंड का स्पेस अराउंड कब काम करता है जब मेरी विड्थ में मतलब मेरे कंटेनर में एक्स्ट्रा स्पेस बच जाती है तो अभी हॉरिजॉन्टल डायरेक्शन में मेरे कंटेनर में एक्स्ट्रा स्पेस बची हुई है लेफ्ट और राइट में पर ये सारी की सारी स्पेस मेरे एलिमेंट्स के अराउंड आ जाएगी इसको करेंगे रिफ्रेश तो एलिमेंट्स के लेफ्ट में और सेंटर में सारी की सारी स्पेस आ गई एंड एक चीज हम नोटिस कर सकते हैं कि यह जो स्टार्ट में एंड एंड में स्पेस आई है यह मिडल वाली स्पेस के हमेशा हाफ रहेगी बाय डिफॉल्ट तो बॉक्स फोर और बॉक्स फाइव के बीच में जितनी स्पेस है दिस स्पेस इज डबल द अमाउंट ऑफ बॉक्स फाइव और कंटेनर की बाउंड्री के बीच में जो स्पेस है तो एक छोटा सा एक्स्ट्रा इंफॉर्मेशन है जिसको आप याद रख सकते हैं इसके अलावा हमारे पास स्पेस बिटवीन भी होता है जिससे सारी की सारी जो एक्स्ट्रा स्पेस है वह बॉक्सेस के बीच में आ जाती है एंड स्पेस इवनली भी होता है जिससे सारी की सारी स्पेस इवनली स्प्रेड होती है अब शुरुआत वाली और बीच वाली स्पेस कंप्लीट इवन है मतलब सेम अमाउंट ऑफ स्पेस हर जगह दी गई है तो अगर मुझे स्पेस को कंट्रोल करना है मेन एक्सेस के अबाउट तो उसको भी हम कंट्रोल कर सकते हैं और अगर मैंने फ्लेक्स बॉक्स डायरेक्शन को कॉलम कर दिया तो इसके लिए अगर मैं फ्लेक्स स्टार्ट कर दूं तो अब मेरे एलिमेंट्स की डायरेक्शन क्या हो गई कॉलम वाइज हो गई एंड इसकी हाइट को हमें थोड़ा सा बढ़ाना पड़ेगा या हाइट को बढ़ाने की जगह इन सब की हाइट को कर देते हैं 20 पिक्सल्स तो फ्लेक्स स्टार्ट कहने का मतलब है कि अब मेन एक्सेस हो गया टॉप से बॉटम की तरफ कॉलम डायरेक्शन में और फ्लेक्स स्टार्ट मतलब टॉप की तरफ सारे एलिमेंट्स चले गए यहीं पर हम फ्लेक्स एंड कर दें तो ये सारे एलिमेंट्स बॉटम की तरफ चले जाएंगे और यहीं पर जस्टिफाई कंटेंट में हमने सेंटर कर दिया तो ये सारे एलिमेंट्स मेन एक्सिस की डायरेक्शन में सेंटर में जाकर फिट इन हो जाएंगे तो इस तरीके से हमारा जस्टिफाई कंटेंट जो है वो काम करता है एंड यूजुअली जब भी हमारे पास बहुत सारी चीजें होती हैं सीएसएस में करने के लिए और मुझे चाहिए कि इस बॉक्स के अंदर के जो सारे कंटेंट हैं वो सेंटर में आ जाए तो उसके लिए बेस्ट तरीका यह होगा कि कंटेनर को हम फ्लेक्स दें डायरेक्शन को रो रखें और जस्टिफाई कंटेंट में हम सेंटर दे दें तो सारे के सारे एलिमेंट्स बाय डिफॉल्ट सेंटर की तरफ आ जाएंगे अब नेक्स्ट प्रॉपर्टी जिसे हम पढ़ने वाले हैं इसका नाम है अलाइन कंटेंट अलाइन कंटेंट थोड़ा सा हमें सिमिलर लगता है विद अलाइन आइटम्स बट इसका काम होता है स्पेस का अलाइन मेंट करना यानी क्रॉस एक्सेस के अलोंग जितनी भी स्पेस बॉक्सेस के अराउंड रह जाती है उसको ये अलाइन करने के काम आता है अब अलाइन कंटेंट को सब समझने के लिए हम क्या करेंगे थोड़ा सा अपने एलिमेंट्स को हम रैप करवाएंगे क्योंकि जब हमारे एलिमेंट्स मल्टीपल लाइंस में आते हैं तब अलाइन कंटेंट काम करता है अगर सिंगल लाइन में एलिमेंट्स होंगे तब उस केस में इतना ज्यादा काम नहीं कर रहा होगा तो क्या करेंगे फ्लेक्स रैप से अपने एलिमेंट्स को करा देंगे रैप एंड इनके साइज को हम थोड़ा सा बढ़ाने वाले हैं यानी हर जो इंडिविजुअल डिव है इसके लिए हाइट को लेट्स सपोज वी मेक इट 100 पिक्सल्स या 100 की जगह इसको 50 रखते हैं विड्थ को हम कर देते हैं 150 पिक्सल्स जो हमारा कंटेनर है उस उसकी विड्थ को छोटा कर देते हैं एंड उसकी हाइट को हम थोड़ा सा बढ़ा देते हैं ू 600 पिक्सल्स इसको करेंगे सेव रिफ्रेश तो मेरा जो बॉक्स है अब वो कुछ ऐसा मुझे दिखाई देगा अब एक और छोटी सी चीज हम करने वाले हैं कि यहां बॉक्सेस के साइज को हम थोड़ा सा इरेगुलर बनाएंगे यानी बॉक्स टू की हाइट को हम करने वाले हैं इंक्रीज एंड बॉक्स थ्री की हाइट को हम करने वाले हैं डिक्रीज तो मेरा जो बॉक्स टू है इसकी हाइट को लेट्स सपोज अगर हर बॉक्स की हाइट जो है वह 50 पिक्सेल के इक्वल है या इसे हम 100 पिक्सल्स के अगर इक्वल कर दें कुछ इस तरीके से तो बॉक्स टू की हाइट को हम करने वाले हैं 200 पिक्सल्स एंड बॉक्स थ्री की हाइट को हम करने वाले हैं 275 पिक्सेल सेव एंड रिफ्रेश तो जब भी हम अलाइन आइटम सेंटर कर रहे होते हैं तो उस केस में क्या होगा उस केस में हमारा जो क्रॉस एक्सेस है एलिमेंट्स के सेंटर से जा सकता है मतलब सारे के सारे एलिमेंट सेंटर की तरफ है पर जैसे ही यहां पर अलाइन आइटम सेंटर के साथ हमने किया अलाइन कंटेंट सेंटर तो उस केस में क्या होगा हम करेंगे रिफ्रेश तो सारे के सारे जो एलिमेंट्स हैं वो स्पेस इस तरीके से अरेंज हो जाएगी कि सारे के सारे कंटेंट सेंटर में आ जाएंगे और बाकी की जो स्पेस है वो बाकी जगह में आएगी अगर यहीं पर अलाइन कंटेंट हमने कर दिया फ्लेक्स स्टार्ट तो फ्लेक्स स्टार्ट से क्या होगा सारा का सारा कंटेंट मेरे स्टार्ट में चला जाएगा एंड स्पेस जो है एंड की तरफ इकट्ठा हो जाएगी तो अगर क्रॉस एक्सिस है डायरेक्शन क्या है रो तो मेन एक्सिस लेफ्ट से राइट है क्रॉस एक्सिस मेरा टॉप से बॉटम है फ्लेक्स स्टर्ट यानी टॉप तो सारे के सारे आइटम्स टॉप की तरफ चले गए हैं और यहीं पर अगर हम फ्लेक्स एंड कर दें तो क्या होगा सारे के सारे आइटम्स मेरे एंड की तरफ आ जाएंगे यही सेम चेंज अगर हम अलाइन आइटम्स के साथ देखें तो अलाइन आइटम्स के लिए अगर हम फ्लेक्स स्टार्ट करते हैं सेव रिफ्रेश तो क्या हुआ सारे के सारे आइटम्स अलाइन हो गए अब जैसे ही अलाइन आइटम्स हुआ है आइटम्स अलाइन हो गए हैं फ्लेक्स स्टार्ट की तरफ बट एक छोटी सी चीज हम नोटिस करेंगे कि रैपिंग है तो रैपिंग के बीच में स्पेस जनरेट होती है यानी अलाइन आइटम्स तो स्टार्ट में हो गए बट बीच में एक स्पेस जनरेट हो गई क्योंकि आइटम्स रैप कर रहे हैं इसी स्पेस को कंट्रोल करने का काम मेरा अलाइन कंटेंट करता है जब हम अलाइन कंटेंट स्टार्ट कर देंगे तो यह स्पेस जनरेट नहीं होगी सारा कंटेंट स्टार्ट में आ जाएगा और स्पेस मेरी एंड में आ जाएगी तो ये हल्का सा डिफरेंस होता है एंड इस तरीके सेही हम फ्लेक्स कंटेनर के ऊपर मल्टीपल प्रॉपर्टीज को अप्लाई कर सकते हैं नेक्स्ट हम डिस्कस करने वाले हैं कुछ ऐसी फ्लेक्स प्रॉपर्टीज जो हम फ्लेक्स आइटम्स पर अप्लाई करते हैं सबसे पहले बात करते हैं अलाइन सेल्फ की अलाइन सेल्फ अलाइन मेंट ऑफ इंडिविजुअल ऑब्जेक्ट्स देखता है इंडिविजुअल आइटम्स देखता है अलोंग द क्रॉस एक्सिस यानी अगर मेरे पास यह मेरा कंटेनर है और इसके अंदर मल्टीपल आइटम्स हमने डाले हुए हैं तो मान लेते हैं मुझे किसी पर्टिकुलर आइटम के लिए इस आइटम के लिए इसका क्रॉस एक्सेस के अलोंग अलाइन मेंट सेट करना है तो क्या कर सकते हैं उस एक आइटम के लिए हम अलाइन सेल्फ कर सकते हैं जैसे अगर मैं चाहती हूं कि मेरा अलाइन मेंट इस बॉक्स टू के लिए चेंज हो जाए कुछ पर्टिकुलर अलग चीज हो जाए अभी हमने इसे क्रॉस एक्सेस के अलोंग अलाइन किया है टू फ्लेक्स स्टार्ट इसे कर देते हैं कॉमेंट आउट एंड अभी कहां अलाइन किया है इसे फ्लेक्स स्टार्ट पे पर जैसे ही बॉक्स टू के लिए हम कर देंगे अलाइन सेल्फ टू फ्लेक्स एंड तो यहां क्या हुआ बाकी सारे आइटम्स तो ऊपर की तरफ है स्टार्ट की तरफ पर मेरा बॉक्स टू अपनी लाइन के अंदर फ्लेक्स एंड में आ गया है यही सेम चीज चाहे तो हम लेट्स सपोज वी डू इट फॉर बॉक्स फाइव लास्ट जो मेरा बॉक्स है इसके लिए करेंगे रिफ्रेश तो बाकी सारे आइटम्स तो फ्लेक्सस स्टार्ट की तरफ हैं पर मेरा बॉक्स फाइव कहां पे आ गया मेरा बॉक्स फाइव लास्ट में आ गया और अलाइन सेल्फ जो प्रॉपर्टी होती है इसकी हमेशा हाईएस्ट प्रायोरिटी होती है एज कंपेयर टू वो प्रॉपर्टीज जो कंटेनर पर अप्लाई करते तो आप कंटेनर के ऊपर कोई भी प्रॉपर्टी सेट कर सकते हैं पर अगर किसी फ्लेक्स आइटम के लिए हमने अलाइन सेल्फ कर दिया तो उसको ज्यादा प्रायोरिटी दी जाएगी नेक्स्ट हम बात करने वाले हैं फ्लेक्स ग्रो एंड फ्लेक्स श्रिंक प्रॉपर्टीज के बारे में अब एक चीज हमेशा होती है कि जब भी मेरे आइटम साइज में बड़े होते हैं और कंटेनर छोटा होता है तो क्या करते हैं आइटम्स खुद को एडजस्ट कर लेते हैं जैसे अगर हम अपने कंटेनर की हाइट डिक्रीज कर दें लेट्स सपोज वी मेक इट 300 पिक्सल्स रिफ्रेश तो मेरे आइटम्स ने क्या किया खुद को एडजस्ट कर लिया पर यहीं पर अगर हम इसे एक्स्ट्रा स्पेस दे देते हैं तो आइटम्स के पास क्या हो जाती है बहुत सारी एक्स्ट्रा स्पेस आ जाती है पर कभी-कभी हम चाहते हैं कि जब भी मेरे आइटम्स के पास एक्स्ट्रा स्पेस हो ना तो वो बड़े हो जाएं साइज में और जब भी उनके पास कम स्पेस हो तो ऑटोमेटिक साइज में छोटे हो जाएं एंड इसके लिए हम फ्लेक्स ग्रो एंड फ्लेक्स श्रिंक का यूज़ करते हैं अभी क्या होता है ऑटोमेटिक अगर मेरा जो कंटेनर है वो साइज में छोटा है इफ माय कंटेनर इज स्मॉल तो क्या होगा ऑटोमेटिक मेरे सारे के सारे जो आइटम्स हैं वो खुद ही श्रिंक हो जाएंगे श्रिंक होने का मतलब है छोटा हो जाना और वो सारे श्रिंक होंगे विद अ फैक्टर ऑफ वन मतलब सारे के सारे इक्वली श्रिंक होने वाले हैं और किसी भी केस में अगर मेरा कंटेनर थोड़ा सा बड़ा होता है तो मेरे आइटम्स क्या करेंगे साइज में खुद ही ग्रो कर जाएंगे ग्रो करने का मतलब है यहां पे साइज में बड़ा हो जाना एंड वो सारे बड़े होंगे विद अ फैक्टर ऑफ वन फैक्टर ऑफ वन यानी सारे के सारे इक्वली बड़े हो जाएंगे बट अगर हम चाहते हैं कि कोई एक पर्टिकुलर एलिमेंट ऐसा हो जो अगर छोटे होने की बात आए तो वो डबल छोटा हो जाए डबल छोटा इन द कि बाकी सारे अगर थोड़े से श्रिंक कर रहे हैं तो वो उनसे डबल अमाउंट में या डबल स्पीड पर श्रिंक करें और बाकी सारे अगर ग्रो कर रहे हैं तो वो उनसे डबल अमाउंट में ग्रो करें या ट्रिपल अमाउंट में ग्रो करे या फाइव टाइम्स या हाफ टाइम्स तो इस तरीके की प्रॉपर्टी को यूज कर सकते हैं हम अपने किसी पर्टिकुलर आइटम्स को अलग से ग्रो या श्रिंक करवाने के लिए इसको भी एक बार प्रैक्टिकली हम करके देखते हैं तो फ्लेक्स श्रिंक को समझने के लिए हम क्या करने वाले हैं सबसे पहले तो अपने बॉक्स फाइव को वापस से अलाइन कर देते हैं सारे के सारे एलिमेंट्स के साथ एंड एक बार हम अपनी रैपिंग को करने वाले हैं क्लोज इसको कर लेते हैं रिफ्रेश तो इस तरीके से हमारे एलिमेंट्स यहां पर आ गए अपने कंटेनर को थोड़ा सा रिसाइट करेंगे इसकी हाइट को कर देते हैं लेट्स से टू 300 पिक्सल्स तो इस तरीके से कंटेनर दिखेगा एंड इंडिविजुअल हर बॉक्स के लिए हम हर किसी की विड्थ को करने वाले हैं 200 पिक्सल्स इसको कर देंगे रिफ्रेश अब क्या हो रहा है हर इंडिविजुअल बॉक्स 200 पिक्सल्स का होना चाहिए बट क्योंकि मेरे मेन कंटेनर की विड 600 पिक्सल्स है तो 600 डिवाइडेड बा 5 यानी 120 पिक्सल्स के अराउंड हर एक कंटेनर मुझे मिल रहा होगा इसे अगर मैं इंस्पेक्ट करूं तो हर एक इंडिविजुअल जो कंटेनर है हर किसी की विड्थ 120 पिक्सल्स के अराउंड है व्हिच इज 600 पिक्सल्स डिवाइडेड बा 5 क्योंकि पूरे कंटेनर की विड्थ 600 पिक्सल्स है बट यहां पर हर एक जो इंडिविजुअल बॉक्स है अभी इक्वली श्रिंक कर रहा है इक्वली श्रिंक कर रहे हैं तो सबकी विड्थ भी इक्वल होगी बट अगर हम चाहे कि बॉक्स टू डबल टाइम श्रिंक करें बाकी सारे बॉक्सेस के कंपैरिजन में तो इसके लिए हम फ्लेक्स श्रिंक को सेट कर सकते हैं टू अ फैक्टर ऑफ़ टू इसे कर लेंगे सेव एंड रिफ्रेश अब क्या हो रहा है बाकी सारे बॉक्सेस तो मुझे विड्थ में थोड़े से बड़े दिखाई दे रहे हैं यानी 134 पिक्सल्स आ रही है बाकी सबकी विड्थ बट मेरे बॉक्स टू की जो विड्थ है वो 64 पिक्सल्स है क्यों क्योंकि मेरा बॉक्स टू डबल अमाउंट से श्रिंक किया है एज कंपेयर्ड टू अदर बॉक्सेस दूसरे जो बॉक्स हैं वो 200 - 134 कुछ एक फैक्टर के साथ श्रिंक किए और बॉक्स टू उससे डबल अमाउंट से श्रिंक करके आए है एंड यहीं पर इसके श्रिंक फैक्टर को डिक्रीज करके हम कर दें रो 2.5 तो बॉक्स टू क्या करेगा बॉक्स टू हाफ अमाउंट से श्रिंक करेगा यानी बाकी सारे जैसे-जैसे श्रिंक कर रहे हैं बॉक्स टू उनसे आधी स्पीड से श्रिंक करेगा छोटा होगा इसे करेंगे रिफ्रेश तो बॉक्स टू एज कंपेयर्ड टू दूसरे एलिमेंट्स अभी साइज में बड़ा है जबकि बाकी सारे जो बॉक्सेस हैं वो इक्वल ही हैं तो अगर किसी एलिमेंट को जल्दी श्रिंक करवाना है तो उसके फैक्टर को वन से बड़ा कर सकते हैं अगर थोड़ा सा धीरे श्रिंक करवाना है एज कंपेरर टू अदर बॉक्सेस तो उसके फैक्टर को वन से डिक्रीज कर सकते हैं अगर हम चाहते हैं बिल्कुल भी श्रिंक ना करें मतलब कुछ भी हो जाए कंटेनर का का साइज कितना भी हो मेरे बॉक्स टू की विड्थ उतनी ही रहनी चाहिए व्हिच इज इक्वल टू 200 पिक्सल्स तो इसके फ्लेक्स श्रिंक को हम कर सकते हैं ज़ीरो के इक्वल इसे करेंगे रिफ्रेश तो अब मेरा जो बॉक्स टू है इसकी विड्थ हो गई है 204 पिक्सल्स अब हम सोच रहे होंगे कि विड्थ तो बॉक्स की 200 पिक्सल्स होनी चाहिए तो बाकी के चार पिक्सल्स कहां से आ रहे हैं बेसिकली बाकी के चार पिक्सल्स इसके बॉर्डर से आ रहे हैं क्योंकि हर किसी बॉक्स के लिए हमने उनको बॉर्डर दिया है टू पिक्सल्स का तो जो एक्स्ट्रा टू पिक्सल्स हैं वो लेफ्ट साइड से लेफ्ट वाला बॉर्डर ऐड कर रहा है और राइट साइड से मेरा राइट वाला बॉर्डर ऐड कर रहा है तो जब भी हम किसी एलिमेंट को इंस्पेक्ट करते हैं तो ध्यान से समझना पड़ता है कि बॉर्डर का भी जो एरिया है वो काउंट होता है कि टोटल विड्थ एरिया वो कितना ऑक्यूपाइड है स्क्रीन के ऊपर तो इस तरीके से हम अपने बॉक्स टू को कंट्रोल कर सकते हैं पर हम चाहते हैं वो नॉर्मली श्रिंक करे तो बाय डिफॉल्ट उसका फैक्टर हम वन पर सेट कर सकते हैं तो अब सारे के सारे जो बॉक्सेस हैं इनका विड्थ सेम रहेगा एंड इसी तरीके से हम फ्लेक्स ग्रो प्रॉपर्टी को भी यूज कर सकते हैं फ्लेक्स ग्रो कहता है कि अगर मेरा जो कंटेनर है वो विड्थ में काफी बड़ा है जैसे अपने कंटेनर की टो टोटल विड्थ है उसको 800 सेट कर लेते हैं और बॉक्सेस की को जितनी विड्थ चाहिए उसको लेट्स सपोज हमने सेट कर दिया 50 इसे करें अगर रिफ्रेश तो अब क्या कर रहे हैं सारे कंटेनर कोशिश कर रहे हैं कि इसे थोड़ा सा और छोटा कर लेते हैं विड्थ को 700 सारे बॉक्सेस कोशिश कर रहे हैं कि कंटेनर के अंदर फैल करर जो है बॉक्स के अंदर आ जाए अभी के लिए एक बार ये फ्लेक्सस ग्रो को हम हटा देते हैं सेव रिफ्रेश तो अभी क्या है सारे के सारे बॉक्सेस में से कोई भी अभी एज सच ग्रो नहीं कर रहा क्योंकि बाय डिफॉल्ट ये ऑलरेडी जितना इनका साइज है यानी 50 पिक्सल्स उस चीज को ले चुके हैं बट हम चाहते हैं कि मेरा जो बॉक्स टू है जो बची हुई एमटी स्पेस है वो सारा का सारा उसे ऑक्यूपाइड तो बॉक्स टू के लिए हम सिंपली फ्लेक्स ग्रो को रख सकते हैं वन एंड इसे करेंगे रिफ्रेश तो बॉक्स टू ने क्या किया बची हुई सारी स्पेस को ऑक्यूपाइड और बॉक्स वन दोनों मिलकर ऑक्यूपाइड तो क्या हुआ बॉक्स वन की भी उतनी विड्थ आ गई बॉक्स टू की भी उतनी विड्थ आ गई क्योंकि दोनों इक्वली अब बची हुई स्पेस को ऑक्यूपाइड हैं पर हम चाहते हैं बॉक्स वन जितना ग्रो करें ना बॉक्स टू उससे टू टाइम्स ग्रो करें यानी बॉक्स टू की विड्थ ज्यादा बड़ी हो तो इसे करेंगे रिफ्रेश तो बॉक्स वन की विड्थ 197 है बॉक्स टू की विड्थ 340 है व्हिच इज ऑलमोस्ट ट्वाइंटों एंड फ्लेक्सस ग्रो को यूज़ करते हैं जब भी हमारे कंटेनर के अंदर एक्स्ट्रा या जरूरत से कम स्पेस हमारे पास अवेलेबल होती है तोब हम आ गए हैं अपने प्रैक्टिस सेट नंबर सिक्स पर सिक्स के अंदर सबसे पहला सवाल हमें कह रहा है कि क्रिएट अ नाव बार विद फोर ऑप्शंस इन द फॉर्म ऑफ एंकर टैग्स इनसाइड लिस्ट आइटम्स तो ऑलरेडी हमने पता है कि वव बार कैसा दिखता है हमने ऑलरेडी उसे क्रिएट करके देख रखा है अब हमें बोला हुआ है कि हमें एक वव बार बनाना है जिसमें चार ऑप्शंस हो तो वव बार बनाने के लिए हम एक डिव बना सकते हैं जिसको हम नाम दे सकते हैं नाव बार एंड इसके अंदर हम चार ऑप्शंस रखने वाले हैं अब हमें ऑलरेडी बताया हुआ है कि हमारे जो ऑप्शंस है वो इन द फॉर्म ऑफ़ एंकर टैग्स इनसाइड लिस्ट आइटम्स होने चाहिए अंदर लिस्ट क्रिएट करने के लिए हम अनऑफिशड के जो आइटम्स हैं उनको हम एआई से लिखते हैं तो इतना बेसिक एचटीएमएल हमें आता है कि कोई भी लिस्ट बनाने के लिए हम इस तरीके से अपने आइटम्स को अरेंज कर सकते हैं अब हमें बोला गया है कि अपने जो एंकर टैग्स हैं वो हमें यहां पर रखने हैं लिस्ट आइटम्स के अंदर जिसके अंदर हम अपने वव बार के मेन्यू के चार-चार ऑप्शंस रखने वाले हैं तो इतना पार्ट एक बार हम कंप्लीट करने वाले हैं तो हमारी index.htm है टाइ हमने प्रैक्टिस सेट रखा है अभी ये खाली है style.css भी खाली है हमारा पेज भी कंप्लीट एमटी है तो शुरुआत करते हैं इनफैक्ट डिव की जगह हम सीधा एक अन ऑर्डर लिस्ट बना सकते हैं अन ऑर्डर्स के अंदर सबसे पहले एक लिस्ट आइटम बनाएंगे तो लिस्ट आइटम में हम लिख सकते हैं होम का एक ऑप्शन हम दे सकते हैं इसके अलावा हम एक और ऑप्शन दे सकते हैं लेट्स सपोज अबाउट अस एक और लिस्ट के अंदर ऑप्शन दे सकते हैं लेट्स से कांटेक्ट अस एंड एक और लिस्ट के अंदर ऑप्शन दे सकते हैं लेट्स लेट्स टेक इट हेल्प तो इस तरीके से एक चार लिस्ट के आइटम्स हमने क्रिएट कर लिए हैं एंड इन लिस्ट आइटम्स को हम इस तरीके से हमने अरेंज किया है अब ये जो मेरी अनऑफिशड टैग की फॉर्म में कन्वर्ट करना है तो व्ट वी कैन डू इ हम एंकर टैग बना सकते हैं जिसमें हर किसी के अंदर एक ऑप्शन आ सकता है यह मेरे एंकर टैग बन गए जिसमें हर किसी के अंदर हम अपने ऑप्शंस को ऐड कर सकते हैं इसे भी कर लिया कंट्रोल एक्स ए कंट्रोल व सेव रिफ्रेश एंकर टैग्स है तो कायदे से यह क्लिके बल होने चाहिए क्लिके बल अभी हमने इनको बनाया नहीं है तो हर किसी के अंदर एक थोड़ा सा सूडो लिंक ऐड कर देते हैं अब यह मेरे प्रॉपर एंकर टैग्स बन गए जिनके ऊपर क्लिक किया जा सकता है क्लिक करके हम सेम पेज के ऊपर आ जाएंगे बट बेसिकली ये क्लिकब्रिक्स को एक सिंगल लाइन के अंदर प्लेस करवाना है जैसे मेरा होम यहां पर आ जाए मैंने जो सेकंड ऑप्शन दिया है व्हिच इज अबाउट अस वो यहां पर आ जाए कांटेक्ट अस यहां पर आ जाए हेल्प यहां पर आ जाए और चारों सेम लाइन के अंदर प्लेस हो चारों के बीच में जो स्पेस है वो इक्वल हो एंड इसके साथ-साथ इसको इंप्लीमेंट करने के लिए मुझे फ्लेक्स बॉक्स को यूज करना है तो फ्लेक्स बॉक्स को यूज करने के लिए हमने ऑलरेडी सीखा था कि हमें क्या करना पड़ता है पहले तो ये डिसाइड कर लो कि हमारा कंटेनर कौन बनेगा हमारे आइटम्स कौन बनेंगे अब हमें पता है कि हमारा कंटेनर कौन होने वाला है हमारा कंटेनर होने वाली है ये अन ऑर्डर्स या इनफैक्ट अन ऑर्डर्स को भी हटाकर मैं बाहर अगर एक डिव क्रिएट कर दूं जिसको हम अपनी क्लास दे दे नाव बार तो यह जो डिव है यह मेरा कंटेनर बन सकता है सेव रिफ्रेश यहां पर कोई चेंज नहीं आया अभी बट बेसिकली जो मेरा डिव है यह मेरा कंटेनर बन सकता है तो इस डिव के लिए कुछ कुछ स्टाइलिंग ऐड कर लेते हैं एक तो इसको बैकग्राउंड कलर में दे देती हूं थोड़ा सा सटल बैकग्राउंड कलर ताकि हमें पता चले डिव का एरिया कितना है उसके साथ-साथ मैं क्या करने वाली हूं अपने एंकर टैग्स के लिए उनका अंडरलाइन हम हटाने वाले तो टेक्स्ट ट्रांसफॉर्म को कर देंगे सेव रिफ्रेश तो टेक्स्ट डेकोरेशन को हम सेट कर देंगे टू नन सेव रिफ्रेश इस तरीके से आ गया एंड हम चाहे तो इनके कलर को भी रख सकते हैं टू ब्लैक सेव रिफ्रेश इस तरीके से कलर ब्लैक आ गया मेरे टेक्स्ट का हम चाहे तो लिस्ट आइटम के सामने से यह डॉट को भी हम रिमूव कर सकते हैं तो लिस्ट आइटम से एक प्रॉपर्टी होती है हमारे पास लिस्ट स्टाइल टाइप तो जैसे ही हम लिस्ट स्टाइल टाइप को सेट कर देते हैं टू नन तो वैसे ही क्या होता है तो हमारे जो लिस्ट आइटम्स है उनके सामने से जो डॉट है ज जो भी स्टाइल लिखा हुआ है 1 2 3 4 लिखा हुआ है ऑर्ड लिस्ट के केस में या कुछ और ए बी सीडी लिखा हुआ है वो गायब हो जाता है तो इस चीज को हम इंप्लीमेंट कर सकते हैं तो बेसिकली ये मेरे चार ऑप्शंस आ गए एंड इन चारों ऑप्शंस को और थोड़ा सा हम क्या कर सकते हैं बैकग्राउंड कलर दे देती हूं लेट्स से आई गिव इट एक्वा कलर सेव रिफ्रेश तो इससे हमें क्लियर पता चलेगा कि हमारे फ्लेक्स आइटम्स कौन-कौन से हैं ये हमारे फ्लेक्स आइटम्स हैं हमारा फ्लेक्स कंटेनर कौन सा है ये बाहर वाला कंटेनर है तो इसको प्रॉपर्टीज भी दे देते हैं हम अपने कंटेनर को देने वाले हैं सबसे पहले डिस्प्ले फ्लेक्स डिस्प्ले फ्लेक्स से क्या होगा ये सारे के सारे आइटम्स अब मेरे कंटेनर के अंदर आ जाएंगे एंड इसके साथ-साथ हम लिस्ट को बनाने वाले हैं डिस्प्ले इनलाइन सेव रिफ्रेश तो क्या हुआ सारे के सारे एलिमेंट्स अब इनलाइन हो गए क्योंकि बाय डिफॉल्ट लिस्ट के जितने भी आइटम्स होते हैं वो नेक्स्ट लाइन में जाते हैं तो हमने क्या किया उसे डिस्प्ले इनलाइन देकर सारे के सारे एलिमेंट्स को सेम लाइन के अंदर रख लिया अब इशू यह है कि इनको हम इक्वली स्पेसड कैसे करें हमारे लिए बाय डिफॉल्ट डायरेक्शन क्या है फ्लेक्स की फ्लेक्स की डायरेक्शन है रो अब बाय डिफॉल्ट अगर डायरेक्शन रो है तो उसमें मेन एक्सिस कहां से कहां तक हुआ लेफ्ट से लेके राइट की तरफ क्रॉस एक्सिस कहां से कहां हुआ टॉप से लेके बॉटम की तरफ मुझे चाहिए मेन एक्सिस में मेरे एलिमेंट्स इक्वली स्पेसड हो तो उसके लिए हम क्या कर सकते हैं उसके लिए हम यूज कर सकते हैं जस्टिफाई कंटेंट क्योंकि जस्टिफाई कंटेंट मेन एक्सेस के अलोंग एलिमेंट्स को प्लेस करने के लिए यूज़ होता है तो अगर मैं जस्टिफाई कंटेंट सेंटर कर दूं और इसे रिफ्रेश करूं तो क्या होगा मेरा सारा का सारा कंटेंट सेंटर में आ जाएगा बट मुझे जो स्पेस है वो इवनली स्प्रेड चाहिए सबके बीच में तो उसके लिए मैं यूज़ कर सकती हूं स्पेस इवनली सेफ रिफ्रेश अब हम क्या करने वाले हैं हमने क्या किया हमारा जो अन ऑर्डर्स है उसे हमने नाव बार बनाया और उसके अंदर सारे के सारे आइटम्स को प्लेस किया है अब थोड़े-थोड़े हम चेंजेज लाने वाले हैं सबसे पहले जो मेरी अन ऑर्डर्स है उसको एक बैकग्राउंड कलर दे देते हैं लेट्स सी वी गिव इट अ कलर पिंक थोड़ा सा सटल कलर दे देते हैं तो ये मेरी अन ऑर्डर्स है जो बैकग्राउंड में हाईलाइट हो रही है अब मुझे डिसाइड करना है कि मेरी फ्लेक्स बॉक्स प्रॉपर्टीज कैसे अप्लाई करें अब फ्लेक्स बॉक्स के अप्लाई करने के लिए दो चीजें हमें डिसाइड करनी होती है कि मेरा फ्लेक्स बॉक्स कंटेनर कौन बनेगा और आइटम्स कौन बनेंगे अब ऑब् वियस है कि कंटेनर कौन है जिसके अंदर सारी चीजें आ रही है मतलब मेरी अन ऑर्डर लिस्ट और आइटम्स कौन है ये जो इंडिविजुअल ऑप्शन मेरे पास है एंकर टैग की फॉर्म में ये मेरे फ्लेक्स आइटम्स बनने वाले तो पहले पहले कुछ-कुछ नॉर्मल स्टाइलिंग ऐड कर लेते हैं सबसे पहले तो एंकर टैग का अगर मुझे अंडरलाइन हटाना है तो टेक्स्ट डेकोरेशन नन करते हैं सेव रिफ्रेश अंडरलाइन हट गया हम चाहे तो सारे के सारे लिंक्स का जो कलर है वो सेट कर सकते हैं टू नॉर्मल कलर ब्लैक सेव रिफ्रेश यह भी हट गया अब ये जो डॉट्स है इन्हें मुझे हटाना है अपनी लिस्ट से तो डॉट्स को हटाने के लिए जब भी हम लिस्ट से ऐसी चीजें करना चाहते हैं तो एक स्पेशल प्रॉपर्टी होती है हमारी लिस्ट स्टाइल टाइप लिस्ट स्टाइल टाइप क्या करता है अगर आपकी अन ऑर्ड लिस्ट के अंदर डॉट्स हैं या ए बी सी डीई एफ जी एच इस तरीके से आ रहा है या 1 2 3 4 5 6 आ रहा है तो उस चीज को कंप्लीट रिमूव करने के लिए हम अपने लिस्ट स्टाइल टाइप को सेट कर सकते हैं टू नन फॉर माय लिस्ट एलिमेंट इसे करेंगे रिफ्रेश तो अब मेरे चारों जो एलिमेंट्स हैं वो इस तरीके से आ गए एंड हम चाहें तो इन चारों को एक बैकग्राउंड कलर दे सकते हैं जो यहां पर थोड़ा सा दिखाई दे लेट्स गिव इट एक्वा कलर रिफ्रेश एक्वा कलर की जगह लिस्ट अभी क्या है एक्वा कलर हमने बैकग्राउंड कलर दिया तो ये मेरा आइटम वन है ये मेरा आइटम टू है थ्री है फोर है और लिस्ट आइटम क्या कर रहा है लिस्ट आइटम को देख के मुझे पता चल रहा है कि एक ब्लॉक आइटम है जो पूरी की पूरी विड्थ को ऑक्यूपाइड है तो हम क्या करेंगे सबसे पहले तो फ्लेक्स कंटेनर को हम डिस्प्ले देने वाले हैं फ्लेक्स तो फ्लेक्स कंटेनर को डिस्प्ले फ्लेक्स दे दिया रिफ्रेश किया तो क्या हुआ इसके जितने भी सारे के सारे एलिमेंट्स हैं वो क्या कर गए इसके अंदर आ गए मतलब पहले चाहे ही वो ब्लॉक एलिमेंट्स थे पर अब वो इस पूरे के पूरे जो मेरा सिंगल नव बार होने वाला है उसके अंदर आकर समा गए हैं सेम लाइन के अंदर आ गए हैं क्योंकि जैसे ही डिस्प्ले फ्लेक्स करते हैं एलिमेंट्स क्या करते हैं बाय डिफॉल्ट सिंगल लाइन के अंदर आने की कोशिश करते हैं अब जैसे ही मेरे एलिमेंट्स आ गए अब मुझे इनके बीच में थोड़ी सी स्पेस चाहिए अब जैसे ही बाय डिफॉल्ट मैंने अपने फ्लेक्स कंटेनर को क्रिएट कर लिया है इनफैक्ट यहां पर मैं सिंपली अपना वव बार भी लिख सकती हूं वव बार क्या है डॉट n बार मेरा यल ही है रिफ्रेश करेंगे कोई चेंज नहीं आएगा बट बेसिकली मैं अपनी यल की ही बात कर रही हूं तो जैसे ही वव बार को हमने फ्लेक्स कंटेनर बना दिया और उसके अंदर ए हमारे पास आ गए तो डायरेक्शन क्या होती है फ्लेक्स की बाय डिफॉल्ट रो डायरेक्शन होती है रो अगर है तो मेन एक्सेस कहां से कहां तक होगा लेफ्ट से राइट की तरफ क्रॉस एक्सिस कहां से कहां तक होगा टॉप से बॉटम की तरफ मुझे क्या करना है मेन एक्सिस के अलोंग इन एलिमेंट्स के बीच में स्पेस ऐड करनी है तो उसके लिए सबसे पहले ट्राई करते हैं जस्टिफाई कंटेंट क्योंकि जब भी मेन एक्सेस के अलोंग कंटेंट मुझे एडजस्ट करना होता है तो उसके लिए हमने सीखी थी अपनी पहली प्रॉपर्टी व्हिच वाज जस्टिफाई कंटेंट जस्टिफाई कंटेंट को सेंटर करके देखें रिफ्रेश करें तो तो सारा का सारा कंटेंट मेरा सेंटर में आ गया पर मुझे स्पेस चाहिए तो उसके लिए हमने एक प्रॉपर्टी सीखी थी स्पेस इवनली इसको करेंगे सेव रिफ्रेश तो क्या हुई सारी की सारी स्पेस अब इवनली स्प्रेड होकर आ गई अब हम चाहे तो इस बैकग्राउंड कलर को जो इतना अच्छा नहीं लग रहा इसको थोड़ा सा चेंज करके हम रेड कर सकते हैं एंड अपने कलर को यहां से चेंज करके वी कैन मेक इट वाइट इस तरीके की कुछ चीज हम ला सकते हैं कि बैकग्राउंड पिंक के साथ मुझे लगा रेड थोड़ा सा अच्छा लगेगा बट इट लुक्स वेरी बैड तो व्हाट वी कैन डू इज वी कैन मेक द बैकग्राउंड कलर वाइट एंड वी कैन मेक द टेक्स्ट रेड सेव रिफ्रेश तो इस तरीके से मेरे जो एलिमेंट्स हैं वो यहां पर प्लेस होकर आ जाएंगे यह भी उतना खैर अच्छा नहीं लग रहा बैकग्राउंड कलर को यहां से हटा ही देते हैं तो यह मेरे एलिमेंट्स हैं जो चारों के चारों मेरे नाव बार पर इक्वली स्पेसड होकर आ गए हैं तो इस तरीके से हम अपने नाव बार को क्रिएट कर सकते हैं और एलिमेंट्स के बीच में स्पेस क्रिएट कर सकते हैं आपको याद हो कि जब तक हम ने फ्लेक्स बॉक्स को नहीं पढ़ा था तब हमने नेव बार को क्रिएट करने के लिए स्पेस कैसे ऐड की थी तब हमने जाकर एक्स्ट्रा मार्जिन दी थी एलिमेंट्स को पर इस बार एलिमेंट्स को हमने एक्स्ट्रा मार्जिन नहीं दी हमने इंडिविजुअल एलिमेंट्स के ले जाकर कुछ नहीं किया हमने सिंपली जस्टिफाई कंटेंट कर दिया स्पेस इवनली और एक ही सिंगल लाइन को लिखकर मैजिकली हमारे एलिमेंट सही जगह पर जाकर प्लेस हो गए तो यह मैजिक हमारी सीएसएस की कोडिंग के अंदर लेकर आता है हमारा फ्लेक्स बॉक्स अब आ जाते हैं सेकंड सवाल की तरफ यह काफी पॉपुलर सवाल है जो सीएसएस में पूछा जाता है य यूज फ्लेक्स बॉक्स टू सेंटर वन डिव इनसाइड अनदर डिव यानी मुझे एक डिव बनाना है यह मेरा आउटर डिव हो गया इसको आउटर कह देते हैं तो मुझे क्या करना है इसके अंदर एक और डिव क्रिएट करना है जो बिल्कुल इसके सेंटर में आकर प्लेस हो जाए जिसको हम इनर डिव कह सकते हैं तो ये लेआउट मुझे अचीव करना है यूजिंग माय फ्लेक्स बॉक्स तो इसको अचीव करने के लिए हम क्या कर सकते हैं सबसे पहले तो यहां पर एक डिव बना लेते हैं तो ये मेरा आउटर डिव हो गया ए इसके अंदर मैंने अपना एक इनर डिव बना लिया इसको कर लेते हैं सेव एंड अब आउटर डिव जो है क्योंकि हमें फ्लेक्स बॉक्स यूज करना है तो इसको सबसे पहले तो हम क्लास दे देते हैं लेट्स गिव इट अ क्लास आउटर एंड लेट्स गिव दिस डिव अ क्लास ऑफ इनर आउटर इनर के लिए हम कुछ कुछ प्रॉपर्टीज को सेट कर सकते हैं आउटर जो मेरा डिव है डॉट आउटर इसे हम एक हाइट दे सकते हैं ऑफ़ 400 पिक्सल्स एंड विड्थ दे सकते हैं ऑफ़ 400 पिक्सल्स और साथ के साथ इसे एक बैकग्राउंड कलर भी दिया जा सकता है लेट्स सपोज वी गिव इट दिस कॉर्न फ्लावर ब्लू बैकग्राउंड कलर रिफ्रेश करेंगे तो यह मेरा आउटर डिव बन गया अब मुझे अपने इनर डिव के लिए प्रॉपर्टी सेट करनी है तो सिमिलर सी हम प्रॉपर्टी सेट करेंगे कर लेते हैं कॉपी पेस्ट आउटर की जगह अब यहां पर लिख देंगे हम इनर हाइट के लिए हम लिखने वाले हैं 100 पिक्सल्स 100 पिक्सल्स एंड इसका बैकग्राउंड कलर चेंज कर देते हैं लेट्स मेक द बैकग्राउंड कलर टू लेट्स से दिस डार्क ऑर्किड कलर हमने इसको दे दिया सेव रिफ्रेश तो अब मेरा जो इनर डिव है वो कुछ यहां पर है पर मुझे उसको यहां पर लेकर आना है बेसिकली अपने आउटर डिव के सेंटर में तो सेंटर में लेकर आने के लिए सबसे पहले फ्लेक्स बॉक्स यूज करना है तो ओबवियसली हमें कंटेनर और फ्लेक्स आइटम बनाना पड़ेगा कंटेनर मेरा बाहर वाला आइटम होता है तो हम क्या करेंगे इस ब्लू वाले बॉक्स को आउटर बॉक्स को बना देंगे कंटेनर एंड इवेंचर डिव इसके अंदर आता है तो यह फ्लेक्स आइटम बन जाएगा तो आउटर को हम डिस्प्ले दे देंगे इक्वल टू फ्लेक्स जैसे ही आउटर को डिस्प्ले फ्लेक्स दिया रिफ्रेश किया कोई चेंज नहीं आया क्योंकि इनर वाला कंटेनर अभी भी उसी के अंदर है अब क्या करेंगे अगर मुझे एलिमेंट्स को सेंटर करना है जैसे ही मैंने डिस्प्ले फ्लेक्स दिया डायरेक्शन क्या है बाय डिफॉल्ट डायरेक्शन मेरी रो है तो मेन एक्सिस क्या होगा मेन एक्सिस लेफ्ट से राइट की तरफ होगा क्रॉस एक्सिस कहां से कहां तक है टॉप से बॉटम की तरफ अगर मुझे इसे सेंटर करना है मेन एक्सेस के अलोंग तो हम क्या करेंगे हम जस्टिफाई कंटेंट यूज कर सकते हैं तो मैं लिखूंगी जस्टिफाई कंटेंट एंड यहां पर हम लिख सकते हैं सेंटर इसे करेंगे रिफ्रेश तो मेन एक्सिस जो लेफ्ट से लेकर राइट की तरफ था उसमें ये क्या हुआ सेंटर पे आकर बैठ गया पर हमें इसे वर्टिकली भी सेंटर करना है यानी क्रॉस एक्सेस के अलोंग तो टॉप से लेकर बॉटम तक मेरा क्रॉस एक्सेस है क्रॉस एक्सेस के अलोंग आइटम्स को सेंटर करने के लिए हम यूज करते हैं अलाइन आइटम्स को सेकंड प्रॉप प्रॉपर्टी को यूज करेंगे अलाइन आइटम्स जिसमें हम इसे करने वाले हैं दोबारा सेंटर करेंगे रिफ्रेश तो ये क्या हुआ बिल्कुल सेंटर में आकर प्लेस हो गया तो ये बेस्ट तरीका होता है एक डिव को दूसरे डिव के अंदर लाकर प्लेस करने का इनफैक्ट इजस्ट तरीका है तो कभी भी अगर किसी इंटरव्यू में या कहीं भी कोई कोई आपका दोस्त या आपके पास रैंडम कोई अगर ऐसी क्वेरी आए कि आपको एक डिव के अंदर दूसरे डिव को सेंटर पे जाके प्लेस करना है वी कैन सिंपली यूज फ्लेक्सस बॉक्स फ्लेक्स बॉक्स में कुछ नहीं करना है ये तीन लाइनें लिखनी है सबसे पहले डिस्प्ले फ्लेक्स कर लो फ्लेक्स बॉक्स यूज़ करने के लिए हॉरिजॉन्टल अलाइन करने के लिए जस्टिफाई कंटेंट वर्टिकली अलाइन करने के लिए अलाइन आइटम्स और यहीं पर अगर मेरी डायरेक्शन रिवर्स हो जाती तो भी यही दोनों सेम लाइनें मुझे लिखनी होती तो इस तरीके से सेकंड सवाल को हमने कंप्लीट कर लिया है अब बढ़ जाते हैं अपने थर्ड सवाल की तरफ थर्ड क्वेश्चन मुझे कह रहा है कि व्हिच हैज हायर प्रायोरिटी क्या अलाइन आइटम्स की हायर प्रायोरिटी होती है या अलाइन सेल्फ की अलाइन आइटम्स को अगर याद करें तो यह मेरा कंटेनर पे अप्लाई होता है यानी मैं कंटेनर को बोलती हूं कि अगर क्रॉस एक्सेस के अलोंग आइटम्स को अलाइन करना है तो अलाइन आइटम्स यूज करेंगे और अलाइन सेल्फ मेरा इंडिविजुअल फ्लेक्स आइटम पर अप्लाई होता है और पढ़ते टाइम हमने ऑलरेडी डिस्कस किया था कि मेरा जो अलाइन सेल्फ है इसकी प्रायोरिटी हायर होती है एज कंपेरर टू अलाइन आइटम्स मतलब अलाइन आइटम्स में मैंने कोई प्रॉपर्टी सेट कर दी और फिर मैंने अलाइन सेल्फ में कुछ और सेट कर दिया तो हमेशा अलाइन सेल्फ वाला अप्लाई होगा जैसे यहां पर जाकर अगर मैं इनर के लिए अलाइन से सेल्फ को सेट कर दूं टू फ्लेक्स स्टार्ट उस केस में क्या होगा रिफ्रेश करेंगे ये स्टार्ट पर ही जाएगा यहां पर सेंटर मैंने लिखा है उससे कोई फर्क नहीं पड़ेगा अगर इस इनर को हम ऊपर लिख दें सेफ रिफ्रेश तो भी कोई फर्क नहीं पड़ेगा इवन दो सीएसएस में अलाइन आइटम्स सेंटर बाद में लिखा हुआ है अलाइन सेल्फ पहले लिखा हुआ है और सीएसएस क्या कहता है सीएसएस कैस्केडिंग करता है कैस्केडिंग मतलब हमने जो बाद में लिखा है वो बाद में अप्लाई होगा उसकी हायर प्रायोरिटी होगी बट क्योंकि अलाइन सेल्फ की इंडिविजुअली हायर प्रायोरिटी है इसीलिए अलाइन सेल्फ काम करेगा जिसकी वजह से मेरा जो यह इनर डिव है यह फ्लेक्स स्टार्ट मतलब क्रॉस एक्सेस के स्टार्ट में टॉप पे जाकर चिपक जाएगा तो इस तरीके से प्रैक्टिस सेट सिक्स को हमने कंप्लीट कर लिया है अब बढ़ते हैं हम आगे अब नेक्स्ट टॉपिक जिसके बारे में हम पढ़ने वाले हैं इसका नाम है मीडिया क्वेरीज अब मीडिया क्वेरीज काफी इंपॉर्टेंट चीज है जब भी हम सीएसएस की बात करते हैं मीडिया क्वेरीज हमें हेल्प करती है वेबसाइट्स को और ज्यादा रिस्पांसिस बनाने के लिए रिस्पांसिस होने का क्या मतलब है आज की डेट में जो हमारा टेक्नोलॉजी वर्ल्ड है उसमें हम वेबसाइट्स को सिर्फ अपने कंप्यूटर्स के ऊपर या लैपटॉप्स के ऊपर नहीं खोलते आजकल बहुत सारे लोग अलग-अलग अलाइन मेंट में ओरिएंटेशन में स्क्रीन्स को यूज़ करते हैं कई सारे लोगों के पास बहुत बड़ी-बड़ी स्क्रीन होती हैं जबकि कई सारे लोग जो वेबसाइट्स हैं उनको फोन पर खोल रहे होते हैं तो इसीलिए इंपॉर्टेंट है कि जो भी वेबसाइट वेब पेज हम बना रहे हैं वो हमारे लैपटॉप कंप्यूटर पे तो अच्छा दिखे ही साथ के साथ अगर उसको किसी ने फोन पर खोला है तो वो वहां पर भी अच्छा दिखे तो उसके लिए हमारी जो वेबसाइट है वो रिस्पांसिस होनी चाहिए रिस्पांसिस वेबसाइट का कैसे एग्जांपल ले सकते हैं जैसे अगर हम एग्जांपल ले amazononline.in कुछ ऐसी दिखाई देगी और अगर मैंने इसे गैलेक्सी फोल्ड पर खोल लिया तो मेरी वेबसाइट कुछ ऐसी दिखाई देने वाली है यहीं पर अगर हमने इसे i एयर पर खोल लिया तो i के ऊपर मेरी वेबसाइट कुछ ऐसी दिखाई देगी तो बेसिकली मोटिव ये रहता है कि डिफरेंट डिफरेंट डिवाइसेज के हिसाब से मेरी वेबसाइट अलग-अलग तरीके से एडाप्प्ट कर जाए रिस्पॉन्ड कर जाए तो वो वेबसाइट कहलाए गी एक रिस्पांसिस वेबसाइट और आज की डेट में यूजुअली जितने भी वेब पेजेस वेबसाइट बनाने बनाए जाते हैं वो रिस्पांसिस ही होते हैं मैक्सिमम केसेस के अंदर जो कि एक अच्छी प्रैक्टिस है हम चाहे तो जिस भी डिवाइस पर हम देख रहे हैं ऊपर उसके पिक्सेल मुझे दिख जाएंगे जैसे ip8 के लिए 820 पिक्सल्स इसकी विड्थ है एंड 1180 इसकी हाइट है वहीं अगर मैं देखना चाहूं iphone11 की विड्थ है 844 इसके लिए इसकी हाइट है ये दोनों जो पैरामीटर्स हैं ये पिक्सल्स में मुझे दिए हुए हैं तो मेरी amazon2 पे खोला जाए तो उसमें कुछ-कुछ चेंजेज आ जाए जब फोन के ऊपर खोला जाए तब उसमें कुछ चेंजेज आ जाएं तो ऐसे चेंजेज करने के लिए हम मीडिया क्वेरीज को यूज़ करते हैं मीडिया क्वेरीज को कैसे यूज़ किया जाता है हम क्या करते हैं सबसे पहले तो बाहर लिखते हैं @ मीडिया एंड उसके बाद अंदर की तरफ वो पैरामीटर डिसाइड करते हैं जिसके बेसिस पर हमारे वेबसाइट के अंदर कुछ चेंज आना चाहिए अ जैसे अगर मुझे कोई ऐसा चेंज चाहिए कि जब मेरे डिवाइस की विड्थ 600 पिक्सल्स के इक्वल हो जाए तो तब सारे के सारे जो डिव हैं उनका बैकग्राउंड कलर रेड हो जाए तो उसके लिए हम इस मीडिया क्वेरी को लिखेंगे इसको एक बार टेस्ट आउट करते हैं हम क्या करने वाले हैं style.css से सारा का सारा जो सीएसएस है उसको अभी के लिए रिमूव कर देते हैं एंड हमने इसे पिंक कलर दिया है इसे कर लेते हैं सेव एंड रिफ्रेश तो मेरा बॉक्स मुझे कुछ ऐसा दिखाई देगा अब हम चाहते हैं कि एगजैक्टली जब मेरा स्क्रीन साइज 600 पिक्सल्स का हो कैसे हो सकता है स्क्रीन साइज 600 पिक्सल्स इंस्पेक्ट पे क्लिक करेंगे टॉगल कर लेते हैं नॉर्मल स्क्रीन पे आते हैं जैसे ही हम इसे यहां पर ऐसे सिलेक्ट करके ड्रैग करके छोटा करेंगे स्क्रीन को तो ऊपर मुझे स्क्रीन के डायमेंशन दिख रहे हैं अभी स्क्रीन कितनी है करीबन 620 पिक्सल्स इसकी विड्थ है एंड 547 मेरी जो स्क्रीन है उसकी हाइट दिख रही है इसे छोटा करके मैं चाहती हूं जैसे ही 600 पिक्सल्स की हो ना मेरी स्क्रीन करीबन इतनी उस केस में मेरा यह जो बॉक्स है इसका कलर रेड हो जाए उसके लिए अगर मुझे मीडिया क्वेरी लिखनी है तो मैं लिखूंगी style.css के अंदर @ मया मैं चाहती हूं कि मेरा जो चेंज आए वो विड्थ एट 600 पिक्सल्स पर आए तो उस केस में हम क्या कर सकते हैं मैं लिख सकती हूं जितने भी डिव हैं उनका बैकग्राउंड कलर चेंज हो जाए टू रेड इसे कर लेंगे सेफ एंड रिफ्रेश अब अगर अपनी स्क्रीन को छोटा बड़ा करते टाइम हमारी स्क्रीन जैसे ही 600 एगजैक्टली 600 पिक्सल्स को हिट करेगी तो एक चेंज मुझे देखने को मिलेगा यह छोटा सा चेंज क्या हुआ एगजैक्टली 600 पिक्सल्स पे मेरा जो बॉक्स है वो रेड कलर का हो जाएगा 600 से ना छोटे पर रेड होगा ना बड़े पर रेड होगा बट एगजैक्टली जैसे ही हम इसे 600 पिक्सल्स लेकर आएंगे ये रेड कलर का हो जाएगा कुछ इस तरीके से यही सेम चीज हम चाहे तो हाइट के साथ कर सकते हैं बट हाइट इतना ज्यादा चेंजेज हम हाइट से रिलेटेड नहीं करते जो मैक्सिमम मीडिया क्वेरीज लिखी जाती हैं वो हमारी विड्थ को यूज करके हम लिख रहे होते हैं इसके अलावा मीडिया क्वेरीज में हम मिनिमम विड्थ मैक्सिमम विड्थ इस तरीके से भी यूज कर सकते हैं कि जैसे अगर हम चाहते हैं कि मेरी विड्थ जैसे ही 600 पिक्सल्स हो जाए या उससे बड़ी हो जाए तो एक चेंज आना चाहिए तो उसके लिए हम मिनिमम विड्थ यूज कर सकते हैं या हम चाहते हैं कि जैसे ही मेरी विड्थ किसी एक वैल्यू से लेकर मैक्सिमम किसी एक वैल्यू तक जाए तो जीरो से लेकर उस मैक्सिमम विड्थ तक अगर मैं चाहती हूं कोई चेंज आए तो उसके लिए हम मैक्स विड्थ यूज कर सकते हैं जैसे अगर हम चाहते हैं कि 600 पिक्सेल से ऊपर ऊपर मेरे जो बॉक्स का कलर है वह ग्रीन हो जाए तो उसके लिए क्या मीडिया क्वेरी लिखेंगे हम लिखेंगे रेट मीडिया इसके साथ विड्थ या हम इसे लिखने वाले हैं मिनिमम विड्थ ऑफ 600 पिक्सल्स उसके लिए हम लिखेंगे डिव सारे डिफ्स के लिए बैकग्राउंड कलर हो जाए ग्रीन के इक्वल सेव एंड रिफ्रेश अभी बाय डिफॉल्ट बैकग्राउंड कलर मेरा ग्रीन हो जाएगा क्यों क्योंकि मेरा जो स्क्रीन साइज है वो 600 से ऊपर है बट जैसे ही 600 से नीचे आएगा स्क्रीन साइज ये अपने डिफॉल्ट कलर में आ जाएगा तो जब भी हम चाहते हैं कि मिनिमम विड्थ 600 पिक्सल्स या उससे ऊपर ऊपर मेरी विड्थ हो तो कलर ये हो जाए एंड उसी तरीके से अगर हम चाहते हैं 600 पिक्सेल से छोटी-छोटी अगर विड्थ हो या उसके इक्वल तो कलर ग्रीन हो जाए उसके लिए करेंगे रिफ्रेश तो 600 से कमकम के लिए मेरा कलर ग्रीन रहेगा डिव के लिए और जैसे ही 600 क्रॉस कर देंगे वापस से अपना डिफॉल्ट कलर ले लेगा व्हिच वाज पिंक कलर तो इस तरीके से हमारी मीडिया क्वेरीज काम करती है टू चेंज डिफरेंट पैरामीटर्स तो एक चीज आपने नोटिस की होगी कि लैपटॉप्स या कंप्यूटर्स पे जब हम वेबसाइट खोलते हैं तो फंट साइज बड़ा होता है जबकि फोन पे खोलते हैं तो फॉन्ट साइज छोटा हो जाता है तो बेसिकली हम मीडिया क्वेरी में लिख सकते हैं कि छोटी विड्थ का अगर हमने डिवाइस में अपनी वेबसाइट को खोला है तो मेरा फॉन्ट साइज छोटा हो जाए और बड़ी में खोला है तो मेरा फॉन्ट साइज बड़ा हो जाए तो इस तरीके के चेंजेज हम कर सकते हैं इसके अलावा मीडिया क्वेरीज को हम कंबाइन भी कर सकते हैं यानी रेंज के लिए अगर मुझे सेट करना है कि अगर मेरी जो विड्थ है वो 200 पिक्स से लेकर 300 पिक्सल्स यहां पर हमारे पास मैक्स विड्थ होना चाहिए था तो अगर हम कहना चाहते हैं मेरा जो डिव है वो 200 पिक्सेल से लेकर अगर 300 पिक्सल्स की स्क्रीन पर है तो उस केस में उसका कलर रेड हो जाए या ग्रीन हो जाए या ब्लू हो जाए तो उसके लिए हम बीच में एंड इस कीवर्ड को यूज कर सकते हैं इसको भी एक बार टेस्ट आउट करते हैं रेट मीडिया हम चाहते हैं कि जैसे ही मेरी जो स्क्रीन विड्थ हो इसे लिख देते हैं जब मेरी मिनिमम विड्थ 200 पिक्सल है एंड जब मेरी मैक्सिमम विड्थ 300 पिक्सेल है तो उस केस में मेरा जो डिव है इसका बैकग्राउंड कलर ब्लू होना चाहिए यहां लिख देते हैं ब्लू इसे अब करते हैं सेव रिफ्रेश अभी स्क्रीन क्या है 600 पिक्सल से बड़ी है 600 पिक्सेल से छोटे हुए क्या हो जाएगा ग्रीन हो जाएगा बट जैसे ही 200 से 300 की रेंज में जाएंगे मतलब मेरी स्क्रीन जब कुछ इस तरीके से छोटी हो जाएगी यानी 200 से छोटे जाएंगे तब तो वापस ग्रीन हो जाएगा ब जैसे ही 200 से बड़े और 300 से छोटी रेंज में रहेगा वैसे ही मेरे डिव का बैकग्राउंड कलर हो जाएगा ब्लू के इक्वल तो इस तरीके से मेरी मीडिया क्वेरीज को क्लब भी किया जा सकता है तो इस लेवल के अंदर हमने काफी सारी इंटरेस्टिंग चीजें सीखी है हमने अपनी मीडिया क्वेरीज को सीखा है हमने सीखा है रिस्पांसिस वेबसाइट्स किस तरीके से बनाते हैं कैसे आज की डेट में रिस्पांसिस वेबसाइट बहुत जरूरी हैं क्योंकि आज की डेट में मैक्सिमम लोग जो वेबसाइट्स को यूज करते हैं वो फस पर यूज करते हैं तो इसीलिए अडॉप्ट करना स्क्रीन साइज के हिसाब से काफी ज्यादा इंपॉर्टेंट हो जाता है एज अ फ्रंट एंड डेवलपर इसके सा साथ-साथ सीएसएस की वन ऑफ द मोस्ट कन्फ्यूजिंग प्रॉपर्टी एंड इंटरेस्टिंग प्रॉपर्टी को हमने पढ़ा था व्हिच वाज फ्लेक्स बॉक्स तो बढ़ जाते हैं अपने प्रैक्टिस सेट नंबर सेवन की तरफ प्रैक्टिस सेट सेवन मुझे इंप्लीमेंट करने के लिए दे रहा है काफी सारी मीडिया क्वेरीज तो इनको मुझे एक-एक करके इंप्लीमेंट करना है ऐड अ मीडिया क्वेरी टू इंप्लीमेंट द फॉलोइंग द कलर ऑफ अ डिव चेंजेज टू ग्रीन फॉर व्यू पोर्ट विड्थ लेस दन 300 पिक्सल्स तो यहां पर काफी सारी कंडीशंस मुझे दी गई हैं बेसिकली हमें क्या बनाना है हमें एक डिव को क्रिएट करना है जिसके बैकग्राउंड कलर के साथ हम खेल रहे होंगे फर्स्ट जो प्रॉपर्टी है यह मुझे कहती है कि अगर मेरी जो व्यू पोर्ट की विड्थ है वोह लेस दन 300 पिक्सेल हो तो मेरा कलर ग्रीन हो जाना चाहिए इसको अच्छे से लिख लेते हैं सेकंड प्रॉपर्टी मुझे कह रही है कि अगर 300 से हम 400 की रेंज में है तो कलर मेरे पास पिंक हो जाना चाहिए थर्ड प्रॉपर्टी कह रही है कि अगर 400 से 600 की रेंज में है तो कलर मेरे पास रेड हो जाना चाहिए एंड फोर्थ कह रही है कि अगर 600 से प्लस की रेंज में है तो हम हमारे पास बैकग्राउंड कलर हो जाना चाहिए ब्लू के इक्वल तो इन चारों को हम इंप्लीमेंट करने वाले हैं यूजिंग आवर मीडिया तो एक-एक करके मीडिया क्वेरीज लिखना शुरू करते हैं हमने अपनी इक्सड html5 बनाई है इसके अंदर एक डिव को क्रिएट कर लेते हैं एंड अपने स्टाइल ड सीएसएस के अंदर इस डिव को एक हाइट दे देते हैं ऑफ 200 पिक्सल्स विड्थ दे देते हैं 200 पिक्सल्स के इक्वल एंड इसे एक बैकग्राउंड कलर दे देते हैं लेट्स गिव इट दिस चॉकलेट कलर सेव रिफ्रेश तो ये मेरा पूरा का पूरा डिव क्रिएट हो गया गया अब इसे मीडिया क्वेरीज देना स्टार्ट करते हैं मीडिया क्वेरी के अंदर हम लिख सकते हैं कि जैसे ही मेरी जो मैक्सिमम विड्थ हो मतलब रो से लेकर मैक्सिमम विड्थ जब तक 300 पिक्सल्स के इक्वल हो तब तक क्या हो मेरे डिव का जो बैकग्राउंड कलर है दैट शुड बी इक्वल टू ग्रीन कलर यानी जब तक रो से लेकर 300 पिक्सल्स तक विड्थ है तब तक कलर मेरा ग्रीन होना चाहिए कर देंगे रिफ्रेश अब इसे जाकर इंस्पेक्ट कर सकते हैं जैसे ही स्क्रीन साइज को हटाकर हम 300 पिक्सल्स तक लेके जाएंगे वैसे क्या हो गया कलर मेरा रो से 300 पिक्सल्स तक क्या रहेगा ग्रीन कलर रहेगा अब सेकंड मीडिया क्वेरी को इंप्लीमेंट करते हैं इसी को कर लेते हैं कॉपी एंड पेस्ट यहां पर हमें दो प्रॉपर्टीज को यूज करना है मिनिमम एंड मैक्सिमम तो यहां पर मेरी मिनिमम विड्थ 300 होना चाहिए मैक्सिमम विड्थ 400 इसे कर लेते हैं कॉपी एंड मिनिमम विड्थ 300 तो इसे मिनिमम विड्थ रख लेते हैं एंड मैक्सिमम विड्थ हमारी होने वाली है 400 और कलर इस बार हम सेट करने वाले हैं पिंक कलर सेफ रिफ्रेश तो जब 300 से छोटा है तब तक ग्रीन है एंड 300 से 400 के बीच में यह मेरा जो डिव है वो पिंक कलर का सेट हो जाएगा नेक्स्ट प्रॉपर्टी को सेट करते हैं नी नेक्स्ट ट्रांजिशन 400 से 600 में कलर रेड चेंज होना चाहिए तो मिनिमम विड्थ हो जाएगी 400 मैक्सिमम विड्थ हो जाएगी मेरे पास 600 कलर चेंज हो जाएगा टू रेड सेव एंड रिफ्रेश अब जैसे ही हम साइज को इंक्रीज करेंगे 400 पिक्सेल से बड़ा करेंगे और 600 तक लेकर जाएंगे तो कलर मेरा रेड रहेगा एंड 600 प्लस में मुझे कलर चाहिए ब्लू तो उसके लिए क्या कर सकते हैं इसे कर लेते हैं कॉपी एंड यहां पर कर लेते हैं पेस्ट मुझे चाहिए कि जब तक मेरा 600 पिक्सेल से प्लस है उस केस में डिव का बैकग्राउंड कलर होना चाहिए ब्लू के इक्वल सेफ रिफ्रेश तो अभी रेड है जैसे 600 प्लस करेंगे मेरे डिव का कलर ब्लू हो जाएगा तो इस तरीके से अलग-अलग डायमेंशन के हिसाब से मेरा जो बैकग्राउंड का डिव है उसका कलर चेंज हो सकता है एक तरीके से इस डिव के अंदर रिस्पांसिस आ गई रिस्पांसिस कैसे आ गई कि जैसे ही इस एलिमेंट को इंस्पेक्ट किया जाएगा मैं अलग-अलग डिवाइसेसपोर्ट है तो 390 यानी इस वाली रेंज में लाय करता है तो इसका बैकग्राउंड कलर पिंक हो जाएगा पर इसको अगर हम i एयर पर खोले तो i a की विड्थ 820 है तो आईपैड के ऊपर अगर इसे खोला जाएगा तो इसका कलर ब्लू दिखाई देगा अगर हम इसे लेट्स सपोज samsungfunclubs.com इस चैप्टर के अंदर हम पढ़ने वाले हैं कि जितने भी एलिमेंट्स हमें स्क्रीन पर दिखाई देते हैं उनको हम मूव कैसे कर सकते हैं अगर मुझे किसी एलिमेंट को रोटेट करवाना है 3d स्पेस में 2d स्पेस में या फिर किसी का मुझे साइज चेंज करना है या कुछ-कुछ इफेक्ट्स लेकर आने हैं तो उनको हम कैसे लेकर आ सकते हैं यूजिंग सीएसएस तो ये जो हमारा चैप्टर है ये एक तरीके से इसमें हम थोड़ा सा एडवांस सीएसएस पढ़ रहे होंगे एंड इसमें हम ऐसे कांसेप्ट पढ़ेंगे जो जनरली मैक्सिमम वेबसाइट्स पर यूज नहीं होते लेकिन एज अ एडवांस सीएसएस डेवलपर आपको इन कांसेप्ट के बारे में पता होना चाहिए ताकि आपको हेल्प करें क्राउड से थोड़ा सा एक्स्ट्रा स्टैंड आउट करने में इसीलिए इन कांसेप्ट को हमें पढ़ना जरूर है एंड याद करने से पहले ज्यादा जरूरी है कि हम चीजों को समझने पर फोकस करें कि चीजें एक्चुअली काम कैसे कर रही हैं तो सबसे पहली प्रॉपर्टी जिस पर हम काम करने वाले हैं ये है मेरी ट्रांजिशंस प्रॉपर्टी ट्रांजिशंस प्रॉपर्टी का काम होता है कि इनेबल करती है हमें डिफाइन करने के लिए कि एक एलिमेंट एक स्टेट से दूसरी स्टेट में कैसे ट्रांजीशन कर रहा है ट्रांजिशन करने का मतलब है उस स्टेट में इफेक्ट लाना स्टेट कहने का क्या मतलब है यहां पर अब यूजुअली जो भी हमारे एलिमेंट्स होते हैं वो नॉर्मली हमें दिखाई देते हैं बट हर एलिमेंट के लिए कुछ ना कुछ स्टेट्स हमारे पास होती हैं जैसे एक बटन है एक बटन वैसे तो नॉर्मली हमें बटन की तरह दिखाई देगा पर जैसे ही हम उस बटन को क्लिक करेंगे तो वो क्या होगा वो एक अलग स्टेट में चला जाएगा जिसको हम एक्टिव स्टेट कह सकते हैं यानी अगर किसी बटन को क्लिक किया जाए तो वो एक अलग स्टेट में होगा तो कई बार आपने वेबसाइट्स पर देखा होगा कि जैसे हम बटन को क्लिक करते हैं उसके बैकग्राउंड कलर चेंज हो जाता है या उस पर कोई इफेक्ट आ जाता है शैडो बढ़ जाती है इस तरीके की चीजें होती हैं या फिर अगर मेरे पास नॉर्मल स्क्रीन पर कोई एलिमेंट है जैसे हमने ऑलरेडी ये बॉक्स बनाया हुआ है इस पर जब हम हर करते हैं हर करने का मतलब जब हम अपने कर्सर को इसके ऊपर जाकर स्क्रोल करते हैं मूव करते हैं तो उस स्टेट में हो सकता है कुछ एलिमेंट्स के ऊपर उस स्टेट में कुछ चेंजेज आए तो ये बेसिकली हम एक स्टेट से दूसरी स्टेट की तरफ जा रहे होते हैं एक स्टेट है नॉर्मल स्टेट एंड दूसरी स्टेट यानी जब हमने उसके ऊपर हर कर दिया या जब बटन जैसी चीज को हमने एक्टिव कर दिया एक्टिव करना यानी किसी चीज के ऊपर क्लिक करना तो ऐसे हम मल्टीपल स्टेट्स को चेंज कर सकते हैं एलिमेंट्स के लिए और जब एक स्टेट से एलिमेंट दूसरी स्टेट पर जाता है तो उसके अंदर कुछ चेंजेज आ सकते हैं जिन चेंजेज को हम ट्रांजिशंस की फॉर्म में अप्लाई करते हैं तो सबसे पहले किसी एलिमेंट को एक स्टेट से दूसरी स्टेट में चेंज करना हम थोड़ा सा सीखने वाले हैं तो ऑलरेडी हमने क्या किया है index.htm के अंदर हमने एक डिव बनाया हुआ है जिसके अंदर कुछ टेक्स्ट हमने लिखा हुआ है दिस इज़ अ बॉक्स एंड यहां पर वो डिव हमें डिस्प्ले होकर दिखाई दे रहा है इसके लिए ऑलरेडी हमने एक style.css फाइल लिंक कर रखी है style.css के अंदर लिखा है उसका हाइट उसकी विड्थ एंड एक बैकग्राउंड कलर एंड बॉर्डर जो यहां पे आके सुंदरता के साथ उसमें अप्लाई कर रहा है अब हम क्या करने वाले हैं इस एलिमेंट की स्टेट कैसे चेंज होती है उसको हम थोड़ा सा समझने वाले हैं हम क्या करेंगे इस डिव के लिए हम यूज़ करने वाले हैं समथिंग कॉल्ड ए सूडो क्लास अब ये सूडो क्लास क्या होती है सूडो क्लास बेसिकली डिफाइन करना होता है अलग स्टेट्स को जैसे अगर मैं चाहती हूं कि इस डिव पर हर करने पर डिव पर जितने भी मेरे डिब्स हैं एचटीएमएल के अंदर उन पर हर करने पर मतलब उनको उन पर कर्सर मूव करने पर कोई चेंज आए तो मैं उस चेंज को डिफाइन कर सकती हूं कि मैं चाहती हूं कि मेरे डिव पर जैसे ही हर किया जाए उसका बैकग्राउंड कलर चेंज हो जाए लेट्स सपोज मैं चाहती हूं बैकग्राउंड कलर रेड हो जाए तो जैसे ही हम इसको रिफ्रेश करेंगे वैसे ही कोई चेंज नहीं आएगा पर जैसे ही हम अपने कर्सर को इस बॉक्स के ऊपर जाकर मूव करेंगे वैसे ही क्या होगा इसका कलर चेंज हो जाएगा एंड इसका कलर अब चेंज होकर हो रहा है रेड के इक्वल हम चाहें तो इसका फॉन्ट कलर भी यहां पर चेंज कर सकते हैं कि फॉन्ट कलर जैसे ही बैकग्राउंड कलर रेड हो फॉन्ट कलर वाइट हो जाए इसे करेंगे रिफ्रेश अब जैसे ही जाकर इस पर हर करेंगे मतलब कर्सर को लेकर जाएंगे वैसे ही दोनों प्रॉपर्टीज इसके पास चेंज होकर आ रही है इस चीज को हम इंस्पेक्ट भी कर सकते हैं इंस्पेक्ट में जाकर यहां पर एक स्पेशल ऑप्शन होता है हमारे पास कि जैसे ही हम अपने एलिमेंट को क्लिक करेंगे वैसे ही हमारी ये जो स्टाइल वाली विंडो है इसके अंदर कई सारे हमारे पास फिल्टर्स आते हैं फिल्टर्स में यहां पर मैं काफी सारी स्टेट सिलेक्ट कर सकती हूं जैसे हम फोर्स कर सकते हैं अपने एलिमेंट की स्टेट को एलिमेंट्स के पास अलग-अलग स्टेट होती है हो सकता है एलिमेंट फोकस स्टेट में हो है सकता है एलिमेंट टारगेट स्टेट में हो एक्टिव स्टेट में हो एक्टिव स्टेट मैंने आपको ऑलरेडी बताया जब हम एलिमेंट पर क्लिक करते हैं या वो हर स्टेट में हो तो जैसे ही हर को मैंने क्लिक किया इसके ऊपर वो सीएसएस अप्लाई हो जाएगी जो सीएसएस हमने यहां पर सीएसएस में सीएसएस फाइल के अंदर इसकी हर स्टेट के लिए लिखी हुई है अब जैसे ही इस पर हर किया वैसे ही हम चेंज कर सकते हैं कि मैं चाहती हूं हर करने पर ये ब्लू कलर का हो जाए तो क्या हुआ ब्लू कलर का हो गया हर स्टेट को हटा भी दें यहां से तब भी जाकर अब अगर मैं यहां पर स्क्रोल करूं इसके ऊपर कर्सर लेकर जाऊं तो ये क्या हो रहा है इसका बैक ब्राउंड कलर चेंज हो रहा है टू ब्लू इसी तरीके से हम एक्टिव सूडो क्लास भी यूज कर सकते हैं यानी डिव के ऊपर एक्टिव एंड जब भी एक्टिव हो मैं चाहती हूं बैकग्राउंड कलर मेरा पिंक में कन्वर्ट हो जाए तो इसको कर सकते हैं रिफ्रेश अब जैसे ही इसके ऊपर हर करेंगे पर क्लिक करने पर क्या हुआ क्लिक करके होल्ड करना है यानी अपने माउस को प्रेस करना है और उसको होल्ड करके रखना है तो इस बॉक्स का बैकग्राउंड कलर चेंज हो गया है टू पिंक इसको जैसे ही छोड़ेंगे रेड हो गया क्लिक करेंगे तो पिंक हो गया क्लिक करने का मतलब है इसे एक्टिव स्टेट में लेकर आना व्हिच इज़ द स्टेट जब किसी भी एलिमेंट को क्लिक किया जाता है तो इस तरीके से किसी भी एलिमेंट के लिए मल्टीपल स्टेट्स एजिस्ट कर सकती हैं उस पर हर करना उस पर क्लिक करना यह दोनों सबसे ज्यादा यूज़ होने वाली स्टेट्स हैं आप चाहें तो दूसरी स्टेट्स को एमडीएन पर जाकर और ज्यादा एक्सप्लोर कर सकते हैं ऑल दो वो अभी इतना ज्यादा हमारे जो सीएसएस चल रहा है उसके अंदर इतना ज्यादा फ्रीक्वेंसी स्टेट चेंज करता है तो अब हम ट्रांजिशन को समझते हैं ट्रांजिशन बेसिकली हमें हेल्प करता है यह डिफाइन करने में कि एक एलिमेंट जब एक स्टेट से किसी दूसरी स्टेट में जा रहा है तो वो जितनी भी प्रॉपर्टी के अंदर चेंजेज हैं वो किस तरीके से अप्लाई होंगे तो ट्रांजिशन के लिए हम चार बेसिक प्रॉपर्टीज को पढ़ते हैं व्हिच इज माय ट्रांजिशन प्रॉपर्टी कि जो भी मेरे ट्रांजिशन के फीचर्स हैं फीचर्स इन द सेंस कि वो ट्रांजिशन कितना स्लो कितना फास्ट होना चाहिए क्या ट्रांजिशन हो होने से पहले कोई डिले होना चाहिए इस तरीके की जो चीजें हैं वो कौन सी प्रॉपर्टी के ऊपर अप्लाई होंगी किस ड्यूरेशन में मेरा ट्रांजिशन हो रहा होगा मतलब अगर मेरा कलर चेंज होना है तो वह क्या इंटेंटली हो जाएगा जैसे अगर हम अपने बॉक्स पर जाकर अभी हर करें तो कलर कैसे चेंज हो रहा है इंस्टेंट कलर चेंज हो रहा है कोई टाइम नहीं लग रहा बट हम चाहते हैं हमारा कलर 2 सेकंड में चेंज हो 4 सेकंड में चेंज हो 10 सेकंड में चेंज हो 2 मिली सेकंड में चेंज हो तो इस तरीके से हम ट्रांजिशन ड्यूरेशन भी लिख सकते हैं तो एक बार बस ट्रांजिशन प्रॉपर्टी और ट्रांजिशन ड्यूरेशन को टेस्ट आउट करके देखते हैं हम क्या करेंगे डिव के अंदर जाकर ट्रांजिशन जो प्रॉपर्टी है उसके अंदर हम लिखने वाले हैं ऑल यानी सारी प्रॉपर्टीज के ऊपर मेरा ट्रांजीशन अप्लाई करना चाहिए एंड फिर हम देने वाले हैं ट्रांजिशन ड्यूरेशन जिसको हम कहेंगे 2 सेकंड यानी ट्रांजिशन होते टाइम जितने भी चेंजेज आए ट्रांजिशन होते टाइम मतलब जब भी हर की स्टेट में चेंज कर रहे हैं एक्टिव स्टेट में चेंज कर रहे हैं जितने भी चेंजेज आने वाले हैं ये बैकग्राउंड कलर के या फोरग्राउंड कलर के तो उसके लिए 2 सेकंड लगने चाहिए चेंज में इंटेंटली नहीं होना चाहिए चेंज तो अब अगर हम इसे रिफ्रेश करें और जाकर इसके ऊपर हर करें तो क्या हो रहा है एकदम से कलर रेड चेंज नहीं हुआ थोड़ा सा उसने इफेक्ट लिया अब इस पर वापस से अनहर करेंगे तो क्या हुआ वापस से कलर ट्रांजिशन बैक टू ग्रीनि कलर हो गया बट उसने भी टाइम लिया कितना टाइम लिया 2 सेकंड का टाइम लिया तो इस तरीके से हमने एक छोटा सा इफेक्ट ऐड कर दिया ये इफेक्ट हमारे टेक्स्ट के ऊपर भी अप्लाई कर रहा है हम चाहे तो फॉन्ट साइज भी चेंज कर सकते हैं जैसे हम चाहते हैं कि मेरा जो फॉन्ट साइज है मेरे डिव के लिए वो चेंज हो जाए टू लेट्स से 20 पिक्सल्स तो हम जाकर कर सकते हैं रिफ्रेश अब जैसे ही हर करेंगे मेरा क्या हो रहा है फॉन्ट इंक्रीज हो रहा है हर आउट करेंगे फॉन्ट डिक्रीज हो रहा है हर इन करेंगे दोबारा से फॉन्ट इंक्रीज हो रहा है तो इस तरीके तरीके से एक ट्रांजीशन एक इफेक्ट मैंने दे दिया है अपने एलिमेंट को अब इस इफेक्ट के लिए अगर मैं चाहती हूं कि मैं कोई टाइमिंग फंक्शन ऐड कर दूं टाइमिंग फंक्शन ऐड करने का मतलब है कि ये इफेक्ट तो हो रहा है पर किस स्टाइल में हो रहा है तो अलग-अलग स्टाइल्स होते हैं हमारे पास हम जाकर एमडीएन डॉक्यूमेंटेशन में पढ़ सकते हैं फॉर ट्रांजिशन ट्रांजिशन टाइमिंग फंक्शन सीएसएस तो इसमें एमडीएन पर जाएंगे अगर तो यहां पे अलग-अलग ट्रांजिशन फंक्शन हमारे पास अवेलेबल होते हैं ईज ईज इन ईज आउट ईज इन आउट लीनियर स्टेप तो काफी सारे ट्रांजिशन फंक्शन होते हैं जैसे अगर लीनियर है तो जैसे ही मैं इस एलिमेंट पर हर करूंगी ये क्या हो रहा है लीनियर इस पर इफेक्ट आ रहा है अगर मैं इजन करूंगी तो जैसे इस पर हर करेंगे क्या हो रहा है थोड़ा सा शुरुआत में स्लो जा रहा है एंड उसके बाद एकदम से इफेक्ट आ रहा है स्टेप्स में जाएंगे तो स्टेप्स में थोड़ा-थोड़ा थोड़ा-थोड़ा थोड़ा-थोड़ा करके इसके ऊपर इफेक्ट अप्लाई हो रहा है क्यूबिक में एक और चीज हमें मिलेगी थोड़ा सा ये एलिमेंट थोड़ा आगे जा रहा है उसके बाद बैकवर्ड्स जा रहा है फिर थोड़ा सा फॉरवर्ड जा रहा है तो इस तरीके का इफेक्ट आता है तो इफेक्ट को अप्लाई करने के भी अलग-अलग तरीके होते हैं जैसे हम यहां पर जाकर ट्राई कर सकते हैं ट्रांजिशन टाइमिंग फंक्शन इसके अंदर हम लिखने वाले हैं लेट्स से स्टेप्स इसको कर लेते हैं सेव एंड रिफ्रेश अब जैसे ही इसके ऊपर क्लिक करेंगे वैसे ही क्या हो रहा है यह स्टेप्स की फॉर्म में अपना ट्रांजिशन अप्लाई कर रहा है यहां पर हम लिखने वाले हैं स्टेप्स तो स्टेप्स में हम चाहते हैं कि ये पांच स्टेप्स में अपने ट्रांजिशन को अप्लाई करें अब इसे करेंगे रिफ्रेश और जैसे ही इस पर हर करेंगे वैसे ही क्या कर रहा है एगजैक्टली पांच स्टेप्स में इसने दो सेकंड के अंदर ट्रांजिशन अप्लाई किया 1 2 3 4 5 अब दोबारा से हर करेंगे तो 1 2 3 4 पा एगजैक्टली पांच स्टेप्स में हम चाहे तो इसे तीन स्टेप्स भी कर सकते हैं रिफ्रेश जैसे ही हर किया वन टू थ्री तीन स्टेप्स के अंदर हर आउट किया तो वन टू थ्री एगजैक्टली दो सेकंड्स के अंदर इसने क्या किया तीन स्टेप्स में अपने ट्रांजिशन को अप्लाई किया तो इस तरीके से मेरा टाइमिंग फंक्शन काम कर करता है स्टेप्स की जगह हम चाहे तो इसे ईज इन दे सकते हैं रिफ्रेश करेंगे ईज इन से क्या हुआ पहले धीरे-धीरे ट्रांजिशन अप्लाई हो रहा है फिर एकदम से इजन यानी धीरे-धीरे किसी चीज पर ट्रांजिशन को अप्लाई करना अब चौथा जो हमारे पास ट्रांजिशन फंक्शन होता है दैट इज ट्रांजिशन डिले यानी हम चाहते हैं कि चेंज आए पर चेंज कितने टाइम के बाद आए उसको भी हम सेट कर सकते हैं जैसे मैं चाहती हूं मेरा बैकग्राउंड कलर ये सारी चीजें चेंज तो हो पर वो एक सेकंड के डिले के साथ चेंज होनी चाहिए तो मैं ट्रांजिशन डिले ऐड कर सकती हू फॉर वन सेकंड सेव रिफ्रेश तो जैसे ही इस पर हर किया एक सेकंड वेट किया अब ट्रांजिशन आना स्टार्ट होगा जैसे ही बाहर गए एक सेकंड वेट किया अब ट्रांजिशन वापस से आना स्टार्ट होगा जैसे ही हर किया एक सेकंड वेट किया अब ट्रांजिशन आना स्टार्ट होगा तो हमने एक तरीके से एक डिले ऐड कर दिया ये डिले 5 सेकंड भी हो सकता है 2 मिली सेकंड्स भी हो सकता है कितना भी छोटा या कितना भी बड़ा डिले हम ऐड कर सकते हैं और इन सारी ट्रांजिशंस प्रॉपर्टी के लिए हमारे पास एक होता है ट्रांजिशन शॉर्ट हैंड यानी एक सिंगल लाइन में इन सबको लिखने का तरीका हम क्या कर सकते हैं पहले अपनी प्रॉपर्टी का नाम लिख सकते हैं फिर ड्यूरेशन लिख सकते हैं प्रॉपर्टी नाम में या तो स्पेसिफिक प्रॉपर्टी जिस पर हम ट्रांजिशन अप्लाई करना चाहते हैं नहीं तो हम सिंपली ऑल भी लिख सकते हैं अगर हम सारी प्रॉपर्टीज पर ट्रांजिशन अप्लाई करना चाहते हैं तो फिर हम ड्यूरेशन बताते हैं फिर हम टाइमिंग फंक्शन बताते हैं फिर हम अपना डिले जो है उसको बता रहे होते हैं तो इन चारों को एक सिंगल लाइन में लिखने का तरीका है कि हम इसे कॉमेंट आउट कर दें हम लिखें ट्रांजीशन सबसे पहले कौन सी प्रॉपर्टीज पर अप्लाई होगा उसके बाद अपना डिले फिर टाइमिंग फंक्शन व्हिच इज गोइंग टू बी ईज इन एंड फिर अपना डिले हम बताने वाले यह पहले हमने ड्यूरेशन लिखा था यहां पर इसको कर लेते हैं सेव रिफ्रेश तो अब भी एक सेकंड का डिले एंड उसके बाद मेरी ट्रांजिशन ईज इन होकर मुझे दिखाई देगी एक सेकंड का डिले दोबारा ट्रांजिशन इज इन होकर दिखाई देगी तो इस तरीके से हम सेम लाइन में सिंगल लाइन में सारी की सारी ट्रांजीशन को अप्लाई कर सकते हैं नेक्स्ट प्रॉपर्टी जिसकी हम बात करने वाले हैं ये है मेरी सीएसएस ट्रांसफॉर्म प्रॉपर्टी अब ट्रांसफॉर्म ट्रा से भी थोड़ा सा एक लेवल ऊपर जाकर हम चीजों को करने वाले हैं यहां पर हमारे जो एलिमेंट्स हैं उनको हम 2d एंड 3d स्पेस में ट्रांसफॉर्म करने वाले हैं ट्रांसफॉर्म करने का मतलब है चीजों को रोटेट करना चीजों को साइज में बड़ा करना छोटा करना इस तरीके की हम अलग-अलग चीजें ट्राई आउट करेंगे तो सबसे पहली ट्रांसफॉर्म प्रॉपर्टी जिसको हम टेस्ट आउट करेंगे वो है मेरी रोटेट प्रॉपर्टी रोटेट करने का मतलब क्या होता है मेरे पास अगर कोई भी एलिमेंट है तो उसको अगर मुझे रोटेट करना है यानी घुमाना है तो उसके लिए हम रोटेट प्रॉपर्टी को को यूज कर सकते हैं तो मैं सिंपली लिखूंगी ट्रांसफॉर्म रोटेट एंड उसके बाद अंदर हम लिखते हैं कि कितनी डिग्री से हम रोटेट करना चाहते हैं अब डिग्री ऐसी चीज है जो हमने मैथ के अंदर पढ़ी होगी अगर आपने नहीं पढ़ी तो मैं थोड़ा सा आपको ब्रीफ दे देती हूं जो हम मैथ के अंदर पढ़ा करते थे कि इतना जो होता है कि अगर कोई एलिमेंट है जो इस तरीके से रखा हुआ है यानी ये इसका टॉप है और हम चाहते हैं वो कुछ इस तरीके से ट्रांजिशन होकर आ जाए जहां पर टॉप राइट साइड में आ जाए मतलब अगर हम चाहते हैं कोई चीज ऐसे रखी हुई है तो वो अब ट्रांसफॉर्म होकर इस तरीके से आ जाए तो हम उसे रोटेशन कितना देते हैं रोटेशन उसे देते हैं 90° का तो इतना रोटेशन जिसमें हॉरिजॉन्टल साइड वर्टिकल बन जाए वर्टिकल साइड हॉरिजॉन्टल बन जाए उस रोटेशन को कहते हैं 90° रोटेशन अब 90° का रोटेशन होता है पूरा अगर हम रोटेट करना चाहते हैं मिरर इमेज लाना चाहते हैं तो ये मेरा 180° का रोटेशन होता है और 90° से हाफ का रोटेशन आपको चाहिए तो उसको हम 45° का रोटेशन कहते हैं अब आप चाहे तो अलग-अलग मेजरमेंट होते हैं रोटेशन के लिए आप चाहे तो रेडियन यूज़ कर सकते हैं हम रेडियंस भी यूज़ कर सकते हैं बट यूजुअली मैक्सिमम केसेस में जो प्रैक्टिकली यूज़ होता है वह हमारा डिग्रीज होता है कि हमें कितनी डिग्री से रोटेट करना है किसी चीज को तो एक बार इसको ट्राई आउट करते हैं ट्रांजिशन को थोड़ा सा हटा देते हैं रिफ्रेश करते हैं यह मेरा बॉक्स है इसके ऊपर हर की अभी भी कुछ-कुछ प्रॉपर्टीज हैं जो अप्लाई हो रही है पर इसके ऊपर हम ट्रांसफॉर्म करने वाले हैं ट्रांसफॉर्म में हम लिखेंगे रोटेट एंड इसे रोटेट करेंगे 45° इसे करते हैं सेव रिफ्रेश तो ये क्या हुआ रोटेट हो गया 45° यानी ये बॉक्स अभी सीधा था बट ये 45 डिग्रीज रोटेट हो गया इसको अगर थोड़ा सा और हमें क्लीयरली दिखाना है तो इसे सेंटर ऑफ द पेज पर थोड़ा सा लेकर आते हैं तो इसके लिए पोजीशन हम कर लेते हैं एब्सलूट या रिलेटिव कोई भी कर सकते हैं एब्सलूट कर ली पोजीशन टॉप से हम चाहते हैं यह 100 पिक्सल्स आ जाए एंड लेफ्ट से भी हम चाहते हैं यह 100 पिक्सल्स मूव होकर आ जाए सेफ रिफ्रेश तो कुछ यहां पर सेंटर में हमारे पास आ गया बॉक्स अब अगर मैं चाहूं कि मुझे इसे 90° रोटेट करना है सेव रिफ्रेश तो ये क्या हुआ जो साइड यह लेफ्ट वाली साइड जो टॉप की तरफ थी अब यह कहां पर आ गई राइट की तरफ आ गई तो बेसिकली 90° का रोटेशन आ गया बॉक्स को कंप्लीट उल्टा करना है तो उसके लिए 180 190 नहीं 180 डिग्रीज का हम रोटेशन लगा सकते हैं और एक चीज यहां पर आपने नोटिस की होगी कि ट्रांसफॉर्म प्रॉपर्टी सिर्फ मेरे बॉक्स पर अप्लाई नहीं कर रही बॉक्स के अंदर अगर कोई भी कंटेंट है वो कंटेंट भी साथ के साथ ट्रांसफॉर्म होगा तो ट्रांसफॉर्म सिर्फ आउटर बॉक्स पर अप्लाई नहीं करती जिस पर आपने ट्रांसफॉर्म प्रॉपर्टी को यू किया है उस html4 भी रोटेट कर सकते हैं 360° रोटेट करने का मतलब होगा ओरिजिनल स्टेट में लेकर आ जाना तो यह बिल्कुल ओरिजिनल दिखेगा 360 मतलब पूरा सर्कल आपने कर दिया है तो इस तरीके से रोटेट प्रॉपर्टी मेरे पास काम करती है अब हम चाहे तो अपने रोटेशन को किसी एक पर्टिकुलर एक्सिस के अबाउट भी कर सकते हैं यानी हम चाहे तो सिर्फ x एक्सिस के अबाउट रोटेट कर सकते हैं y एक्सिस के अबाउट या z एक्सिस के अबाउट अब यह जो रोटेशन होगा इस केस में हम प्रेफर करेंगे कि जब भी आप इस तरीके से रोटेट करें वो तो वो 3d ऑब्जेक्ट्स के लिए रोटेशन बेटर रहेगा बट हम 3d ऑब्जेक्ट्स को अभी कवर नहीं करने वाले क्योंकि वो एक लेवल और कॉम्प्लेक्टेड ऑब्जेक्ट्स को भी क्रिएट कर सकते हैं इस चैप्टर के एंड पर तो वो चीज ऐसी होगी जो मैं आपको एज अ होमवर्क प्रॉब्लम दूंगी खुद से जाकर एक्सप्लोर करने के लिए कि 3d में एक क्यूब कैसे बनाना है या और आप स्क्वेयर कैसे क्रिएट कर सकते हैं बट इस तरीके की चीजें यहां पर अभी हम कवर नहीं करने वाले बट डेफिनेटली आई वुड एडवाइज यू कि एक बार इस चीज को ट्राई जरूर करना है जाकर बट एक इंटरेस्टिंग चीज यहां पर आप नोटिस करेंगे कि जैसे ही मुझे अगर इसे रोटेट करना है विद अ 45° तो मैं क्या करूंगी यहां पर मैं सिर्फ x लिख सकती हूं और रोटेट x करने से अब ये सिर्फ रोटेट होगा 45° या इसे मैं 90° रोटेट करवा सकती हूं विद रिस्पेक्ट टू x एक्सिस इसे करेंगे रिफ्रेश तो यह क्या हुआ गायब हो गया अगर मैं इसे y एक्सिस के अबाउट 45 डिग्री रोटेट करवाऊं तो भी यह गायब हो गया बट अगर मैं इसे z एक्सिस के अबाउट 45 सॉरी 90 डिग्री रोटेट करवाऊं रिफ्रेश करें तो ये अब मुझे 90 डिग्री रोटेट हुआ हुआ दिखाई दे रहा है बट ये चेंज कैसे आया कि जब भी x और y के अबाउट इसे रोटेट कराया गया तब यह कंपलीटली गायब हो गया इसको समझने के लिए थोड़ा सा हमें 3d में घुसना पड़ेगा जैसे अगर यह मेरा एक डिव था यह मेरा डिव है एंड यह मेरा x एक्सिस है यहां से मेरा y एक्सिस जा रहा है एंड बाहर की तरफ मेरा z एक्सिस जा रहा है तो अगर ये मेरा x एक्सिस है और इसके अबाउट में से 90° रोटेट कर रही हूं तो 90° मतलब अब ये सीधा खड़ा है तो अब ये लेट जाएगा और जब भी कोई चीज लेट जाती है तो मतलब उसके पास कोई अपनी यहां पर हाइट नहीं बची एक तरीके से तो कह सकते हैं कि वो विजिबल नहीं होगा सेम चीज फॉर y एक्सिस अगर ये y एक्सिस के अबाउट इस तरीके से प्लेस्क मैंने इसे 90° रोटेट किया तो ये क्या हो जाएगा इतना पतला हो जाएगा कि ये दिखना ही बंद हो जाएगा बट z एक्सिस के अबाउट इसे 90 डिग्री अगर हम रोटेट करते हैं तो ये कैसा हो जाता है इस तरीके से 90 डिग्री रोटेट हो जाता है तो जब भी इसे एक्स एक्सिस या y एक्सिस के अबाउट रोटेट किया जाएगा तो ये दिखाई देना बंद हो जाएगा बट अगर मैं इसे एक्स एक्सिस के अबाउट 180 डिग्री रोटेट कर दूं तब ये मुझे दिखाई देगा रिफ्रेश करेंगे तो अब मुझे दिखाई दे रहा है लेकिन कंप्लीट उल्टा होकर दिखाई दे रहा है तो काफी इंटरेस्टिंग चीज है एक्स एक्सिस वा एक्सिस जड एक्सिस को समझना और किस तरीके से 3d रोटेशंस हमारे लिए काम करती है तो काफी इंटरेस्टिंग होगा अगर आप खुद से जाकर एक्सप्लोर करते हैं तो तो इस तरीके से हमारी रोटेशन काम करती है ट्रांसफॉर्म के अंदर सेकंड प्रॉपर्टी जिसकी हम बात करेंगे ये मेरी स्केल प्रॉपर्टी स्केल करने का मतलब होता है बेसिकली बड़ा करना या छोटा करना साइज में जैसे अगर हम स्केल की बात करें यहां पर रोटेट को हटा देते हैं और मुझे अपना ये जो डिव है इसे स्केल करना है यानी साइज में मैं चाहती हूं कि इसका जो टेक्स्ट है वो बड़ा हो जाए या फिर इसका जो साइज है वो बड़ा हो जाए तो हम इसके लिए यूज कर सकते हैं ट्रांसफॉर्म स्केल और मैं चाहती हूं स्केल में यह वन टाइम स्केल हो तो इसे सेव करके हम कर सकते हैं रिफ्रेश तो स्केल होने का मतलब वन टाइम स्केल होने का मतलब है कि जितना यह था उतना ही रहे बट अगर हम चाहते हैं कि टू टाइम्स स्केल हो जाए पहले से तो इसे करेंगे रिफ्रेश तो यह क्या हुआ एकदम से टू टाइम्स बड़ा हो गया जितना हमने इसका साइज सेट किया है और यहीं पर अगर हम इसे 0.5 यानी आधा कर दें तो जितना साइज सेट किया था उसका यह आधा स्केल हो गया तो स्केल होने का मतलब है कि साइज़ में बड़ा या छोटा होना अब यहां पर जो स्केल हो रहा है वो मेरा एक एक्सिस एंड y एक्सिस दोनों के अलोंग हो रहा है मैं आपको थोड़ा सा रिवाइज करवा देती हूं ये वाला एक्सिस हमारा x एक्सिस होता है जो हॉरिजॉन्टल जाता है जो वर्टिकल जाता है ये हमारा वा एक्सिस होता है और जो बाहर की तरफ आ रहा होता है ये मेरा z एक्सिस होता है तो जो स्केलिंग है वो हम सिर्फ 2d के अंदर अभी के लिए देखने वाले हैं तो x एक्सिस y एक्सिस के अंदर एक सिंगल अमाउंट अगर आपने लिखी है तो वो x y दोनों पर अप्लाई करेगी हम चाहे तो इसे अलग-अलग डायरेक्शंस में भी स्केल कर सकते हैं जैसे मैं चाहती हूं x एक्सिस के अलोंग तो उतना ही रहे y एक्सिस के अलोंग ये डबल स्केल हो जाए तो क्या होगा x एक्सिस यानी विड्थ इसकी उतनी ही रहेगी बट हाइट में डबल हो जाएगा और मुझे उल्टा करना है विड्थ में डबल करना है हाइट में उतना ही रखना है रिफ्रेश करेंगे विड्थ डबल हो गई और हाइट में अब ये उतना ही रहा तो टू टाइम्स विड्थ यानी ये फर्स्ट वैल्यू x एक्सिस के लिए होती है ये सेकंड वैल्यू मेरे पास y एक्सिस के लिए होती है हम चाहे तो अलग-अलग एक्सिस के लिए अलग-अलग भी लिख सकते हैं स्केल x स्केल y को हम यूज़ कर सकते हैं जैसे यहां पर मैंने यूज़ किया अगर स्केल x तो x एक्सिस के अलोंग इसकी विड्थ टवा हो जाएगी और यहीं पर अगर हमने y लिखा तो मतलब इसकी हाइट जो है वो मुझे टवा इस होकर मिलेगी हम चाहे तो किसी भी एलिमेंट को हम स्केल कर सकते हैं और ये जो ट्रांसफॉर्म है इस ट्रांसफॉर्म के बारे में एक और स्पेशल चीज है कि इस ट्रांसफॉर्म को हम हर करने पर ला सकते हैं अभी के लिए क्या करेंगे इन सारी चीजों को कॉमेंट आउट कर देंगे एंड हर करने पर हम क्या करना चाहते हैं एलिमेंट को ट्रांसफॉर्म कराना चाहते हैं इसको कर देंगे रिफ्रेश जैसे ही हर किया वैसे ही क्या हुआ बॉक्स साइज में बड़ा हो गया एंड इसके ऊपर अगर मैं ट्रांजिशन ऐड करना चाहूं ट्रांजिशन ऐड कर देते हैं ऑल एंड इसके ऊपर एक ड्यूरेशन लगा देते हैं 2 सेकंड की इसको कर देते हैं ईज इन विदाउट एनी डिले इसको कर देते हैं सेव रिफ्रेश तो जैसे ही हर करेंगे वैसे ही क्या होगा यह बॉक्स मेरा साइज में बड़ा होता हुआ दिखाई देगा सेम चीज हम कर सकते हैं एक्स एक्सिस के अलोंग रिफ्रेश जैसे ही हर किया बॉक्स विड्थ के अलोंग साइज में बड़ा होता हुआ दिखाई देगा अगर मैंने इसे दोनों डायरेक्शंस में स्केल किया इसके ऊपर हर किया तो क्या हुआ बॉक्स वैसे साइज में बड़ा हुआ मतलब x भी y भी दोनों एक्सेस में साइज में बड़ा होता हुआ मुझे दिखाई देने लगेगा और ये काफी इंटरेस्टिंग चीज है मतलब अगर आप इसे हर के अंदर लिखते हैं तो हम सिर्फ स्केल ही नहीं रोटेट भी कर सकते हैं या ट्रांसफॉर्म की कोई भी प्रॉपर्टी अप्लाई कर सकते हैं मान लेते हैं मुझे इसे 90° रोटेट करना है इसे कर लेते हैं सेव रिफ्रेश तो अब जैसे ही इसके ऊपर हर करेंगे ना मेरी स्क्रीन पर हर करते करते 90° रोटेट होगा या 90° की जगह अगर हम इसे कर दें कि मुझे 180° इस पर हर करना है रिफ्रेश करेंगे 180 डिग्री रोटेशन के लिए क्या करेंगे जैसे ही हर करेंगे वो रोटेट हो जाएगा हर आउट करेंगे वापस से ओरिजिनल स्टेट में आ जाएगा हर करेंगे तो दोबारा से रोटेट हो जाएगा तो इस तरीके से डिफरेंट एलिमेंट्स को हम अपनी स्क्रीन के ऊपर रोटेट करा सकते हैं डिफरेंट डिफरेंट टाइम ड्यूरेशन में हम चाहे तो 5 मिनट में बहुत धीरे-धीरे भी इसको रोटेट करवा सकते हैं तो कई सारे इफेक्ट्स यहां से क्रिएट किए जा सकते हैं नेक्स्ट ट्रांसफॉर्म जिसकी हम बात करने वाले हैं यह है ट्रांसलेट ट्रांसलेट का मतलब होता है स्क्रीन पर किसी चीज को मूव करवाना जैसे अगर मेरा एलिमेंट कुछ यहां पर पोजीशन है अगर उसकी पोजीशन की बात करें तो मान लेते हैं उसका जो भी सेंटर है एलिमेंट का वह मेरे लिए ओरिजिन है तो अगर मुझे उसे अपने सेंटर से 20 पिक्सल्स राइट की तरफ मूव करवाना है तो मैं क्या कर सकती हूं मैं उसे ट्रांसलेट कर सकती हूं x एक्सिस में तो दोबारा से एक्सिस को थोड़ा सा समझते हैं ये मेरा पॉजिटिव एक्स एक्सिस होता है ये मेरा नेगेटिव एक्स एक्सिस ये मेरा पॉजिटिव y एक्सिस होता है ये मेरा नेगेटिव y एक्सिस तो जैसे ही मैंने 20 पिक्सल्स उसको ट्रांसलेट करवाया तो वो बॉक्स कहां पर जाकर शिफ्ट हो जाएगा 20 पिक्सल्स यहां से शिफ्ट हो जाएगा और यहां पर मूव होकर आ जाएगा और अगर मैंने -2 पिक्सल्स कर दिया तो इस डायरेक्शन में जाकर - 20 पिक्सल्स आ जाएगा उसी तरीके से -2 पिक्सल्स वा एक्सिस में कर दिया तो यहां पर आ जाएगा और प् 20 पिक्सल्स तो ऊपर की तरफ चला जाएगा और अगर मैंने सिर्फ ट्रांसलेट लिखा तो मतलब एकस एक्सिस में भी ट्रांसलेट होगा वा एक्सिस में भी ट्रांसलेट होगा एक बार इसको टेस्ट आउट करके देखते हैं हम क्या करेंगे ट्रांसफॉर्म को यहां से हटाकर हम अब ट्रांसफॉर्म करने वाले हैं ट्रांसलेट ट्रांसलेट कितना करेंगे लेट्स सपोज हम इसे 50 पिक्सल्स ट्रांसलेट करने वाले हैं 2 सेकंड के अंदर वोह एलिमेंट 50 पिक्सल्स मूव होकर जाएगा कौन सी डायरेक्शन में x एक्सिस में इसे करेंगे रिफ्रेश तो जैसे ही इस पर हम हर करते हैं ना और हर करते रहना है नहीं तो वो एलिमेंट क्या होगा मूव नहीं करेगा फिर और हर आउट करेंगे तो वैसे ही वो थोड़ा सा मूव कर रहा है थोड़ा सा और ज्यादा मूव करवाते हैं लेट्स सपोज वी मेक इट 2 पिक्सल्स सेव रिफ्रेश अब जैसे इसके ऊपर हर करते जा रहे हैं वैसे-वैसे एलिमेंट क्या होगा आगे की तरफ जाएगा और हर आउट करेंगे तो वापस से अपनी स्टेट की तरफ जाएगा हर इन कर रहे हैं तो आगे जा रहा है एंड वापस से अपनी स्टेट की तरफ वापस आ रहा है अब इसी वैल्यू को अगर मैं नेगेटिव बना दूं तो ये कहां पर जाएगा ये लेफ्ट साइड की तरफ जाने लग जाएगा रिफ्रेश हावर इन करके ये एलिमेंट कहां पर जा रहा है ये एलिमेंट पूरा का पूरा स्क्रीन से बाहर निकल जाएगा क्योंकि अगर 200 पिक्सेल स्क्रीन से भी और ज्यादा लेफ्ट की तरफ है तो ये एलिमेंट पूरा का पूरा मेरी स्क्रीन से बाहर की तरफ जाने वाला है और जैसे ही हर आउट करेंगे स्क्रीन में एंटर होता हुआ मुझे दिखाई देगा तो इस तरीके से कई सारे डिफरेंट डिफरेंट इफेक्ट्स हैं जो हमें रियल लाइफ वेबसाइट्स के ऊपर देखने को मिलते हैं जिनको हम यहां पर अप्लाई करके देख सकते हैं अब अगर हम चाहे तो इसको y एक्सिस में भी ट्रांसलेट कर सकते हैं y एक्सिस में ट्रांसलेट करने का मतलब है नेगेटिव वैल्यू मतलब ये नीचे की तरफ जाएगा रिफ्रेश यहां पर -200 पिक्सल्स को कर लेते हैं 200 पिक्सल्स इसे करेंगे रिफ्रेश जैसे ही इसके ऊपर हर करेंगे वैसे ही क्या कर रहा है ये नीचे की तरफ जा रहा है मतलब जो भी मेरी पोजीशन थी इससे 200 पिक्सल्स मूव करने की कोशिश करेगा नीचे की तरफ तो एक तरीके से बाउंसिंग इफेक्ट हम क्रिएट कर सकते हैं एंड अगर हमें इसे ऊपर की तरफ फ्लोट करवाना है तो उसके लिए नेगेटिव यूज कर सकते हैं तो इस तरीके से मेरा एलिमेंट क्या करेगा स्क्रीन से बाहर भी फ्लोट करके जा सकता है ये एगजैक्टली बाहर नहीं जा रहा क्यों नहीं जा रहा क्योंकि पूरा जैसे ही बाहर चला जाएगा हम हर नहीं कर पाएंगे हर नहीं कर पाएंगे तो प्रॉपर्टी अप्लाई नहीं करेगी तो अगर मुझे किसी एलिमेंट पर उसको ड्रॉप करने वाला इफेक्ट अप्लाई करना है तो इस तरीके से हम एलिमेंट्स को ड्रॉप कर सकते हैं अपनी स्क्रीन के ऊपर से तो इस तरीके के भी आप चेंजेज ला सकते हैं अपने ट्रांसलेट करना चाहते हैं तो हम सिंपली लिख सकते हैं यहां पर सिर्फ ट्रांसलेट एंड अगर मुझे इसे राइट डायरेक्शन में मतलब एक्स एक्सिस में 100 पिक्सल्स ट्रांसलेट करना है और वा डायरेक्शन में इसे मुझे लेट्स सपोज 80 पिक्सल्स ट्रांसलेट करना है तो इसे कर सकते हैं सेव रिफ्रेश जैसे ही इसके ऊपर करेंगे तो अब ये थोड़ा सा नीचे की डायरेक्शन में राइट डायरेक्शन में मूव करेगा इस तरीके से अलग-अलग डायरेक्शन में अपनी डी स्पेस में हम अपने एलिमेंट को मूव करवा सकते हैं नेक्स्ट हम डिस्कस करने वाले हैं ट्रांसफॉर्म में स्क्यू स्क्यू जो है यह थोड़ा सा और इंटरेस्टिंग लगेगा स्क्यू इज अ मिक्सचर ऑफ डिफरेंट इफेक्ट्स एक तरीके से तो स्क्यू को हम टेस्ट करके ही समझेंगे स्क्यू हम किसी भी एलिमेंट को करवा सकते हैं टू सम डिग्री लेट्स सपोज मुझे किसी एलिमेंट को 30° स्क्यू करवाना है तो मैं इसे रिफ्रेश करूंगी तो स्क्यू होने का मतलब है कि एक तरीके से दोनों कॉर्नर से पकड़कर उस चीज को खींच देना तो ये क्या हो गया मेरा पूरा का पूरा फॉन्ट यानी टेक्स्ट अंदर का कंटेंट एंड जो मेरा पूरा एलिमेंट है वो पूरा स्क्यू हो गया हम चाहें तो इसे 90 डिग्री स्क्यू भी करवा सकते हैं 90 डिग्री स्क्यू कराने से बेसिकली जो एलिमेंट है वह थोड़ा सा क्रेजी हो रहा है तो इस तरीके का इफेक्ट हमें लेकर आना है पुरानी वेबसाइट्स पर आपने देखे होंगे इस तरीके के एलिमेंट्स वो हम कर सकते हैं हम चाहे तो इसे 45 डिग्री भी स्क्यू करवा सकते हैं हर किया तो क्या हुआ 45 डिग्री पर रुक गया एंड वापस से जाकर नॉर्मल हो जाएगा तो हम स्क्यू भी करा सकते हैं किसी भी एलिमेंट को अब नेक्स्ट चीज जिसके बारे में हम बात कर ने वाले अपने चैप्टर के अंदर वह है मेरी एनिमेशन अभी तक हमने देखा कि किसी भी एलिमेंट के ऊपर इफेक्ट्स डालने के लिए हम ट्रांजिशंस को यूज़ कर सकते हैं हम ट्रांसफॉर्मेशन को यूज़ कर सकते हैं यानी ट्रांसफॉर्म्स को यूज कर सकते हैं पर फिर भी सीएसएस के अंदर एनीमेशंस एजिस्ट करती हैं एनीमेशंस बेसिकली ट्रांसफॉर्म्स को ही करने का एक और बेटर तरीका होता है जिससे और स्मूथली हम अपने एलिमेंट्स को एनिमेट कर पाते हैं तो एनिमेशन करने के लिए हम अपनी एनिमेशन प्रॉपर्टीज एंड की फ्रेम्स को यूज़ करते हैं सीएसएस में की फ्रेम्स को बनाने का बेसिक लिए यह तरीका होता है की फ्रेम को कहने का मतलब है कि मैंने कोई भी एनिमेशन बना ली यह मेरी एनिमेशन का नाम है दिस इज बेसिकली माय एनिमेशन नेम और एक की फ्रेम क्या होता है की फ्रेम को हम टेंप्लेट की तरह समझ सकते हैं टेंप्लेट यानी टेंप्लेट को टेंप्लेट कह सकते हैं या इसे ब्लूप्रिंट कह सकते हैं इस तरीके का कुछ जैसे कोई भी अगर हम लैंड लेते हैं तो उस पर घर बनाने से पहले उसका ब्लूप्रिंट तैयार होता है उसका लेआउट तैयार होता है एक तरीके से कह सकते हैं उसका टेंप्लेट तैयार होता है तो वैसा ही कुछ हम टेंप्लेट तैयार करते हैं एक्चुअल एनिमेशन अप्लाई करने से पहले मतलब अगर सिर्फ इतना कोड मैंने अपनी सीएसएस फाइल के अंदर लिख लिया तो एनिमेशन अप्लाई नहीं होगी बट हां एनिमेशन को अप्लाई करने के लिए इसको लिखना जरूरी है तो एनीमेशन को अप्लाई करने से पहले एनिमेशन का हम टेंप्लेट बनाते हैं टेंप्लेट बनाने के लिए हमें लिखना पड़ता है @ की फ्रेम जैसे हमने पहले @ मीडिया लिखा था मीडिया क्वेरीज में फिर हम अपनी किसी भी एनिमेशन का नाम लिखते हैं ये नाम कुछ भी हो सकता है यह आपका नाम भी हो सकता है यह मेरा नाम भी हो सकता है यह अपना कॉलेज भी हो सकता है या ये कुछ और नाम भी हो सकता है यह माय फर्स्ट एनिमेशन भी हो सकता है कुछ भी नाम आप रख सकते हैं तो की फ्रेम मुझे बताता है कि मेरी शुरुआती और मेरी एंडिंग स्टेट क्या होने वाली है किसी भी एलिमेंट के लिए जैसे अगर मैं अपनी एनिमेशन को अप्लाई करने वाली हूं टू सम पैराग्राफ टैग और पैराग्राफ टैग के अंदर मैंने कोई भी मान लेते हैं टेक्स्ट लिखा हुआ है लोरम * 2 टू टाइम्स लोरम एप्सम मैंने जनरेट करके यहां पर कोई भी टेक्स्ट लिखा हुआ है पैराग्राफ के अंदर अब इस पैराग्राफ में शुरुआती स्टेज में मतलब यह है मेरी स्टार्टिंग की स्टेज अगर मेरे फ साइज 20 पिक्सल्स है तो जैसे ही एनिमेशन खत्म होगी तब मेरा फॉन्ट साइज 40 पिक्सल्स होगा तो की फ्रेम मुझे बताते हैं कि की फ्रेम्स फ्रेम्स यानी जब भी हम मूवी बनाते हैं तो मूवी के अंदर क्या होते हैं अलग-अलग फ्रेम्स होते हैं पिक्चर फ्रेम्स जो मिलकर एक मूवी की फॉर्म ले लेते हैं तो वैसा ही कुछ केस यहां पर है कि हम फर्स्ट फ्रेम बता देते हैं कि पहली शुरुआती स्टेज क्या है और लास्ट फ्रेम बता देते हैं कि लास्ट की स्टेज क्या होनी चाहिए अब बीच में जो भी ट्रांजीशन आएगा वो मेरी एनिमेशन होगी तो अभी हम क्या बता रहे हैं सिर्फ फ्रेम्स बता रहे हैं स्टार्टिंग फ्रेम लास्ट फ्रेम तो हम यहां पर लिखते हैं फ्रॉम टू यानी स्टार्टिंग ये मेरा इनिशियल फ्रेम हो गया यह मेरा एंडिंग या मेरा लास्ट फ्रेम हो गया इस चीज को एक बार करके देखते हैं जैसे अब अगर हम चाहते कि मेरा यह जो टेक्स्ट है जो इस बॉक्स के अंदर एजिस्ट करता है यह थोड़ा सा स्क्यू एंड यह सारी चीजें हम हटा देते हैं यहां पर हर के अंदर से इन सारी चीजों को भी हटा देते हैं लेट्स रिमूव आवर ट्रांजिशन प्रॉपर्टी एंड अभी के लिए कर देते हैं सेव रिफ्रेश तो अभी कोई चेंज नहीं हम चाहते कि मेरे जो डिव के अंदर का टेक्स्ट है या फिर यह पिंक कलर इस एक्टिव की वजह से आया इसको भी हटा देते रिफ्रेश अब लेट्स सपोज फंट की जगह हम चाहते हैं कि मेरा ये जो बॉक्स है इसका कलर जो भी अभी इसका हमने बाय डिफॉल्ट कलर दे दे रखा है एक्वा मरीन इससे रेड में शिफ्ट हो जाए तो उस चेंज को लाने के लिए हम इसके लिए एक की फ्रेम डिसाइड कर सकते हैं हम लिखेंगे @ की फ्रेम्स उसके बाद हम अपनी एनिमेशन लिखने वाले हैं तो लेट्स से वी नेम इट कलर एनिमेट कलर एनिमेट हमने इसका नाम रख दिया हम रखेंगे फ्रॉम हम कौन सी स्टेट से लेकर कौन सी स्टेज पर जाना चाहते हैं तो हम जाना चाहते हैं बैकग्राउंड कलर को रेड से लेकर टू बैकग्राउंड कलर सॉरी यह रेड नहीं होगा यह मेरे पास होगा एक्वा मरीन तो शुरुआती स्टेज है मेरी बैकग्राउंड कलर एक्वा मरीन लास्ट स्टेज है मेरी बैकग्राउंड कलर रेड इसे कर लेते हैं सेव एंड रिफ्रेश तो रिफ्रेश करने पर क्या होगा कोई चेंज नहीं आएगा क्योंकि हमने पहली ही बात की है क्या बात की है कि की फ्रेम्स का मतलब होता है बेसिकली टेंप्लेट बता देना कि यहां से लेकर मेरा चेंज यहां तक जाना चाहिए तो एनिमेशन में मैंने टेंप्लेट बता दिया पर एक्चुअल एनिमेशन को अप्लाई नहीं किया एक्चुअल एनिमेशन को अप्लाई करने के लिए हम यूज करते हैं एनिमेशन प्रॉपर्टीज का और ये एनिमेशन प्रॉपर्टीज बिल्कुल मेरी ट्रांसफॉर्म एंड ट्रांजिशन प्रॉपर्टीज जैसी दिखती हैं यानी एनिमेशन का पहले मुझे नेम लिखना पड़ता है एनिमेशन नेम के लिए फिर मुझे एनिमेशन की ड्यूरेशन बतानी पड़ती है जैसे हम ट्रांजिशन की ड्यूरेशन बताते थे वैसे एनिमेशन कितने टाइम तक लास्ट करनी चाहिए फिर हम एनिमेशन का टाइमिंग फंक्शन बताते हैं कि एनिमेशन किस तरीके से आए जल्दी से आ जाए स्लो होकर आए स्टेप्स में आए किस-किस तरीके से मेरी एनिमेशन आनी चाहिए फिर हम एनिमेशन में डिले बताते हैं कि कितने टाइम के बाद एनिमेशन आनी चाहिए तो यह चारों प्रॉपर्टीज तो हमने कहां पर यूज़ की थी ट्रांजिशन के अंदर भी यूज़ की थी तो इनके मतलब में हम और ज्यादा डिटेल में नहीं जाएंगे दो नई प्रॉपर्टीज को एनिमेशन के अंदर हम सीखने वाले हैं एक है मेरी आइट काउंट कि एनिमेशन कितने टाइम्स होना चाहिए इसको हम कह सकते हैं हाउ मेनी टाइम्स शुड माय एनिमेशन अप्लाई एंड दूसरा है मेरा डायरेक्शन डायरेक्शन को अभी के लिए इतना डिटेल में नहीं समझेंगे इसको थोड़ा सा अभी एक बार एनिमेशन के बेसिक्स कर लेते हैं फिर हम डायरेक्शन के बारे में बात करेंगे बट बेसिकली ये पांच प्रॉपर्टीज होती है जिनके लिए हम अपनी एनिमेशन को यूज कर सकते हैं अब एनिमेशन यूज करने के लिए हम डिव के अंदर जा सकते हैं तो सबसे पहले हम लिखेंगे एनिमेशन नेम हमारा एनिमेशन नेम होने वाला है कलर एनिमेट जो हमने अपने एनिमेशन को नाम दिया है फिर डिफाइन करेंगे इसके लिए एनिमेशन ड्यूरेशन ड्यूरेशन कितनी होगी लेट्स सपोज हमें जो एनिमेशन चाहिए वह हमें 3 सेकंड तक चाहिए उसके बाद एनिमेशन के लिए उसका टाइमिंग फंक्शन डिफाइन करेंगे तो अलग-अलग टाइमिंग फंक्शंस हैं जिसको हम यहां पर यूज कर सकते हैं लेट्स सपोज हम ईज इन यूज करने वाले हैं एंड उसके बाद हम एनिमेशन के लिए डिफाइन करेंगे उसका डिले लेट्स सपोज हमें एक सेकंड का डिले चाहिए एनिमेशन शुरू होने से पहले उसके अलावा हम एनिमेशन आइट मेशन भी डिसाइड कर सकते हैं एनिमेशन आइट काउंट होने वाला है अलग-अलग काउंट हम वन भी रख सकते हैं हम चाहते हैं हमारा एनिमेशन पांच बार हो तो जैसे ही हमने अपनी प्रॉपर्टीज को लिख लिया इसे हम करेंगे सेव एंड करेंगे जाकर रिफ्रेश तो एक सेकंड के डिले के बाद हमारी एनिमेशन प्रॉपर्टीज हमें दिखनी स्टार्ट हो गई एंड ये कितनी बार आएगी एनिमेशन टू टाइम्स आ गई है एंड अब ये थर्ड टाइम एनिमेशन आने वाली है उसके बाद फोर्थ टाइम आ रही है एंड अब फिफ्थ टाइम आ रही है एंड अब पांच बार एनिमेशन आकर अब ये स्टॉप हो जाएगी क्यों स्टॉप हो जाएगी क्योंकि हमने आइट काउंट को सेट किया था टू फ अब हम चाहे तो अपने डिले को जीरो सेकंड कर सकते हैं ट्रांजिशन एनिमेशन को लेट्स से हम वन सेकंड करते हैं सेव रिफ्रेश तो अब क्या होगा एक दो तीन चार एंड पाच इस तरीके से एनिमेशन बार-बार आएगी अगर मुझे ब्लिंकिंग एनिमेशन चाहिए यहां पर तो हम अपने ड्यूरेशन को कम कर सकते हैं लेट्स से वी मेक इट 0.25 सेकंड्स एंड एक और चीज कर सकते हैं आइट काउंट को अब मैं करने वाली हूं इनफा अब ईज इन करने की जगह हम यहां पर क्या करते हैं इसे कर कर देते हैं कॉमेंट आउट तो अभी इज इन नहीं होगा ऑटोमेटिक होगा रिफ्रेश करेंगे तो इस तरीके से अब मेरा जो बॉक्स है वो पूरा ब्लिंक करने लग गया तो अगर आपको डिस्को लाइट्स बनानी है मल्टीपल इन फैक्ट वी कैन मेक इट व्हाट वी कैन डू इज वी कैन गिव इट अ बॉर्डर रेडियस ऑफ 50 पर तो ये थोड़ा सर्कुल सर्कुलर हो जाएगा शेप में रिफ्रेश तो इस तरीके से क्या हुआ मेरी एक चमकती हुई लाइट मुझे अब दिखाई दे रही है तो इस तरीके से हम एनिमेशन ऐड कर सकते हैं और इस सिंपल एनिमेशन को ऐड करना काफी ज्यादा आसान हो जाता है यूजिंग एनिमेशन प्रॉपर्टीज अब एक और प्रॉपर्टी है जिसके बारे में बात कर लेते हैं व्हिच वाज माय एनिमेशन डायरेक्शन एनिमेशन डायरेक्शन डिसाइड करती है कि एनिमेशन की क्या डायरेक्शन होनी चाहिए डायरेक्शन में हमारे पास मल्टीपल ऑप्शंस होते हैं जैसे एक ऑप्शन होता है मेरे पास नॉर्मल नॉर्मल एनिमेशन का मतलब होता है जैसे अगर मेरा कोई एलिमेंट है जिस पर मैंने एनिमेशन अप्लाई की कि मान लेते हैं इसका जो फॉन्ट साइज है या इसकी जो पोजीशन है यह अभी अगर यहां पर है तो अब यह पोजीशन में आगे जाकर करीबन 10 पिक्स मूव कर जाना चाहिए तो हो सकता है पहले इस डायरेक्शन में मूव करें उसके बाद एनिमेशन जब खत्म हो जाएगी तो यह वापस ओरिजिनल डायरेक्शन प आ जाए बट अगर हम रिवर्स में एनिमेशन करें तो पूरी की पूरी एनिमेशन रिवर्स में अप्लाई होगी इसमें अगर और डिटेल में हमें जाना है तो हम जाकर सर्च कर सकते हैं एनिमेशन डायरेक्शन प्रॉपर्टी इन सीएसएस इसको एमडीएन पर जाकर तो तो जैसे नॉर्मल एनिमेशन है तो यहां पर प्ले करेंगे तो नॉर्मल एनिमेशन क्या कर रही है पहले एनिमेशन की वजह से एलिमेंट आगे जा रहा है उसके बाद दोबारा एलिमेंट आगे जा रहा है पर यही एनिमेशन रिवर्स में प्ले हो तो क्या होगा अब मेरा जो एलिमेंट है वो फाइनल से इनिशियल पोजीशन की तरफ आ रहा है मतलब फ्रॉम टू से अब टू फ्रॉम का रिलेशन चल रहा है एंड अल्टरनेट कहने का मतलब है कि पहले एनिमेशन फ्रॉम टू टू जाएगा उसके बाद एनीमेशन टू टू फ्रॉम फिर फ्रॉम टू टू वाली स्टेज उसके बाद टू टू फ्रॉम वाली स्टेज एंड रिवर्स में एनिमेशन पहले टू से फ्रॉम जाएगी एंड इस तरीके से अल्टरनेट होती रहेगी तो बेसिकली हमारे पास चार ऑप्शंस आते हैं डायरेक्शन की तरफ यह चार ऑप्शंस यह वाले चारों पॉपुलर ऑप्शंस है अगर हम नॉर्मल की बात करें यह हम एनिमेशन डायरेक्शन की बात कर रहे हैं यहां पर चार ऑप्श होते हैं एक मेरे पास होता है नॉर्मल एक मेरे पास होता है रिवर्स एक हमारे पास होता है अल्टरनेट एंड एक हमारे पास होता है अल्टरनेट रिवर्स तो नॉर्मल में हमारी जो एनिमेशन है वो नॉर्मली एक साइक्लिक फॉर्म में चलती रहती है चलती रहती है रिवर्स में क्या होता है टू टू फ्रॉम वाला रिलेशन एस्टेब्लिश हो जाता है मतलब मेरी जो एनिमेशन है वो एक तरीके से बैकवर्ड्स डायरेक्शन में प्ले करती है फॉर ईच साइकिल अल्टरनेट में क्या होता है रिवर्सेज डायरेक्शन ईच साइकिल यानी पहले अगर फॉरवर्ड जा रही थी मतलब टू से फ्रॉम वाली एनिमेशन चल रही थी तो नेक्स्ट टाइम फ्रॉम से टू वाली एनिमेशन चलेगी तो इस तरीके से अल्टरनेट होता रहता है एंड अल्टरनेट रिवर्स यानी रिवर्स भी हो रहा है तो अल्टरनेट भी हो रहा है तो इस तरीके से से हमारी एनिमेशन की हम डायरेक्शन भी सेट कर सकते हैं डायरेक्शन कलर में इतना ज्यादा दिखाई नहीं देगी क्योंकि अभी ब्लिंक ही कर रहा है बट अगर हम यहां पर पोजीशन को सेट करें मतलब बैकग्राउंड कलर की जगह अगर शुरुआत में मेरी जो पोजीशन थी लेट्स सपोज वो लेफ्ट से थी जीरो पिक्सल्स एंड इस एलिमेंट की पोजीशन हमने क्या कर रखी है एब्सलूट कर रखी है अगर शुरुआत में लेफ्ट से जीरो पिक्सल्स था तो हम चाहते हैं कि लास्ट में मेरा जो बॉक्स है वो लेफ्ट से 200 पिक्सल्स इस पोजीशन पर अवेलेबल हो इसे कर लेते हैं सेव रिफ्रेश तो क्या जा रहा है मेरा बॉक्स बारबार जा रहा है अब यहां पर ट्रांजिशन डिले की जगह इसे लेट्स सपोज वी मेक इट टू सेकंड्स सेव रिफ्रेश तो अब ये धीरे धीरे मेरा बॉक्स अपनी पोजीशन पर वापस वापस जा रहा है इसे वापस से एक बॉक्स की शेप हम दे देते हैं य क्या कर रहा है डिव वापस से उस पोजीशन पर जा रहा है अब हम चाहते हैं कि एनिमेशन डायरेक्शन को एक बार हम टेस्ट च तो एनिमेशन डायरेक्शन के लिए सबसे पहले तो हम नॉर्मल डायरेक्शन सेट करते हैं तो नॉर्मल डायरेक्शन में रिफ्रेश करेंगे तो कोई चेंज नहीं आएगा उसी डायरेक्शन में एनिमेशन होती रहेगी पर अगर हम चाहे तो इस डायरेक्शन को हम रिवर्स भी कर सकते हैं रिवर्स किया रिफ्रेश किया तो अब क्या हो रहा है 200 पिक्सेल से जीरो पिक्सल्स की तरफ जा रहा है मतलब टू से फ्रॉम वाली एनिमेशन चाली होगी एंड जैसे ही मैंने अल्टरनेट कर दिया वैसे ही क्या होगा तो जैसे ही अल्टरनेट वाली स्टार्ट की रो से 200 200 से 0 0 से 200 इस तरीके से मेरी एनिमेशन में मेरा बॉक्स क्या है लेफ्ट से राइट लेफ्ट से राइट मूव करता रहेगा तो इस तरीके से हम अपनी एनिमेशन प्रॉपर्टी के साथ डिफरेंट डिफरेंट चीजें जो है एक्सपेरिमेंट कर सकते हैं एंड फिर हम बात करेंगे एनिमेशन प्रॉपर्टी के शॉर्ट हैंड की यानी ये जो सारी की सारी प्रॉपर्टीज हैं उनको हम एक सिंगल लाइन में भी लिख सकते हैं कैसे सबसे पहले हम एनिमेशन प्रॉपर्टी में नेम लिखते हैं उसके बाद हम प्रॉपर्टी का ड्यूरेशन लिख देते हैं उसके बाद हम टाइमिंग फंक्शन को लिखते हैं दिस इज आवर टाइमिंग फंक्शन उसके बाद हम अपने डिले को लिख सकते हैं एंड उसके बाद हम इसका आइट मेशन काउंट बता सकते हैं एंड लास्ट में हम बता सकते हैं कि हमारी जो प्रॉपर्टी है उसकी डायरेक्शन क्या रहेगी इस तरीके से सारी की सारी जो चीजें हैं उनको एक साथ अब एक बार क्लब करने की कोशिश करते हैं हम क्या करेंगे इतने पार्ट को कॉमेंट आउट कर देते हैं इतने पार्ट को कॉमेंट आउट कर देते हैं अब हम क्या करेंगे सेम एनिमेशन को क्रिएट करेंगे एनिमेशन के लिए सबसे पहले उसका नाम व्हिच इज कलर एनिमेट ऑल दो अब ये थोड़ा पोजीशन एनिमेट हो जाना चाहिए था इसका नाम उसके बाद ड्यूरेशन लिखेंगे 2 सेकंड्स टाइमिंग फंक्शन के लिए हम इसे लेट्स सपोज वी गिव इट ईज इन डिले लिख देते हैं रो सेकंड का डिले है इंफाइटिंग अलग सेंटेंसेस के साथ वर्क करती अब हमने क्या किया सिंगल लाइन में सारी की सारी एनिमेशन को अप्लाई कर दिया है तो इस तरीके से हमारी एनिमेशन प्रॉपर्टी काम करती है एंड इसके साथ हम बहुत सारे एक्स एक्सपेरिमेंट्स कर सकते हैं हम चाहे तो मल्टीपल चीजों को एक साथ भी लिख सकते हैं यानी शुरुआत में अगर मेरा बैकग्राउंड कलर लेट्स से येलो है फॉर माय बॉक्स तो हम चाहते हैं लास्ट में जाके जो मेरा बैकग्राउंड कलर है वो चेंज हो जाए टू रेड यानी कुछ इस तरीके से मल्टीपल चीजें हम लिख सकते हैं मल्टीपल प्रॉपर्टीज इसको अच्छे से एक बार थोड़ा सा फॉर्मेटिंग कर लेते हैं फॉर्मेटिंग करना भी कोड के अंदर इंपॉर्टेंट है उससे कोड क्या बनता है और ज्यादा रीडेबल बनता है मतलब हम चाहे तो सेम लाइन में भी सारी चीजें लिख सकते हैं बट लिखते नहीं है क्योंकि हमारा कोड देखने में फिर उतना अच्छा नहीं लगता एंड कोड देखने में भी अच्छा लगना चाहिए क्योंकि उससे पता चलता है कि किसी एक्सपीरियंस प्रोग्रामर ने उस कोड को लिखा है तो हमेशा स्पेसिंग प्रॉपर होनी चाहिए जैसे यहां पर सेमीकलन के बाद आप एक स्पेस दे सकते हैं हर बार अपनी जो भी चीजें हैं उनको लिखने से पहले ये बॉर्डर रेडियस को यहां से हटा देते हैं इसे करते हैं सेव एंड नाउ रिफ्रेश तो अब क्या होगा अब मेरी पोजीशन के साथ-साथ मेरा कलर भी चेंज कर रहा है तो इस तरीके से कलर भी चेंज कर रहा है हम चाहे तो अपने टेक्स्ट के कलर को भी चेंज कर सकते हैं टू लेट्स से वाइट सेव रिफ्रेश तो इस तरीके से धीरे-धीरे मेरा जो कलर है वोह भी वाइट में शिफ्ट हो जाएगा एंड कुछ इस तरीके से मेरी प्रॉपर्टी काम करेगी इसको एक डिले दे देते हैं वन सेकंड का रिफ्रेश एक सेकंड का डिले उसके बाद ट्रांजिशन आया उसके बाद दोबारा एनिमेशन आए दोबारा एनिमेशन आया तो इस तरीके से हम मल्टीपल एनीमेशंस को क्रिएट कर सकते हैं फॉर आवर डिफरेंट एटीएमएल एलिमेंट्स और नेक्स्ट हम बात करने वाले हैं एनिमेशन के अंदर अपनी परसेंटेज के बारे में जैसे यूजुअली जब हम एनिमेशन लिखते हैं तो हम फ्रॉम और टू को लिखते हैं बेसिकली एनिमेशन क्या है एक प्रोसेस है एक प्रोसेस यानी कोई एक काम है जो शुरू हो रहा है और फिर खत्म हो रहा है इसमें फ्रॉम कहने का मतलब है कि जब हमारा काम शुरू हुआ था यानी जब काम 0 पर कंप्लीट हुआ था और टू का मतलब है कि जब हमारा काम 100% कंप्लीट हो गया तो एक स्टेज है एक प्रोसेस के अंदर हो सकता है हम बीच वाली स्टेज में कुछ एक चेंज लेकर आना चाहे तो उसके लिए हम परसेंटेज की फॉर्म में अपने जो एनिमेशन के स्टेप्स है उनको डिफाइन कर सकते हैं तो ये 0 पर जो होता है बेसिकली मेरा फ्रॉम होता है एंड 100% मेरा टू उसके बीच में भी परसेंटेज की फॉर्म में हम कोई स्टेज ला सकते हैं कि जब मेरा एनिमेशन 50 कंप्लीट हो जाए तब क्या चेंज आना चाहिए तो इस तरीके की चीज अगर हमें करनी है तो हम यहां पे फ्रॉम की जगह कर सकते हैं 0 पर टू की जगह हम कर सकते हैं 100% एंड बीच में एक हम 50 पर के लिए स्टेज ऐड कर सकते हैं बीच में हम चाहते हैं कि हमारा जो बैकग्राउंड कलर है वो ब्लू हो जाए अब हमारे ट्रांजिशन को हम अप्लाई करना चाहते हैं टू लेट्स से फॉर फर सेकंड्स इसको करते हैं सेव रिफ्रेश तो अब शुरू शुरुआत येलो कलर से हो रही है उसके बाद कलर ब्लू हो जाएगा उसके बाद कलर रेड होगा फिर दोबारा शुरुआत येलो कलर से फिर मेरा कलर ब्लू हो जाएगा फिर मेरा कलर रेड हो जाएगा तो अलग-अलग ट्रांजिशंस हम लेकर आ सकते हैं फॉर डिफरेंट परसेंटेज हम यहां पर 25 पर भी ऐड कर सकते हैं 30 पर भी ऐड कर सकते हैं और इस तरीके से हम कई सारे ब्यूटीफुल एनिमेशन ट्रांसलेशंस एंड ट्रांजिशंस को क्रिएट कर सकते हैं इन आर सीएसएस अब बढ़ जाते हैं अपने प्रैक्टिस सेट नंबर एट की तरफ जिसमें हम क्रिएट करने वाले हैं एक सिंपल लोडर यूजिंग सीएसएस अब ये लोडर क्या होता है यूजुअली वेबसाइट्स पर जब कोई भी चीज लोड नहीं होती तो एक सर्कल टाइप में हमें कुछ ना कुछ घूमती हुई सी चीज दिखाई देने लगती है जो बेसिकली लोडर होता है जो दिखाता है कि कोई चीज लोड हो रही है जैसे हम whatsapp-web शांति देने के लिए होती है कि फ्रीज नहीं हो गया आपका सिस्टम कुछ ना कुछ चल रहा है प्रोसेस उसके अंदर अब हम लोडर को क्रिएट करने के हमें ऑलरेडी स्टेप्स दिए हुए हैं तो इन स्टेप्स को यूज करके हम एक ब्यूटीफुल लोडर को बनाने वाले हैं तो स्टेप वन है हमारे पास टू क्रिएट अ डिव विद सर्कुलर शेप तो पहले सिर्फ इतना काम करते हैं कि एक डिव को बनाएंगे जिसकी शेप सर्कुलर हो उसके लिए क्या करेंगे अपने स्टाइल ड सीएसएस से सारी सीएसएस हटा देते हैं इक्सड आ गया इसे कर देंगे रिफ्रेश तो यहां मेरा लोडर बन गया इस लोडर के लिए हम लेट्स सपोज इसे कोई विड्थ दे देते हैं 100 पिक्सल्स की एंड हम इसे कोई हाइट दे देते हैं 100 पिक्सल्स की अब इसे क्या करने वाले हैं इसके लिए हम बॉर्डर रेडियस जो है उसको रखने वाले हैं 50 पर तो एक सर्कुलर डिव हमने बना लिया पर क्योंकि बॉर्डर अभी है नहीं तो अभी कुछ दिखाई नहीं दे रहा हमें यह क्रॉस कर लेते हैं अब क्या करेंगे सेकंड पार्ट की तरफ आते हैं कि हम इसे एक थिक बॉर्डर देने वाले हैं फ्रॉम वन एंड अभी तक हमने क्या पढ़ा है कि हमारा जो बॉर्डर होता है व यूजुअली सारे के सारे एंड्स पर अप्लाई करता है यानी अगर मैंने कुछ इस तरीके से लिख दिया बॉर्डर तो यहां पर मैं लिख सकती हूं फाइव पिक्सेल सॉलिड ब्लैक इसको करेंगे रिफ्रेश तो यह मेरा बॉर्डर हो गया और यह हर डायरेक्शन से अभी के लिए इसका अगर मैं सर्कल हटाऊ तो यह हर डायरेक्शन से सॉलिड ब्लैक है ज़ूम इन करें या ज़ूम इन करने की जगह हम क्या कर देते हैं इसके साइज को ही बड़ा कर देते हैं यानी इसे वी विल मेक इट 200 पिक्सल्स एंड 200 पिक्सल्स एंड फाइव पिक्सल्स की जगह इसे हम करते हैं लेट्स से 10 पिक्सल्स रिफ्रेश इस तरीके का बॉक्स मुझे मिलेगा ये टॉप से भी मुझे बॉर्डर मिल गया राइट से भी मिल गया बॉटम से भी मिल गया लेफ्ट से भी मिल गया पर किसी केस में अगर मुझे सिर्फ टॉप बॉर्डर चाहिए तो उसके लिए सिंपली हमें यहां पर ऐड करना होता है बॉर्डर टॉप रिफ्रेश तो अब क्या हुआ बॉर्डर सिर्फ टॉप से अप्लाई होगा अगर मुझे बॉर्डर सिर्फ बॉटम से चाहिए तो उसके लिए हम ऐड कर सकते हैं बॉर्डर बॉटम तो बॉर्डर क्या होगा सिर्फ बॉटम से अप्लाई होगा और थोड़ा इसको क्लियर करने के लिए एक बैकग्राउंड कलर इसको दे देते हैं पिंक कलर तो क्या हो रहा है बॉक्स तो पूरा बना पर उसका बॉर्डर सिर्फ बॉटम से आया अगर मुझे लेफ्ट वाला बॉर्डर चाहिए तो हम क्या कर सकते हैं सिर्फ लेफ्ट से इसे बॉर्डर दे सकते हैं तो उसके लिए हम बॉर्डर लेफ्ट को यूज़ करेंगे तो इस तरीके से बॉर्डर प्रॉपर्टी को भी हम इंडिविजुअल साइड्स का बॉर्डर सेट करने के लिए यूज़ कर सकते हैं तो इसे एक बार के लिए हटा देते हैं एंड इसकी रेडियस को वापस से कर देते हैं 50 पर तो यह क्या हुआ इस तरीके का बॉर्डर मुझे दिखाई दे रहा है क्योंकि अभी मैंने सिर्फ लेफ्ट डायरेक्शन में अपना बॉर्डर यूज़ किया है हम चाहे तो इसे पूरी डायरेक्शन में भी यूज टॉप डायरेक्शन में इसको सेट कर देते हैं सेव रिफ्रेश तो टॉप डायरेक्शन में सिर्फ मेरे पास अभी बॉर्डर अवेलेबल है इसको और थोड़ा सा थिक करें तो यह 20 पिक्सल्स का हम सेट कर सकते हैं और थोड़ा सा थिक बॉर्डर मेरे पास आ जाएगा एंड एक नॉर्मल बॉर्डर सेट कर देते हैं जो सारे के सारे कॉर्नर्स पर अप्लाई करेगा व्हिच इज बेसिकली 20 पिक्सल्स सॉलिड इसे ब्लू कह देते हैं रिफ्रेश तो इस तरीके का मेरे पास बॉर्डर आ जाएगा और यह क्या हुआ एक लोडर की शेप बननी स्टार्ट हो गई अब लोडर की शेप बन रही है पर ये कलर्स इतने ब्यूटीफुल नहीं लग रहे हम किसी कलर पैलेट से भी कलर उठा सकते हैं लेट्स डू इट लेट्स गो टू कूलर्स लेट्स जनरेट सम काइंड ऑफ कलर पैलेट एंड आई होप कि कोई ब्यूटीफुल सा कलर पैलेट मिले हम क्या कर सकते हैं इन दो कलर्स का कॉमिनेशन यूज कर सकते हैं तो ये यह हमारा प्रॉपर बैकग्राउंड कलर बन सकता है सारे के सारे लोडर के लिए एंड यह बेसिकली जो मेरा हाइलाइटेड एरिया है उसके लिए हम यूज कर सकते हैं सेव रिफ्रेश ये सेम कलर हमने दे दिया यहां पे जाके ये सेम कलर हमने दे दिया एंड हमारा कलर थोड़ा सा दिखाई नहीं दे रहा इसको कर लेते हैं कॉपी एंड पेस्ट ये थोड़ा सा ग्रीनि कलर आ गया एंड बैकग्राउंड के लिए क्या करेंगे ग्रीन की जगह यह येलो हम रख लेते हैं ताकि थोड़ा सा स्क्रीन पे दिखाई भी दे क्योंकि बिल्कुल ही वाइटिस हो गया तो स्क्रीन पे दिखाई नहीं देगा सेव रिफ्रेश तो मेरा लोडर अब मुझे कुछ ऐसा दिखाई दे रहा है अब हमारा काम है इस लोडर को मूव करवाना तो हमने दोनों चीजें कर दी एक थिक बॉर्डर क्रिएट कर दिया फ्रॉम वन एंड अब आते हैं स्टेप टू की तरफ स्टेप टू कह रहा है टू मेक इट स्पिन क्रिएट एन एनिमेशन व्हिच ट्रांसफॉर्म्स इट फ्रॉम 0° टू 360° यानी मुझे इस एलिमेंट को ट्रांसफॉर्म करना है ट्रांसफॉर्म करके मुझे इसे रोटेट करना है बेसिकली फ्रॉम 0° टू 360° रोटेट करने के लिए हम क्या लाइन लिखते हैं थोड़ा सा सुंदर तरीके से लिख लेते हैं रोटेट करने के लिए हम लिखते हैं ट्रांसफॉर्म रोटेट हमें क्या करना है इसे 0° से इसे रोटेट करना है 360° पर 360° हमें पता है कि एक कंप्लीट सर्कल होता है तो दो बार हम ट्रांसफॉर्म को यूज कर रहे होंगे शुरुआत वाली स्टेज ये रखनी है लास्ट वाली स्टेज ये रखनी है तो हम एक एनिमेशन को क्रिएट करेंगे जो हमारे लिए ट्रांसफॉर्मेशन का काम करेगी तो उसके लिए की फ्रेम को यूज कर सकते हैं हम यूज करेंगे रेट की फ्रेम्स यहां पर इस एनिमेशन का नाम हम स्पिन रख सकते हैं स्पिन एनिमेशन या स्पिन एनिमेट एंड अब डिसाइड कर सकते हैं फ्रॉम लेट्स सपोज हम चाहते हैं शुरुआत में जो ट्रांसफॉर्मेशन है वो रहे रोटेट इट बाय 0 डिग्रीज व्हिच इज बेसिकली नॉट रोटेटिंग एट ऑल और लास्ट में हम चाहते हैं य ट्रांसफॉर्म हो जाए रोटेट टू 360 डिग्री तो इतना पार्ट हमने कर लिया अब रिफ्रेश करेंगे तो कोई चेंज नहीं आएगा क्योंकि ऑलरेडी बात कर रख की फ्रेम क्या होता है टेंप्लेट होता है ये एक्चुअल एनिमेशन नहीं होती एक्चुअल एनीमेशन के लिए हमें जाना पड़ेगा स्टेप थ्री की तरफ जो कहता है एनिमेशन प्रॉपर्टी को यूज करके अब हमें लोडर को रोटेट करवाना है विद इनफाइनों तो एनिमेशन प्रॉपर्टी को हम यूज़ करने वाले हैं यहां पर सबसे पहले एनिमेशन का नाम लिखेंगे जो है मेरी स्पिन एनिमेट तो एनिमेशन प्रॉपर्टी कैसे काम करती है थोड़ा सा रिवाइज कर लेते हैं एनिमेशन के अंदर सबसे पहले तो हम अपना नाम लिखते हैं उसके बाद हम अपनी ड्यूरेशन लिखते हैं उसके बाद हम स्टाइल लिखते हैं एनिमेशन का टाइमिंग फंक्शन जो भी होता है तो यहां मेरा टाइमिंग फंक्शन आ जाएगा उसके बाद हम डिले लिखते हैं उसके बाद हम आइट काउंट लिखते हैं एंड लास्ट में हम अपना स्टाइल लिख सकते हैं एनिमेशन का व्हिच इज़ बेसिकली माय एनिमेशन डायरेक्शन तो यह सारी चीजें हम लिख सकते हैं हम चाहे तो इनमें से कुछ चीजें स्किप भी कर सकते हैं पर ऑर्डर हमेशा सेम रहना चाहिए तो एनिमेट हम करने वाले हैं लेट्स सपोज वी वांट टू एनिमेट इट विद थ्री सेकंड्स इसके बीच में हम फंक्शन डालना चाहते हैं ईज इन एंड हम कोई भी डिले नहीं रखना चाहते तो जीरो सेकंड्स का डिले है अगर आइट काउंट की बात करें तो हमें इंफाइटिंग इसे अब करेंगे अगर रिफ्रेश तो ये क्या कर रहा है लोडर मेरा लोड करना रोटेट करना स्टार्ट कर रहा है और ईज इन हुआ तो ये एकदम से ऊपर जाकर रुक रहा है शुरुआत में चल रहा है ऊपर एकदम से जाकर रुक रहा है तो ईज इन की जगह हम दूसरी एनीमेशंस भी ट्राई कर सकते हैं लेट्स सपोज इफ वी ट्राई स्टेप्स तो ये क्या होगा पांच स्टेप्स में जाके एनिमेशन कंप्लीट होगी इस तरीके से लोडर मेरा तो इस लो इंटरनेट का एक तरीके से अगर आपको लोडर दिखाना है तो आप इस तरीके से दिखा सकते हैं यहां पर हम कोई और टाइप रख सकते हैं लेट्स सपोज वी गिव इट ईज इन इज आउट सेव रिफ्रेश तो इस तरीके से मेरा जो एनिमेशन है वह चल रहा होगा एंड एक लोडर हम क्रिएट कर सकते हैं हमारी वेबसाइट के लिए यूजर को दिखाने के लिए कि उनकी जो भी चीज है वो लोड हो रही है हम इसके कलर्स के साथ वेरिएशन में कुछ-कुछ चेंजेज कर सकते हैं हम चाहे तो इसको और ज्यादा फास्ट चलाने के लिए वी कैन मेक इट टू सेकंड्स तो ये क्या होगा और ज्यादा फास्ट स्पिन करेगा इसे वन सेकंड कर देंगे तो और ज्यादा फास्ट स्पिन करेगा रिफ्रेश तो क्या हो रहा है बहुत ज्यादा फास्ट फास्ट हमारा लोडर जो है वो लोड करना स्टार्ट कर देगा तो इस तरीके से हम और भी ज्यादा इंटरेस्टिंग एनीमेशंस क्रिएट कर सकते हैं एंड मैं डेफिनेटली आपको वेलकम करूंगी कि आप अपने टाइम से निकालकर एमडीएन का थोड़ा सा खुद से हमें डॉक्यूमेंटेशन पढ़ने की कोशिश करनी है और इंटरनेट पर बहुत सारी डिफरेंट डिफरेंट चीजें अवेलेबल हैं जिनको हम ट्राई आउट कर सकते हैं यूजिंग जस्ट पार्ट के साथ जो होने वाला है हमारा प्रोजेक्ट तो हम एक अच्छा सा प्रोजेक्ट बनाएंगे और जितने भी सीएसएस कांसेप्ट को हमने अभी तक सीखा है उन कांसेप्ट को यहां पर इंप्लीमेंट करने वाले हैं साथ के साथ दो-चार ऐसी चीजें भी होने वाली है जिनको हम नया-नया सीखेंगे प्रोजेक्ट को बनाते टाइम तो ये प्रोजेक्ट सिर्फ हमारे पुराने जो भी हमने चीजें सीखी हैं उसका रिवीजन नहीं होगा बल्कि इसमें हम साथ के साथ तीन-चार नई ऐसी चीजें सीखेंगे जो सीएसएस करते टाइम हमें ध्यान रखनी होती है किसी भी और प्रोजेक्ट को बनाते टाइम हमें ध्यान रखनी होती है तो हम शुरुआत करने वाले हैं एंड प्रोजेक्ट में हम बनाने वाले हैं amazononline.in डट इ को नहीं ट इ यानी amazon.com यानी उसका जो ग्लोबल वर्जन है उसको कॉपी करेंगे तो वैसे तो वेब पेज या वेबसाइट बहुत ही बड़ी होती है क्लोन करने के लिए पर हम क्या करेंगे इसके जो मोस्ट इंपॉर्टेंट पार्ट है जो यानी यूआई को फाइनल एक असली वेबसाइट जैसा लुक देते हैं हम उन चीजों को रेप्ट करने वाले हैं उन चीजों को थोड़ा सा कॉपी करने वाले हैं और ये डेफिनेटली एक अच्छे साइज का फ्रंट एंड फ्रंट एंड इन द सेंस एटीएमएल और सीएसएस बेस्ड प्रोजेक्ट होने वाला है जिसको आप अपने रिज्यूमे के अंदर डाल सकते हैं इनफैक्ट जितना हम आज प्रोजेक्ट को करेंगे उसमें आप चाहे तो और ज्यादा पेजेस को ऐड करके उसको एक और बड़े लेवल के प्रोजेक्ट में कन्वर्ट कर सकते हैं तो शुरुआत करते हैं अपने प्रोजेक्ट की अब प्रोजेक्ट की शुरुआत से पहले एक काफी इंपॉर्टेंट कांसेप्ट है जिसको हम डिस्कस करने वाले हैं वो है हमारे आइकंस अब आइकंस हमने कई बार वेबसाइट्स के ऊपर देखे होंगे बहुत डिफरेंट डिफरेंट तरीके के आइकंस अवेलेबल होते हैं जैसे सर्च के लिए यहां पर ये वाला मैग्नीफाइंग ग्लास वाला आइकन अवेलेबल है अगर मैं कार्ट की बात करूं तो कार्ट का अपना एक अलग आइकन है मैप की बात करें तो मैप के लिए ये आइकन है एंड एक वेबसाइट के ऊपर मल्टीपल आइकंस अवेलेबल होते हैं जैसे यहां पर इंग्लिश के सामने ये ग्लोब का आइकन लगा हुआ है यूएसडी यहां डॉलर के सामने यह डॉलर का आइकन लगा हुआ है इस तरीके से एक वेबसाइट के ऊपर कई सारे आइकंस हैं जो यूज़ होते हैं तो अभी तक हमने इतना नहीं पढ़ा है कि आइकंस को कैसे वेबसाइट के ऊपर डिस्प्ले कराते हैं बट एक वेबसाइट है जिसको काफी ज्यादा फ्रीक्वेंसी इट के ऊपर डिस्प्ले कराने के लिए इस वेबसाइट का नाम है फ ऑम तो हम क्या कर सकते हैं हम सिंपली जाके सर्च करेंगे फॉन्ट ऑसम एंड यह जो वेबसाइट है यह एक्चुअली फॉट्स आइकंस काफी सारी चीजें हमें देती है और कुछ-कुछ फीचर्स इसके पेड भी हैं कई सारे आइकंस पेड भी हैं पर हमें पेड आइकंस को यूज नहीं करना हम क्या करेंगे कंप्लीट फ्री आइकंस को यूज़ करने वाले हैं तो हम जाएंगे यहां पर आइकंस वाले बटन पर एंड यहां पर हम फ्री एंड ओपन सोर्स आइकंस को क्लिक कर सकते हैं तो इस तरीके के कई सारे डिफरेंट आइकंस है जिनको हम बिना किसी परेशानी के अपनी वेबसाइट के ऊपर डिस्प्ले करा सकते हैं यह मेरा हाउस का आइकन हो गया यह मैग्नीफाइंग ग्लास का आइकन हो गया जो बिल्कुल सिमिलर है मेरे amazonbusiness.in को प्राइमर हम यूज करने वाले हैं अपनी वेबसाइट के ऊपर आइकंस को दिखाने के लिए अब अपने प्रोजेक्ट की शुरुआत करने के लिए हमने क्या किया है हमारी जो क्लासरूम वाला फोल्डर था उसके अंदर हमने एक index.htm फाइल बनाई है जो भी कंप्लीट खाली है एंड एक style.css फाइल बनाई है जो भी अभी कंप्लीट खाली है इसके अलावा हमने कुछ-कुछ फोटोज हैं जो अपने फोल्डर के अंदर पहले से ही डाल के रख रखी हैं जिनको हम अपने वेब पेज को बनाने के लिए यूज करने वाले हैं जैसे हमने बॉक्स वन बॉक्स टू मतलब डिफरेंट डिफरेंट बॉक्सेस में हम किस तरीके की इमेज ऐड करेंगे हीरो सेक्शन की इमेज हीरो सेक्शन कहने का मतलब है कि यह वाला जो मेन सेक्शन होता है amazonbusiness.in सेव इमेज तो अगर मैं इमेज को सेव करना चाहूं तो मैं इमेज को सेव भी कर सकती हूं ऐसे मैंने कर दिया क्लिक एंड ये क्या हुई ये इमेज डाउनलोड हो गई क्या इमेज डाउनलोड हुई है बेसिकली वही सेम इमेज डाउनलोड हुई है जो मुझे यहां के हीरो सेक्शन में दिख रही है तो हम चाहें तो सिंपली amazon-cognito-identity-js वहां से जाकर आप भी उनको सिंपली बस डाउनलोड करके खोल सकते हैं मतलब कोई परेशानी की बात नहीं है सिंपली आप डाउनलोड कर सकते हैं एक-एक इमेज डाउनलोड करने से वह आपके लिए बेहतर प्रोसेस रहेगा तो सारी इमेजेस को हमने अपने फोल्डर के अंदर डाल रखा है अभी हमारे फोल्डर का नाम क्लासरूम है आप चाहें तो उसको प्रोजेक्ट नाम दे सकते हैं आप चाहे तो इसको amazon.ca फाइल पर अब सबसे पहले प्रोजेक्ट के साथ शुरुआत करने से पहले हम आइकंस को यूज़ करना थोड़ा सा सीख लेते हैं क्योंकि हम कई सारे आइकंस को अपनी वेबसाइट में लगाने वाले हैं अभी क्या करेंगे एक्सक्लेमेशन मार्क करके हमारा जो बॉयलर प्लेट कोड होता है उसको जनरेट करेंगे एंड हम इसे टाइटल दे देते हैं amazononline.in style.css फाइल का नाम इस तरीके से मेरी style.css फाइल मेरे पास लिंक होकर आ जाती है अब वैसे ही आइकन को यूज करने से पहले हमें इस फंट ऑसम को अपने कोड के साथ लिंक करना पड़ेगा तो उसके लिए हम कोई एक चीज सर्च करते हैं व्हिच इज सीडीए फसम और बेसिकली हम इस लिंक पर जा रहे होंगे cdn3 एस क्या है सीडीएन जावास्क्रिप्ट एक ऐसी वेबसाइट है जिसके अंदर कई सारी लाइब्रेरीज है जिसमें से फंट की जो लाइब्रेरी है उसको हम यूज़ करने वाले हैं अब सीडीएन का बेसिक मतलब होता है कंटेंट डिलीवरी नेटवर्क इसको मैं आपको थोड़ा सा लिख कर भी बता देती हूं कंटेंट डिलीवरी नेटवर्क क्या होता है कंटेंट डिलीवरी नेटवर्क बहुत ही आसान भाषा में समझें कि वर्ल्ड में बहुत सारे डिफरेंट डिफरेंट कंप्यूटर्स हैं या सर्वर्स हैं जिनके पास सिमिलर डाटा है तो कंटेंट डिलीवरी नेटवर्क क्या करता है जो आपकी लोकेशन है उसके सबसे नियरेस्ट सर्वर को आपके साथ कनेक्ट कर देता है ताकि अगर आपको कोई इमेज चाहिए कोई वीडियो चाहिए कोई आइकन चाहिए तो सबसे पास वाला सर्वर आपको वो आइकन लाकर दे दे राद देन कि सबसे दूर वाले सर्वर से आप ले रहे हैं क्योंकि जितने पास आपका जो भी सर्वर जहां से आप पूरा का पूरा डाटा ले रहे हैं पास होगा उतना जल्दी आपकी वेबसाइट के ऊपर वो सारा डाटा दिखना शुरू होगा एंड उतना फास्टर आपकी वेबसाइट बनेगी तो ये बेसिक मतलब होता है एंड जो हमारा कंटेंट डिलीवरी नेटवर्क होता है वो कई सारी चीजों के लिए इंप्लीमेंट होता है जो हमारी वीडियोस हम देख रहे होते हैं इनफैक्ट जो अभी आप ये वीडियो देख पा रहे हैं ये भी कंटेंट डिलीवर री नेटवर्क की वजह से पॉसिबल हो पा रहा है तो कंटेंट डिलीवरी नेटवर्क के अंदर हम क्या चाहते हैं फंट ऑसम यह जो लाइब्रेरी है इसको हम अपनी फाइल के अंदर इंक्लूड करना चाहते हैं तो हम क्या करेंगे इस लिंक पर जाकर क्लिक करेंगे तो ये मेरा कॉपी लिंक टैग इसको मैंने किया कॉपी एंड हम क्या करेंगे अपनी style.css के ऊपर जाकर इसे कर देंगे पेस्ट तो डिफरेंट डिफरेंट चीजें इसके अंदर आई हैं ये है लिंक रिलेशन क्या है स्टाइल शीट तो बेसिकली एक सीएसएस फाइल ही है जो हमारी सिस्टम में नहीं है किसी क्लाउड में कहीं पर है बस उसकी स्टाइल डॉट सीएसएस को हम यूज़ करने की कोशिश कर रहे हैं यह उस फाइल का लिंक आ गया है एंड लास्ट में आप देखेंगे डॉट सीएसएस ही है मतलब कोई सीएसएस फाइल है जिसको हमने इंक्लूड किया है इसका नाम है . min.css यह इंटीग्रिटी के लिए कुछ-कुछ चीजें यहां पर लिखी हुई है हम इनके अभी ज्यादा डिटेल में नहीं जाएंगे बट बेसिकली एक और सीएसएस फाइल को हमने इंक्लूड कर दिया तो दो फाइलों को कैसे इंक्लूड करते हैं कुछ इस तरीके से इसको अब अगर हम कर ले सेव और अगर अपनी index.htm को जाकर ब्राउजर के अंदर खोलें तो हमारी index.htm अभी खाली है बट हम चाहते हैं कि इसके अंदर हम कोई आइकन डिस्प्ले कराएं तो हम क्या कर सकते हैं फंट ऑसम पर जाकर आइकंस के अंदर हम कोई भी आइकन ढूंढ सकते हैं जैसे मान लेते हैं मुझे हार्ट का आइकन डिस्प्ले करवाना है और ये ऑलरेडी एक फ्री आइकन है क्योंकि यहां पर फ्री का साइन है तो इस पर क्लिक करेंगे क्लिक करने के बाद कुछ ऐसी विंडो हमारे पास अपीयर होगी इस विंडो के अंदर यहां पर html5 होंगे बट हम क्लिक करने से क्या होगा ये पूरी की पूरी जो लाइन है हमारे लिए कॉपी हो जाएगी इसको कॉपी करके हम यहां पर कर सकते हैं पेस्ट ये आइकन के लिए आई का टैग आ गया क्लास क्या आई एफ ए रेगुलर एफ ए हार्ट तो बेसिकली फंट ऑसम की बाय डिफॉल्ट क्लासेस हैं जिनकी वजह से आइकंस अपीयर होते हैं आइकंस कैसे अपीयर होते हैं वो शेप कैसे आई हार्ट की वो ऑलरेडी इस सीएसएस फाइल के अंदर इंक्लूडेड है जो हमने लिखी हुई है इसको अब कर लेते हैं सेव एंड अब जाकर करें अगर रिफ्रेश तो हमारी स्क्रीन पर क्या होगा थोड़ा सा ज़ूम इन करें तो यह हार्ट का आइकन मुझे दिखा दिखाई दे रहा है तो हम अपनी amazon-in जेएस का भी लिंक हटा देते हैं एंड शुरुआत करते हैं कि कैसे हम इस amazonbusiness.in क्लोनिंग तो होम पेज जो है उसको हम क्लोन करने वाले हैं होम पेज को क्लोन करने के लिए सबसे पहले शुरुआत करेंगे हम अपने वव बार के साथ नव बार कौन सा हिस्सा होता है वेबसाइट का सबसे ऊपर वाला हिस्सा होता है सबसे ऊपर इन द सेंस ये वाला जो मेरा टॉप वाला बार है अब ऐसा ही सिमिलर नाव बार हमने पहले भी बनाया है एज एन एक्टिविटी बट वो बहुत ही बेसिक लेवल पर था हम क्या कर रहे हैं उससे काफी अच्छे लेवल का एक नाफ बार अभी क्रिएट करेंगे एंड उसको क्रिएट करने के लिए थोड़ा सा हम एनालाइज करते हैं इस वेबसाइट को यहां पर एक नाव बार है और नाव बार के अंदर डिफरेंट डिफरेंट कंपोनेंट्स है जैसे यह मेरा amazon2 इसको हम कह सकते हैं जिसमें काफी सारी डिफरेंट चीजें हैं ये मेरा सर्च ऑप्शन आ रहा है य मेरा बटन आ रहा है ये मेरा सेलेक्ट आ रहा है सिलेक्ट यानी जिसको क्लिक करने से हम कई सारे ऑप्शंस को सिलेक्ट कर सकते हैं इसके अलावा मेरे पास कुछ-कुछ ये ये ऑप्शंस आ रहे हैं कार्ट का ऑप्शन आ रहा है तो इन सारे ऑप्शंस को हम रीक्रिएट करने वाले हैं तो शुरुआत करते हैं अपने बॉडी टैग के अंदर एक हेडर के साथ यानी अपने हेडर टैग के अंदर हम अपने नाव बार को क्रिएट करना स्टार्ट करेंगे तो सबसे पहले एक डिव बनाते हैं जिसका नाम होगा f बार अब सबसे पहले क्या करेंगे इस f बार को हम कुछ-कुछ प्रॉपर्टीज देने वाले हैं तो अपने प्रॉजेक्ट की शुरुआत से पहले दो-तीन चीजें हैं जो हम करने वाले हैं सबसे पहले तो हम सारी की सारी जो मार्जिन है उसको ज़ीरो पे सेट कर देंगे ताकि बाय डिफॉल्ट कोई एक्स्ट्रा मार्जिन हमारे एलिमेंट्स को ना मिले और सारी की सारी मार्जिन हम ही सेट कर रहे हो दूसरी चीज हम एक फॉन्ट फैमिली डिफाइन कर लेते हैं तो हम क्या करेंगे एरियल फॉन्ट फैमिली के साथ जाने वाले हैं ऑल दो amazonbusiness.in कंपनी का बनाया हुआ ही कोई फंट है जिसका नाम है amazonflex.in कंपनीज के अंदर यूज़ होते हैं अब एगजैक्टली फॉन्ट हमें कहां से मिलेगा उसको ढूंढने से अच्छा है कि हम कोई और फॉन्ट स्टाइल देख लें तो हमने एरियल फॉन्ट स्टाइल सेट कर दिया है अपने प्रोजेक्ट के लिए जिसमें कोई परेशानी नहीं है वेबसाइट हमारी सिमिलर सी ही दिखने वाली है अब इसके बाद एक इंटरेस्टिंग सा प्रॉपर्टी टैग है जिसको हम यूज़ करेंगे जिसका नाम है बॉर्डर एंड इसकी वैल्यू हम रखेंगे बॉर्डर बॉक्स बॉर्डर बॉक्स क्या करता है बॉर्डर हमने ऑलरेडी सुना हुआ है मैं बाय डिफॉल्ट टू पिक्सल सॉलिड ब्लैक सेट करती हूं आपका अपना कोई मनपसंद वैल्यू होगी जिसको आप अभी तक सेट कर रहे आ रहे होंगे बट बॉर्डर को जब हम बॉर्डर बॉक्स वैल्यू दे देते हैं इसका एक स्पेसिफिक मतलब होता है इसका मतलब होता है कि जितनी भी पैडिट को मिले या जितना भी बॉर्डर साइज उस एलिमेंट को मिले वो साइज उसकी हाइट और विड्थ के अंदर काउंट होना चाहिए यूजुअली एक एलिमेंट होता है जिसके कंटेंट की हम कोई हाइट सेट करते हैं कोई विड्थ सेट करते हैं और जब भी हम उसे बॉर्डर देते हैं वो बॉर्डर कहां पर ऐड होता है उस हाइट विड्थ के बाहर वाले एरिया में ऐड होता है बट हम चाहते हैं कि जितनी भी हमने हाइट और विड्थ सेट की है उसी के अंदर बॉर्डर एरिया काउंट हो मतलब अगर अगर हमने बॉर्डर बढ़ा दिया तो कंटेंट एरिया छोटा होना चाहिए पैडिट बढ़ा दी तो कंटेंट एरिया के अंदर इंक्लूडेड होनी चाहिए ये बेसिकली एक अच्छा तरीका होता है स्पेस को मेजर करने का आप चाहे तो इसको स्किप भी कर सकते हैं उस हिसाब से हमें थोड़े बहुत चेंजेज करने पड़ेंगे बस इससे कोई मेजर इतना ज्यादा डिफरेंस नहीं आ रहा होगा हमारे कोड के अंदर बट इट इज अ गुड प्रैक्टिस अगर हम ये चीज किसी भी मेजर प्रोजेक्ट के साथ लिखते हैं तो अब हम शुरुआत करने वाले हैं अपने नाव बार के साथ यानी नाव बार को कुछ-कुछ हम प्रॉपर्टीज देंगे तो यहां पर क्लास मैंने उसे दी है नाव बार तो ना बार क्लास के लिए सबसे पहले तो n बार की हम हाइट सेट करेंगे एक डिव है तो उसको हम हाइट देने वाले हैं एक बार देख लेते हैं netfx3 * 60 लिखा हुआ है 19 * 60 लिखा हुआ है तो दिस इज बेसिकली 60 पिक्सल्स हम क्या कर सकते हैं सेम 60 पिक्सल्स ही दे सकते हैं अब इस का अगर बैकग्राउंड कलर मुझे सेट करना हो तो बैकग्राउंड कलर के लिए जाकर या तो हम इंस्पेक्ट कर सकते हैं किसी भी वेबसाइट का क्लोन अगर हमें बनाना हो हम अपने बैकग्राउंड कलर होता है वो विजिबल होता है जैसे यहां पर ये मुझे बैकग्राउंड कलर दिख रहा है 0f 11111 अब अगर ऊपर वाले का बैकग्राउंड कलर हम देखना चाहे तो यहां पर स्क्रॉल करने से मुझे वही ऊपर वाले नेविगेशन बार का भी दिखाई दे रहा है व्हिच इज 0f 11111 तो हम क्या कर सकते हैं सिंपली यही बैकग्राउंड कलर हम सेट कर सकते हैं नहीं तो एक और शॉर्टकट तरीका होता है जिसको मैं यूजुअली अप्लाई करती हूं हम क्या कर सकते हैं कई सारी ऐसी वेबसाइट्स होती हैं जो हमें कलर पिकर दे देती है यानी आप कोई भी एलिमेंट ले तो उसमें से आप कलर पिक करके के निकाल सकते हैं वो वेबसाइट्स कि क्या कलर है तो ऐसी मैं एक वेबसाइट यूज़ करती हूं कवा तो आप कवा को जाकर एक्सप्लोर कर सकते हैं उसका कलर पिकर आप यूज़ कर सकते हैं नहीं तो सबसे आसान तरीका यही होता है इंस्पेक्ट करो आप एलिमेंट्स पर जाओ एंड कहीं ना कहीं वो बैकग्राउंड कलर हमें डिस्प्ले होकर दिखाई दे जाएगा अब यहां जैसे हमें कलर दिखाई दे रहा है अपने नेविगेशन बार का ऑल दो इस पूरी वेबसाइट के जो मेजर कलर्स हैं उनको हमने ऑलरेडी इंस्पेक्ट करके रख रखा है तो आपको ज्यादा परेशानी नहीं होगी हम साथ के साथ कलर्स को डिस्कस करेंगे अब यहां पर ये मेरा बैकग्राउंड कलर हो गया इसको अगर सारे के सारे टेक्स्ट की बात करें क्योंकि बैकग्राउंड डार्क है तो टेक्स्ट को हमने क्या रखा है टेक्स्ट को हम रख लेते हैं वाइट तो टेक्स्ट को वाइट रख लेते हैं इसको करते हैं सेव रिफ्रेश तो मेरी जो वेबसाइट है उसका यह मेरा नेविगेशन पैनल हो गया यह मेरा नाव बार हो गया एंड इसके ऊपर हम सारा का सारा जो काम है उसको करने वाले हैं कंप्लीट अब ना बार के अंदर हम एक-एक चीज को ऐड करना स्टार्ट करेंगे सबसे पहले ऐड करेंगे हम इस लोगो को तो लोगो को ऐड करने के लिए index.htm में हम एक डिव क्रिएट करने वाले हैं जिसको हम नाम देंगे लोगो तो नाव बार के जितने भी मेजर डिब्स होंगे उनके सामने हम वव लिख सकते हैं ताकि पहचानने में आसानी हो कि ये वव बार के पार्ट है या वव बार के कंपोनेंट्स हैं अब नाव लोगो के अंदर जाकर हम एक और डेव क्रिएट करेंगे जिसको हम क्लास देंगे लोगो जिसके अंदर हम एक्चुअल लोगो को ऐड करने वाले हैं अब इस लोगो के अंदर सबसे पहले तो बैकग्राउंड इमेज की तरह अपने लोगो को ऐड कर देते हैं यानी मैं क्या करूंगी मैं लिखूंगी बैकग्राउंड इमेज एंड बैकग्राउंड इमेज में यूआरएल में लिख देंगे हम अपने amazononline.in यहां लिखेंगे amazononline.in हैं व्हिच इज इक्वल टू 50 पिक्सल्स एंड सेम हाइट हम यहां पर दे देते हैं लेट्स सपोज वी गिव इट 50 पिक्सल्स इसे करते हैं सेव रिफ्रेश इसके साथ-साथ यहां पर विड्थ भी देनी पड़ेगी हाइट दे दी विड्थ भी देनी पड़ेगी विड्थ हम कितनी रखने वाले हैं हमारे लोगों की विड्थ जो है यहां पर 113 के आसपास दिखा रहा है हम उसको एप्रोक्सीमेटली 100 पिक्सल्स के आसपास रख सकते हैं तो क्लोन का बेसिक मतलब यही होता है कि वो एक कॉपी है तो सारी चीजें बिल्कुल एगजैक्टली सेम होना जरूरी नहीं है बट हां वो लुक एंड फील थोड़ा सा सिमिलर होनी चाहिए बाकी छोटे-मोटे मेजर चेंजेज अगर होंगे तो वो बिल्कुल एक्सेप्टेबल होते हैं एंड अपने लोगों को हम एक विड्थ देने वाले हैं जो होने वाली है 100% इसके साथ-साथ अपनी एक बैकग्राउंड साइज प्रॉपर्टी रख लेते हैं लेट्स सपोज हमने कवर रखा सेव रिफ्रेश तो इस तरीके से मेरा amazonbusiness.in साइजिंग दिखानी है तो इसे 100% कर लेते हैं तो बेसिकली पूरी जो वेबसाइट है उसके ऊपर स्क्रीन के ऊपर ये कुछ इस तरीके का मुझे दिखाई देगा अब एक और चीज हम यहां पर करने वाले हैं जब भी हम अपनी amazononline.in यानी लोगों का जो नाव लोगो है उसे क्लास दे देंगे बॉर्डर बॉर्डर हमने इसे क्लास दे दी एंड बॉर्डर क्लास के लिए कुछ-कुछ चीजें हैं जो हम स्पेसिफाई करेंगे बॉर्डर क्लास में हम चाहते हैं कि जिस-जिस एलिमेंट को बॉर्डर क्लास मिले यानी जिस-जिस एलिमेंट को हम स्क्रोल करना चाहते हैं चाहे हम इसको स्क्रोल करें इसको स्क्रोल करें इसको स्क्रोल करें उन सारे के सारे एलिमेंट्स के पास ऑलरेडी एक ट्रांसपेरेंट बॉर्डर होना चाहिए तो ऑलरेडी सारे एलिमेंट्स को एक टू पिक्सेल सॉलिड ट्रांसपेरेंट ट्रांसपेरेंट यानी उसका कोई कलर नहीं है जो बैकग्राउंड का कलर वही बॉर्डर का कलर होगा इसको अगर सेव कर दिया और मैंने नव लोगो को बॉर्डर दे दिया तो क्या होगा रिफ्रेश करेंगे तो कुछ नहीं होगा अभी क्या है बॉर्डर ट्रांसपेरेंट है तो कुछ दिखाई नहीं देगा बट जैसे ही बॉर्डर को हर किया जाएगा यानी जैसे ही हम बॉर्डर को हर कर लेंगे वैसे ही मेरा बॉर्डर दिखने लगेगा कितना दिखने लगेगा लेट्स मेक इट टू पिक्सेल सॉलिड वाइट तो मेरा बॉर्डर वाइट कलर का दिखेगा सेव रिफ्रेश तो जैसे ही हर करेंगे क्या क्या हो रहा है अब मुझे बॉर्डर दिखना स्टार्ट हो रहा है हम चाहे तो इसे थोड़ा सा छोटा भी कर सकते हैं 1.5 पिक्सल्स भी कर सकते हैं तो ये क्या होगा थोड़ा सा और छोटा मुझे दिखाई देगा बट इस तरीके से हम अपने बॉर्डर को क्रिएट कर सकते हैं 1.5 करेंगे तो यहां भी 1.5 कर सकते हैं तो एलिमेंट्स मूव नहीं होंगे तो इस तरीके से जब हम हर करेंगे तो मेरे लोगो के अराउंड मुझे मेरा पूरा का पूरा बॉर्डर और वो हर इफेक्ट सेम तरीके से सेम तो नहीं बट सिमिलर तरीके से हम क्रिएट कर सकते हैं अब आ जाते हैं अपने नेक्स्ट लिमिट की तरफ जो होने वाला है ये इसको हम कह सकते हैं अपना बॉक्स टू अब अगर इस बॉक्स टू को हम इंस्पेक्ट करें तो इसमें एक हमारे पास लोगो है लोकेशन के लिए ऊपर हमारे पास डिलीवरी टू लिखा हुआ है नीचे इंडिया लिखा हुआ है एंड एक छोटी सी चीज मैं आपको अर्ज करूंगी नोटिस करने के लिए इसे रिफ्रेश करते हैं एक बार यहां पर ये जो डिलीवर टू और जो इंडिया लिखा हुआ है दोनों का फॉन्ट साइज अलग-अलग है हम चाहे तो इसको इंस्पेक्ट करके चेक भी कर सकते हैं वेरीफाई करने के लिए क्या करेंगे इंस्पेक्ट करके जो डेवर टू का फॉन्ट साइज है वो है 12 पिक्सल्स और इंडिया का फॉन्ट साइज है 14 पिक्सल यानी दोनों में डिफरेंस है ऊपर वाला फॉन्ट छोटा है नीचे वाला बड़ा है तो काफी मतलब एक तरीके से दो अलग-अलग लाइनें हमें चाहिए होंगी टेक्स्ट के लिए तो हम क्या करेंगे एक और डिव बनाते हैं अपने नाव बार के अंदर इस डिव को हम नाम देंगे वव एड्रेस इसको कह देते हैं एड्रेस क्योंकि यहां पर डिलीवर टू इंडिया यानी कुछ एड्रेस करने को हमें बोल रहा है नाव एड्रेस के अंदर सबसे पहले तो हम एक पैराग्राफ ऐड कर देते हैं पैराग्राफ के अंदर लिखने वाले हैं डिलीवर एंड इसके अलावा ये जो मेरा लोकेशन का आइकन है एंड जो इंडिया है ये दोनों सेम लाइन पर दिख रहे हैं तो हम क्या करेंगे इनके लिए एक एड्रेस आइकन नाम की क्लास को हम क्रिएट करने वाले हैं डॉट एड्रेस आइकन तो ये मेरा डिव हो गया इसके अंदर दो कॉम्पोनेंट्स आएंगे सबसे पहले तो हमें एक आइकन लिखना है तो आइकन मेरा कुछ यहां पर आएगा फर्स्ट लाइन में एंड सेकंड लाइन में दोबारा एक पैराग्राफ टैग के अंदर हम लिख सकते हैं इंडिया अब आइकन हमें पता है कैसे इंक्लूड करना है आइकन के लिए ऑलरेडी हमने ऊपर अपना फंट ऑसम का लिंक इंक्लूड कर रखा है अब फंट ऑसम पर जाएंगे हमें कौन सा आइकन चाहिए हमें चाहिए यह लोकेशन का आइकन तो लोकेशन के आइकन के लिए हम सर्च कर सकते हैं लोकेशन एंड ये कई सारे डिफरेंट आइकंस हमें डिस्प्ले होंगे अब सबसे जो सिमिलर आइकन है हमारे इसके लिए वह कुछ ऐसा दिखाई दे रहा है हमें हर बार एगजैक्टली सेम आइकंस नहीं मिलेंगे बट मिलते-जुलते से आइकंस को हम यूज करेंगे तो इसको कर लेते हैं कॉपी एंड क्योंकि एग्जैक्ट सेम तो ऑब् वियस ने खुद ही डिजाइन किए होंगे या खुद ही कहीं से उन्होंने कॉपीराइट खरीदा होगा या कुछ किया होगा तो यह मेरा लोकेशन का आइकन आ गया इसको कर लेते हैं सेव एंड स्टाइल ड सीएसएस को भी कर लेते हैं सेव एंड एक बार रिफ्रेश तो यहां पर नीचे की तरफ मुझे कुछ कुछ चीजें दिखाई दे रही है डिलीवर टू इंडिया आइकन यहां पर यह चीजें दिखाई दे रही है अब हम इन चीजों को ऊपर नाव बार में ऊपर की तरफ शिफ्ट करने वाले हैं अगर नाव बार में ऊपर की तरफ हमें चीजों को शिफ्ट करना है तो हम क्या कर सकते हैं अगर मेरे पास मल्टीपल डिब्स है ना बार के अंदर और मुझे चाहिए कि इसी वव बार के अंदर सारे के सारे सेम लाइन पर आए तो हम एक तरीके से अपने नाव बार को डिस्प्ले फ्लेक्स दे सकते हैं जैसे ही मैंने इसे डिस्प्ले फ्लेक्स दिया वैसे ही क्या होगा सारी चीजें सेम लाइन में आना स्टार्ट हो जाएंगी क्यों क्योंकि सारे बॉक्सेस एक सिमिलर लाइन में आते हैं एंड बाय डिफॉल्ट रो है वो लाइन तो लेफ्ट से राइट मेरा मेन एक्सेस हो जाएगा तो वही सारे कांसेप्ट जो हमने फ्लेक्स बॉक्स के अंदर सीखे थे उन सभी को हम यहां पर देख पा रहे हैं तो ये मेरा डिलीवर टू ये मेरा आइकन आ गया यह मेरा इंडिया आ गया अब यहां पर चेंजेज करेंगे और थोड़ा सीएसएस इस को ऐड करेंगे अब ये जो फर्स्ट एंड सेकंड पैराग्राफ है क्योंकि इन दोनों को हमें अलग-अलग स्टाइल देना है अलग-अलग स्टाइल कैसे देना है क्योंकि ऊपर वाले का फॉन्ट छोटा है नीचे वाले का फॉन्ट बड़ा है एंड इसके साथ-साथ एक और स्पेशल चीज ऊपर वाले का कलर भी अलग है इसका कलर अगर आप इंस्पेक्ट करेंगे तो डबल सी डबल सी डबल सी है नीचे वाले का कलर वाइट है तो इसीलिए ऊपर नीचे वाले को हमें स्टाइलिंग अलग-अलग देनी पड़ेगी दोनों पैराग्राफ्स टैग को तो इनको अलग-अलग क्लास दे देते हैं पहले हम पहले वाला जो पैराग्राफ टैग है इसको क्लास दे देते हैं लेट्स गिव इट एड्रेस फर्स्ट फॉर द लैक ऑफ बेटर नेम आप चाहे तो और भी कोई बेटर नाम इसको दे सकते हैं एंड इसको हम दे देते हैं एड्रेस सेकंड एक को एड्रेस फर्स्ट मिल गया एक को एड्रेस सेकंड मिल गया इस तरीके से अब हम क्या करेंगे स्टाइल ड सीएसएस के अंदर अपने इस बॉक्स टू के लिए स्टाइलिंग ऐड करेंगे यहां पर एक छोटा सा कमेंट लिख लेते हैं सेे कह देते हैं बॉक्स टू एंड अब बॉक्स टू का स्टाइल ऐड करने के लिए हम सबसे पहले स्टाइलिंग ऐड करेंगे फॉर माय एड्रेस फर्स्ट एंड फॉर माय एड्रेस सेकंड क्योंकि इनके लिए ऐड करना बहुत आसान होगा तो पहले लिख लेते हैं एड्रेस फर्स्ट उसके बाद लिख लेते हैं एड्रेस सेकंड एड्रेस फर्स्ट के लिए क्या है सबसे पहली जो चीज है वो इसका कलर इसके लिए कलर सेट कर लेते हैं कलर इसके लिए होने वाला है श ड सीड सी ड सी एंड एड्रेस सेकंड के लिए कलर ऑलरेडी वाइट एड्रेस सेकंड का तो इसको अलग से कलर देने की जरूरत नहीं है अब हमें इनके फॉन्ट साइजेस ऐड करने हैं तो हम जितने भी फॉन्ट साइज होंगे ना वो कोशिश करेंगे रेम में ऐड करने की रेम इज बेसिकली रट m यानी मेरा जो रूट का फॉन्ट साइज है उसके कंपैरिजन में सारे के सारे फॉन्ट सेट होंगे ये चीज ये प्रैक्टिस हम इसलिए फॉलो कर रहे हैं क्योंकि हम चाहते हैं हमारी वेबसाइट थोड़ी सी रिस्पांसिस भी बने कि जैसे जैसे विड्थ कम हो रही है वैसे-वैसे फॉन्ट साइज भी कम होते जाए तो उस केस के लिए हम फॉन्ट साइज को रेम की टर्म्स में ऐड करेंगे इंस्टेड ऑफ़ डिंग इट इन द टर्म्स ऑफ़ पिक्सल्स लेट्स सपोज दोनों का अगर हमने वन रेम ऐड कर दिया इसको करेंगे सेव रिफ्रेश तो वन रेम कुछ ऐसा दिखाई देता है यह भी कलर वाइट है ये मेरा कलर ग्रेइश है अब हम चाहते हैं डिलीवर टू का फॉन्ट साइज थोड़ा छोटा हो तो हम इसे लेट्स से 0.85 के आसपास दे सकते हैं तो ये क्या हुआ डिलीवर टू थोड़ा सा छोटा हो गया फॉन्ट साइज में एंड फिर मेरे पास आ गया मेरा इंडिया जो साइज में थोड़ा बड़ा है अब इसके अलावा हम चाहते हैं मेरा ये जो आइकन और इंडिया है दोनों सेम लाइन पर आ जाए तो हमने एक ट्रिक सीखी थी चीजों को सेम लाइन पर आने के लिए कि अगर दोनों चीजें एक ही सिंगल डेव के अंदर कंटेनर के अंदर एजिस्ट करती है तो उस कंटेनर को बना दो फ्लेक्स तो मेरा ये जो एड्रेस आइकन है इस क्लास को हम बनाने वाले हैं फ्लेक्स डॉट एड्रेस आइकन एंड इसको हम दे देंगे डिस्प्ले फ्लेक्स जैसे ही डिस्प्ले फ्लेक्स किया सेव किया रिफ्रेश किया यह क्या हो गया सेम लाइन पर आ गया अब हम चाहे तो इसे अलाइन आइटम सेंटर भी दे सकते हैं अलाइन आइटम सेंटर देने का क्या पर्पस है कि जो मेरा क्रॉस एक्सेस है यानी टॉप से लेकर बॉटम की तरफ उसके सेंटर में आ जाएंगे तो हाइट वाइज ये थोड़ा सेंटर की तरफ आ जाएंगे दोनों आइटम्स अब हम थोड़ा सा यहां पर निट पिकिन करेंगे यानी थोड़ी सी इनकी मार्जिन वगैरह सेट करेंगे यहां पर एक चीज अगर हम नोटिस करें ओरिजिनल जो amazonbusiness.in अराउंड 15 पिक्सल्स की मार्जिन दे दया हमने इसे तो ये थोड़ा राइट में शिफ्ट हो गया है हम इस इंडिया को भी थोड़ा सा लोकेशन वाले आइकन से मार्जिन दे सकते हैं तो यहां पर भी लेट्स से हमने इसे मार्जिन लेफ्ट दे दी अराउंड थ्री पिक्सल्स की मार्जिन हमने दे दी तो रिफ्रेश करने पर कोई चेंज नहीं आया एक बार अपनी क्लास का नाम थोड़ा सा चेक कर लेते हैं एड्रेस सेकंड है क्या क्लास का नाम यहां पर एससी हमने लिखा हुआ है इसको सेकंड करना था सेव रिफ्रेश तो अब क्या हुआ मार्जिन हमारे पास आकर सेट हो गई तो इस तरीके से ये हमारा फर्स्ट बॉक्स हो गया यह हमारा सेकंड बॉक्स हो गया अब आ जाते हैं अपने थर्ड बॉक्स की तरफ थर्ड बॉक्स करने से पहले एक और छोटी सी चीज है कि यहां पर यह जो चीज है ना यह थोड़ा सा नाव बार के सेंटर में नहीं आ रही तो उसके लिए हम क्या कर सकते हैं हमारा जो नाव बार है जिसको हमने डिस्प्ले फ्लेक्स दिया था उसके लिए अलाइन आइटम्स को हम कर सकते हैं टू सेंटर अलाइन आइटम सेंटर करने से क्या होगा जो हमारा क्रॉस एक्सिस है यानी टॉप से बॉटम की तरफ तो हमारे एलिमेंट सेंटर में प्लेस हो जाएंगे इसको करें सेव रिफ्रेश तो अब क्या हुआ सारे एलिमेंट सेंटर में आ गए अब सेंटर में एलिमेंट आ गए साथ के साथ हम क्या कर सकते हैं अपने इस बॉक्स टू को भी यानी अपने नाव एड्रेस को भी हम दे सकते हैं अपनी बॉर्डर क्लास सेव रिफ्रेश इसे भी क्या होगा एक बॉर्डर मिल जाएगा एंड इस पर हर करने से अब क्या होगा इसके ऊपर चीजें हर हो जाएंगी हम चाहे तो बॉर्डर जो हमने दिया है बॉर्डर बॉक्स जो क्रिएट किया है हर वाला इफेक्ट उसको और ज्यादा बेटर कर सकते हैं बट अभी थोड़ा सा सिमिलरिटी क्रिएट करने के लिए इतना काफी है अब अपने थर्ड बॉक्स की तरफ आ जाते हैं थर्ड बॉक्स क्या है ये मेरा पूरा का पूरा सर्च वाला है जिसमें पहले सिलेक्ट आता है फिर एक इनपुट आता है उसके बाद मेरा एक बटन आता है तो ये सारी चीजें हम करने वाले हैं नया डेव हम क्रिएट करेंगे जिसको हम नाम देंगे f सर्च ना सर्च नाम से हमने डिव क्रिएट कर लिया सबसे पहले तो एक सिलेक्ट ऑप्शन बनाएंगे ऑप्शन में हमें लिखना है यहां पर हमें ऑप्शन में ऑल दिया हुआ है तो हम ऑल लिख सकते हैं अपने ऑप्शन में यह सिलेक्ट हो गया सिलेक्ट के बाद यहां पर टी ऐड कर देते हैं सेलेक्ट के बाद हम ऐड करने वाले हैं एक इनपुट बॉक्स तो इनपुट बॉक्स हो गया एंड इनपुट बॉक्स के अंदर एक प्लेस होल्डर है प्लेस होल्डर में क्या लिखा हुआ है सर्च amazononline.in आइकन होता है या सर्च का आइकन भी इसको कह सकते हैं तो मैं सिंपली जाऊंगी ऊपर सर्च करूंगी सर्च एंड यह वाला आइकन है जिसको हम यूज कर सकते हैं इसको कर लिया कॉपी एंड यहां पे आके पेस्ट नाउ सेव एंड रिफ्रेश इस तरीके से मेरा आइकन भी आ गया अब इन्हीं तीनों चीजों को मुझे क्या करना है सेम लाइन पर लेकर आना है तो वही सेम चीज कर सकते हैं अपने ना सर्च को हम बना देंगे डिस्प्ले फ्लेक्स यहां पर आ जाते हैं अपनी स्टाइल सीएसएस के अंदर अब हम स्टाइल करने वाले हैं अपने बॉक्स ी को बॉक्स थ मैं किसे कह रही हूं बॉक्स थ बेसिकली हमारा जो amazon2 हो गया बॉक्स थ बॉक्स फोर बॉक्स फ इस तरीके से आसानी रहेगी चीजों को देखने में सेट करने में तो यहां पर सबसे पहले वव सर्च जो है उसके लिए हम कर देंगे डिस्प्ले फलेक्स ये सारे आइटम्स हमारी सेम लाइन पर आ जाएंगे एंड इसके अलावा आप छोटे-छोटे चेंजेज हम करने वाले हैं सबसे पहले तो अपनी और एडिशनल क्लासेस ऐड कर देते हैं जैसे इस सेलेक्ट को हम एक क्लास देने वाले हैं लेट्स मेक इट सर्च सिलेक्ट एंड यहां पर अपने इस इनपुट को हम एक क्लास देने वाले हैं इसको कह देते हैं सर्च इनपुट सेव तो नव सर्च यानी ओवरऑल जो हमारा नेविगेशन पैनल है इसको एक बार एक बैकग्राउंड कलर दे देते हैं लेट्स मेक इट पिंक ये बैकग्राउंड कलर देना जरूरी नहीं है बट इससे क्या होगा हमें चीजें दिखेंगी कि कितना बड़ा है हमारा सर्च वाला पैनल अब यहां पर अभी इंस्पेक्ट विंडो भी है तो उसके साथ भी 575 पिक्सल्स के आसपास इसकी विड्थ है पर इस विंडो को छोटा करेंगे तो ये काफी बड़ा है साइज में मतलब जो मैक्सिमम एरिया है अराउंड 600 625 पिक्सल्स इतना बड़ा एरिया जो मेरी स्क्रीन का है वो मेरा सर्च पैनल लेता है हम क्या कर सकते हैं इस पैनल को एक विड्थ दे देते हैं सबसे पहले तो हम इसे लेट्स सपोज एक विड्थ देते हैं 620 पिक्सल्स की आप चाहे तो 620 पिक्सल्स भी दे सकते हैं बट आई थिंक वो छोटा होगा क्योंकि ये काफी बड़ा एरिया ऑक्यूपाइड का तो इतना बड़ा एरिया हमने इसे दे दिया है इसके साथ-साथ हम इसे एक हाइट दे देते हैं यहां पर जाकर इंस्पेक्ट करें तो इसकी जो हाइट है करीबन 40 पिक्सल्स के आसपास है तो हम इसे हाइट दे सकते हैं फॉर 40 पिक्सल्स सेफ रिफ्रेश तो इतना हो जाएगा हाइट में आकर एंड एक और चीज हम नोटिस करेंगे यहां पे जो मेरा सर्च बार है ना amazonbusiness.in कॉर्नर्स बिल्कुल शार्प नहीं है तो हम इसे एक बॉर्डर रेडियस दे देते हैं हम थ्री पिक्सल्स दे सकते हैं फोर पिक्सल्स दे सकते हैं उसी के आसपास की बॉर्डर रेडियस होगी तो ये यहां से राइट साइड से कर्व हो गया लेफ्ट साइड से नहीं हुआ लेफ्ट साइड से क्यों नहीं हुआ क्योंकि लेफ्ट साइड पर हमें साथ के साथ इस सिलेक्ट को भी कर्व करना पड़ेगा कर्वड दिखाने के लिए तो वही सेम बॉर्डर रेडियस सिलेक्ट पर भी बट बेसिकली इस तरीके से कर्व्ड हमारे पास होना चाहिए अब क्या करेंगे अपने सिलेक्ट को सबसे पहले सेट करते हैं तो सिलेक्ट को हमने क्या क्लास दी थी सिलेक्ट को हमने क्लास दी थी सर्च सिलेक्ट तो लिखते हैं सर्च सिलेक्ट सर्च सिलेक्ट को कुछ-कुछ स्टाइलिंग हम ऐड करेंगे सबसे पहले तो सर्च सिलेक्ट के लिए एक जो बैकग्राउंड कलर है उसको चेक कर लेते हैं मेरे सर्च सिलेक्ट का जो बैकग्राउंड कलर है दैट इज f3 f3 f3 तो यहां से जाके इसे बैकग्राउंड कलर सेट कर देते हैं टू f3 f3 f3 सेव रिफ्रेश तो ये थोड़ा सा हल्का सा डार्कर हुआ आई बिलीव एंड इसके लिए अब कुछ कुछ और चेंजेज करेंगे जैसे सबसे पहले इसके लिए विड्थ देख ले विड्थ जो है मेरे सर्च सिलेक्ट के पास वह है अराउंड इसके पूरे बॉक्स मॉडल पर क्लिक करके भी देखा जा सकता है सर्च सिलेक्ट के पास अराउंड 45 पिक्सल्स की विड्थ है बट उसमें पांच पिक्सल्स की पैडिट भी डेड है और एक पिक्सल्स का इसे एक बॉर्डर टाइप दिया हुआ है तो हम क्या कर सकते हैं इसको विड्थ दे सकते हैं लेट्स से फाइ पिक्सल्स सेव रिफ्रेश फाइव की जगह हमें 50 पिक्सेल इसके लिए थोड़ा सा सेट करना पड़ेगा तो ये मेरा ऑल हो गया ऑल क्या है ऑल थोड़ा सा सेंटर में होना चाहिए क्योंकि मेरा जो सर्च है उसमें ऑल थोड़ा सा सेंटर में आता है तो उसके लिए हम टेक्स्ट अलाइन सेंटर कर सकते हैं टेक्स्ट अलाइन सेंटर जैसे ही किया ऑल क्या हो गया सेंटर में आ गया अब इसे भी अगर राउंडेड एजेस देने हैं तो सेम बॉर्डर रेडियस इसके लिए सेट कर सकते हैं सेम बॉर्डर रेडियस सेट की तो क्या हुआ इसके भी एजेस राउंडेड हो गए अब दोनों तरफ से मेरे पास राउंडेड एजेस आ गए हैं तो ये मेरा ऑल का ऑप्शन आ गया बट यहां पर ये जो बॉर्डर रेडियस है फोर पिक्सल्स ये क्या हुई चार कॉर्नर से सेट हो गई मुझे क्या करना है सिर्फ लेफ्ट यानी टॉप लेफ्ट और बॉटम लेफ्ट कॉर्नर के लिए सेट करनी है मैं अगर आपको थोड़ा जूम इन करके दिखाऊं तो मुझे इन कॉर्नर्स के लिए सेट नहीं करनी मुझे सिर्फ लेफ्ट वाले दो कॉर्नर्स के लिए सेट करनी है थोड़ी सी नेट पिंग हो जाएगी बट हम क्या कर सकते हैं बॉर्डर रेडियस की जगह हम लिख सकते हैं बॉर्डर टॉप लेफ्ट रेडियस और हम सेट कर सकते हैं बॉर्डर बॉटम लेफ्ट रेडियस सेफ रिफ्रेश अब अगर इसे थोड़ा सा जूम इन करें राइट वाला क्या है बिल्कुल सेट है स्ट्रेट है बट लेफ्ट में क्या है थोड़ी सी मेरे पास बाउंड्री आ गई है कर्व्ड बाउंड्री अब इसके अलावा एक और चीज हम करने वाले हैं यानी एक नई प्रॉपर्टी इसके लिए सेट करेंगे कि इसके बॉर्डर को हम सेट करने वाले हैं टू वैल्यू नन इसको करेंगे सेव एंड रिफ्रेश तो क्या होगा जैसे ही बॉर्डर को वैल्यू नन सेट करेंगे इसके लिए इसका बॉर्डर हट जाएगा यानी सिलेक्ट का जो बाय डिफॉल्ट बॉर्डर दिया होता है वो हमारे लिए कंप्लीट हटने वाला है इनफैक्ट इसको थोड़ा जूम इन ही कर लेते हैं और क्योंकि हम चाहते हैं कि ये जो मेरा सिलेक्ट है ये जो मेरा इनपुट है एंड ये जो जो मेरा आइकन है तीनों क्या हो इक्वली स्प्रेड हो जाए तो हम क्या करेंगे जहां पर डिस्प्ले फ्लेक्स हमने दिया है वहां पर दे सकते हैं जस्टिफाई कंटेंट इसे दे देंगे स्पेस इवनली क्योंकि हम चाहते हैं इवनली स्पेस हो मतलब ये राइट की तरफ हो जाए ये सेंटर में आ जाए ये मेरा लेफ्ट की तरफ आ जाए हमें क्या करना है अब इस इनपुट बॉक्स को हमें साइज में थोड़ा बड़ा करना है ताकि स्पेस बढ़ जाए बट बेसिक कांसेप्ट यही रहेगा कि सारी चीजें इवनली स्प्रेड होकर हमें दिखने लग जाए अब हमने अपने सिलेक्ट को स्टाइल कर दिया है नेक्स्ट हम स्टाइल करेंगे अपने इस सर्च इनपुट को तो सर्च इनपुट को स्टाइल करने के लिए हम क्लास का नाम लिखेंगे सर्च इनपुट अब सर्च इनपुट के लिए सबसे पहले तो इसकी विड्थ को सेट करते हैं विड्थ कितनी है विड्थ बेसिकली मैक्सिमम एरिया है यहां पर देखें तो अराउंड 475 पिक्सल्स आउट ऑफ 575 पिक्सल्स तो काफी ज्यादा जो एरिया है वो मेरा सर्च बार ही लेता है लेट्स गिव इट 500 पिक्सल्स सेव रिफ्रेश तो इस सर्च एरिया कुछ इस तरीके का मुझे दिखाई देगा नॉर्मल साइज में जाएंगे वेबसाइट के तो इतना बड़ा सर्च एरिया मेरे पास होगा हम चाहे तो एक और स्पेशल चीज ट्राई कर सकते हैं कि जितना भी खाली बचा हुआ एरिया हो ना वो सारा का सारा सर्च इनपुट को मिल जाए सेव रिफ्रेश तो ये क्या हुआ जितना भी बचा हुआ एरिया इसे अपने फ्लेक्स कंटेनर के अंदर मिल पाएगा उस सारे को ऑक्यूपाइड का और इस आइकन के लिए एरिया सेट करना पड़ेगा बाकी जो है सर्च ऑटोमेटिक ऑक्यूपाइड हम कर सकते हैं अब एक और स्पेशल चीज कि यहां पे जो सर्च amazononline.in लार्जर तो लार्जर है तो हम इसे फॉन्ट साइज थोड़ा सा बड़ा दे सकते हैं लेट्स गिव इट अ फॉन्ट साइज ऑफ वन रेम सेफ रिफ्रेश तो क्या हुआ सर्च amazon2 रिफ्रेश तो इससे क्या हुआ अब ये इक्वल साइज के आ गए पहले क्या था सेलेक्ट थोड़ा सा बड़ा लग रहा था साइज में एंड सर्च मेरा थोड़ा छोटा लग रहा था बट अब दोनों इक्वल साइज के मेरे पास क्रिएट होकर आ गए हैं अब हम तीसरी चीज जिस पर फोकस करने वाले हैं वह है मेरा यह सर्च आइकन सर्च आइकन के लिए हम इसकी क्लास ले लेते हैं क्लास है सर्च आइकन तो हम लिखने वाले हैं style.css के अंदर डॉट सर्च आइकन को अब सबसे पहले तो सर्च आइकन के लिए हम एक विड्थ सेट करने वाले हैं इसकी विड्थ अगर देखें तो दिस इज अराउंड 45 पिक्सल्स तो यहां पर भी हम विड्थ सेट कर देते हैं 45 पिक्सल्स के इक्वल सेव रिफ्रेश तोय 45 पिक्सल्स के अराउंड विड्थ आ गई अब अगर इस एलिमेंट को मुझे बिल्कुल सेंटर में लेकर आना है क्योंकि यहां पे ये क्या है सर्च ऑप्शन सर्च वाला जो आइकन है बिल्कुल सेंटर में आ रहा है तो सेंटर के लिए हम क्या कर सकते हैं जो पेरेंट वाला मेरा कंटेनर है पेरेंट कंटेनर है सर्च आइकन जिसके अंदर मेरा आइकन लिखा हुआ है तो पेरेंट कंटेनर सर्च आइकन को डिस्प्ले फ्लेक्स दे देते हैं इसके लिए जस्टिफाई कंटेंट कर देते हैं सेंटर तो क्या होगा हॉरिजॉन्टल सेंटर में आ गया अब वर्टिकली सेंटर में लाने के लिए हम अलाइन आइटम्स कर सकते हैं टू सेंटर सेव रिफ्रेश तो यहां से हमें पता चल रहा है कि कितना काम आ रहा है फ्लेक्स बॉक्स हमारे कि चीजों को सेंटर करना है लेफ्ट करना है राइट करना है स्पेस इवनली डिवाइड करनी है तो बहुत हेल्पफुल होता है फ्लेक्स बॉक्स लेआउट अब ये जो मेरा मैग्नीफाइंग ग्लास है इस मैग्नीफाइंग ग्लास के मुकाबले इसका साइज थोड़ा सा छोटा लग रहा है कंटेनर से तो इसका अगर मुझे साइज बढ़ाना है तो वी कैन मेक इट फंट साइज ऑफ वन रेम सेव रिफ्रेश तो ये ज्यादा चेंज नहीं आया इसे 1.2 गम करें अगर तो थोड़ा सा साइज में बड़ा हो गया अब थोड़ा सा ज्यादा परफेक्टली फिट कर रहा है अब सेट करते हैं इसका बैकग्राउंड कलर अब बैकग्राउंड कलर आप चाहें तो इंस्पेक्ट में अगर दिखता है तो इंस्पेक्ट से भी सर्च कर सकते हैं नहीं तो कई सारे डिफरेंट डिफरेंट तरीके होते हैं जो मैंने आपको कैनवा वाला तरीका बताया अब यहां पर इसके बैकग्राउंड कलर को थोड़ा सा सर्च करना मुश्किल हो रहा था तो हम क्या कर सकते हैं इसको करने का एक तरीका तो यह होता है कि बैकग्राउंड कलर को मुझे पता है यहां थोड़ा लोइश बैकग्राउंड है तो हम सबसे पहले शुरुआत ही येलो के साथ कर सकते हैं मतलब येलो के साथ शुरुआत की सेव किया रिफ्रेश किया तो येलो इश आ गया बट मुझे पता है थोड़ा सा डार्क लोइश होगा तो यहां जाके हम थोड़ा सा येलो का डार्कर शेड चूज कर सकते हैं कुछ इस तरीके से सेव रिफ्रेश तो ये थोड़ा डार्कर शेड आ गया बट इससे भी और थोड़ा सा ऑरेंज शेड मुझे चाहिए तो उसके लिए यहां जाके और थोड़ा सा ऑरेंज शेड हम सेट कर सकते हैं सेव रिफ्रेश तो इस तरीके का शेड मुझे मिल जाएगा यानी ये सिमिलर है इसके बट अगर आपको एग्जैक्ट चाहिए तो उसके लिए या तो हम ट्राई एंड टेस्ट कर सकते हैं यानी इसको और थोड़ा सा चेंज कर कर के देख सकते हैं नहीं तो तो मैंने आपकी ईज के लिए ऑलरेडी जो इसका कलर है उसको सर्च कर रखा है दैट इज बेसिकली एई बीडी 68 तो ये एग्जैक्ट ऑरेंजिश कलर है जो इस सर्च ऑप्शन को दिया हुआ है ये बिल्कुल सेम कलर है जो यहां पर मुझे दिखाई दे रहा है अब एक और चीज इसके कॉर्नर्स जो है वो राउंडेड नहीं है कौन-कौन से कॉर्नर्स को मुझे राउंडेड बनाना है टॉप राइट एंड बॉटम राइट कॉर्नर्स को तो वही सेम चीज जो हमने सर्च सिलेक्ट के लिए की थी इसको कर लेते हैं कॉपी एंड इसको कर लेते हैं यहां पे पेस्ट इस बार हम टॉप राइट रेडियस एंड बॉटम राइट रेडियस को सेट करेंगे सेफ रिफ्रेश तो ये क्या हुआ ये भी कॉर्नर में हो गया एंड ये जो मेरा आइकन है मेरा जो सर्च वाला आइकन है उसका कलर एक्चुअली मेरे बैकग्राउंड कलर के सेम है वो यहां पर दिख नहीं रहा कंट्रास्ट के लिए हमने अज्यू किया आप चाहे तो इसे ब्लैक भी दे सकते हैं हम चाहे तो इसे बैकग्राउंड कलर के भी सेम दे सकते हैं जो अच्छा कंट्रास्ट क्रिएट करेगा तो हम क्या करने वाले हैं इसको कलर देने वाले हैं बैकग्राउंड कलर के सेम व्हिच वाज 0f 1111 सेव रिफ्रेश अब अगर इसे थोड़ा सा मिनिमाइज करें तो ये मेरे ओरिजिनल जैसा थोड़ा-थोड़ा दिखना स्टार्ट हो गया है क्योंकि ये जो मेरा पैनल है सर्च वाला बिल्कुल वैसा सा ही दिख रहा है जैसा मेरा ओरिजिनल था अब एक और चीज यहां पर मेरा जो सर्च वाला आइकन है एंड यह है इनकी विड्थ थोड़ी सी हमें छोटी लग रही है अगर इसका इंस्पेक्ट हटा दें तो ऑलमोस्ट इक्वल सी आ गई है तो ज्यादा कोई परेशानी की बात नहीं है तो यह मेरा सर्च वाला बार बन गया है अब नेक्स्ट हम एक और चीज करने वाले कि सारे के सारे ये जो एलिमेंट्स हैं हम इनको इक्वली स्पेस कराएंगे अपने वव बार के ऊपर तो हम क्या करेंगे style.css में वव बार के अंदर जाकर हम जस्टिफाई कंटेंट करेंगे स्पेस इवनली जस्टिफाई कंटेंट क्या करेगा मेरा जो मेन एक्सिस है लेफ्ट से लेकर राइट की तरफ उसमें सारे के सारे कंटेंट को इवनली स्प्रेड कर देगा सेव रिफ्रेश तो ये कंटेंट इवनली स्प्रेड हो गया और जैसे-जैसे इसके बाद हम नए-नए बॉक्सेस को ऐड करेंगे वैसे-वैसे यह कंटेंट लेफ्ट की तरफ पुश होता चला जाएगा अब हम क्रिएट करने वाले हैं अपने बॉक्स नंबर फोर को तो इसे दोबारा कर लेते हैं इंस्पेक्ट मेरी जो amazon-in के अंदर टेक्स्ट लिखा हुआ है नीचे की तरफ एक और टेक्स्ट लिखा हुआ है ऊपर वाला जो है थोड़ा सा छोटा साइज में 12 पिक्सेल नीचे वाला टेक्स्ट थोड़ा सा बड़ा साइज में 14 पिक्सेल तो हम इस तरीके के लेआउट को क्रिएट करते हैं अपने इंडेक्स ड एटीए के अंदर जाएंगे एंड सबसे पहले एक हम डिव क्रिएट करेंगे इस डिव को कह देते हैं साइन इन तो इसे बोलेंगे हम नव साइन इन इस डिव के अंदर दो पैराग्राफ हम क्रिएट करने वाले हैं एक पैराग्राफ के अंदर तो स्पैन एलिमेंट डालेंगे जिसके अंदर लिख देंगे हेलो कॉमा साइन इन एंड दूसरा सिंपली एक और पैराग्राफ टैग बनाएंगे जिसके अंदर लिखने वाले हैं अकाउंट एंड लिस्ट इसे कर लेते हैं सेव रिफ्रेश तो यहां पर आकर मेरे पास अपीयर होने लग जाएगा अब एक छोटी सी चीज हम नोटिस करेंगे कि यहां पर इस फर्स्ट लाइन में जो फंट साइज है यही वो सेम फंट साइज रिटर्न्स में आता है इसका जो फंट साइज और स्टाइल है वही सेम चीज मुझे यहां पर देखने को मिलती है तो हम क्या कर सकते हैं कि यहां पर ऐसी क्लासेस या ऐसी स्टाइल ऐड कर दे जो हमारे बॉक्स फोर एंड बॉक्स फाइ दोनों के काम आ जाए तो इस तरीके की चीज करने के लिए अपने पैराग्राफ टैग को हम एक क्लास देने वाले हैं लेट्स गिव इट अ क्लास ऑफ नाव सेकंड वव सेकंड इसको मैंने दिया है यहां पर ऐड सेकंड दिया था एड्रेस सेकंड के लिए इसको मैंने नाव सेकंड दिया है क्योंकि हम इसको रीयूज करने वाले इसलिए मैंने सामने नाव को अपेंड कर दिया है अब ऊपर जो मेरा स्पैन है स्पैन के लिए डायरेक्टली स्टाइलिंग देंगे हम चाहे तो यहां पर ना फर्स्ट क्लास भी ऐड कर सकते हैं बट मैं स्पैन को डायरेक्टली स्टाइलिंग देने वाली हूं इसको कर लेते हैं सेव यहां पर जाकर अपने बॉक्स फोर एंड बॉक्स सबसे पहले तो बॉक्स फोर के लिए स्टाइलिंग ऐड करते हैं सो दिस इज गोइंग टू बी माय बॉक्स फर अब बॉक्स फोर में सबसे पहले जो हम स्टाइल ऐड करेंगे वो करेंगे अपने स्पैन के लिए तो जो मेरा स्पैन है उसके लिए हम फंट साइज थोड़ा सा छोटा रखने वाले हैं 12 पिक्सल्स तो इसे हम 0.7 रेम के अराउंड रखेंगे सेफ रिफ्रेश तो ये छोटा हो गया है साइज में एंड अकाउंट्स एंड लिस्ट्स के लिए हम क्या करेंगे नाव सेकंड क्लास को यूज करेंगे इसे भी हम एक फॉन्ट साइज देने वाले हैं 0.85 रेम्स के अराउंड सेव रिफ्रेश तो ये क्या हुआ इस तरीके से स्टाइलिंग मेरे पास ऐड हो गई अब एक और छोटी सी चीज हम नोटिस करने वाले हैं कि यहां पर अकाउंट्स एंड लिस्ट पर जब हम जाकर क्लिक करेंगे और इसे इंस्पेक्ट करेंगे लेट मी क्लिक अगेन अकाउंट्स एंड लिस्ट तो इसकी जब हम स्टाइलिंग देखेंगे तो स्टाइलिंग के अंदर इसका फॉन्ट साइज मुझे दिखाई दे रहा है 12 पिक्सल्स है लाइन हाइट दी हुई है इसको इस अकाउंट्स एंड लिस्ट को एक फॉन्ट भी दिया हुआ है फंट वेट यानी यह थोड़ा सा डार्कर होगा बोल्ड होगा तो हम भी क्या करेंगे अपने अकाउंट्स एंड लिस्ट को एक फंट वेट दे देंगे फंट वेट ऑफ 700 सेम सेव रिफ्रेश तो क्या हुआ थोड़ा सा डार्कर हो गया शेड में तो यह मैंने अपना बॉक्स फोर ऐड कर लिया है अब अपना बॉक्स फाइव भी क्रिएट कर लेते हैं हम सिंपली इसे करेंगे कॉपी एंड पेस्ट तो यहां पर साइन इन की जगह अब इसे मुझे क्रिएट करना है तो हम लिखने वाले हैं रिटर्न ऊपर वाले टेक्स्ट में मेरे पास लिखा हुआ है रिटर्न्स नीचे वाले में एंड ऑर्डर्स तो इसे कर देंगे रिटर्न्स कैपिटल r एंड यहां पर कर देंगे एंड ऑर्डर्स सेव रिफ्रेश तो ये रिटर्न्स एंड ऑर्डर्स भी मेरे पास आ गया अब अगर मुझे इन्हें हर इफेक्ट देना है तो हर इफेक्ट के लिए क्या कर सकते हैं इसके साथ भी एक बॉर्डर क्लास ऐड कर सकते हैं इसके साथ भी बॉर्डर क्लास सेव रिफ्रेश तो इसके पास भी बॉर्डर आ जाएगा इसके पास भी बॉर्डर आ जाएगा अब अपनी अगर amazononline.in होती है जैसे यहां पर जैसे ही मैंने क्लिक किया वैसे ही क्या हुआ इसके अराउंड एक ऑरेंज बाउंड्री आ गई ये जो ऑरेंज बाउंड्री है जो पूरे के पूरे सर्च के अराउंड आई है इस चीज को भी हम क्रिएट कर सकते हैं अपने साइल ड सीएसएस के अंदर यानी मेरा जो सर्च सिलेक्ट है उसमें नाव सर्च पर हर करने पर हम क्या कर सकते हैं एक स्टाइल अप्लाई कर सकते हैं ऊपर जाएंगे और डॉट ना सर्च कोलन हर जैसे ही हर करेंगे हम चाहते हैं इसका जो बॉर्डर है वो बॉर्डर सेट हो जाए टू टू पिक्सल सॉलिड ऑरेंजिश कलर की मेरे पास बाउंड्री आ रही है रिफ्रेश तो क्या होगा जैसे ही हम हर करेंगे मेरे पास ऑरेंज कलर की बाउंड्री मेरे इनपुट के अराउंड मुझे दिखनी शुरू हो जाएगी तो थोड़ा सा और रियलिस्टिक इफेक्ट मुझे देखने को मिलेगा एंड अब आ जाते हैं अपने लास्ट बॉक्स की तरफ जो होने वाला है मेरा कार्ट कार्ट के अंदर दो चीजें एक मेरे पास मेरा कार्ट का आइकन है दूसरा मेरे पास कार्ट टेक्स्ट में लिखा हुआ है तो कार्ट के लिए इक्ड एटीएमएल हम जाकर एक और डिव क्रिएट कर देते हैं f काट f काट के अंदर सबसे पहले तो मेरा आइकन आएगा उसके बाद हम कार्ट टेक्स्ट लिखेंगे तो कार्ट के आइकन के लिए हम सिंपली सर्च कर सकते हैं कार्ट तो काफी सारे कार्ट के आइकन हमें देखने को मिल जाएंगे अब इसमें एगजैक्टली जो amazon2 रिफ्रेश तो ये मेरा कार्ट का आइकन आ गया अब इसे amazon2 करना है मतलब आइकन साइज को बड़ा करना है और कार्ट को मुझे छोटा रखना है टेक्स्ट को तो हम यहां पर अपने कार्ट के लिए सीएसएस लिखेंगे इसको नाम दे देते हैं बॉक्स सिक्स सबसे पहले हम क्या करेंगे मेरी जो वव कार्ट वाली क्लास है उसका नाम लिख लेते हैं वव कार्ट और अब हम एक और स्पेशल चीज करने वाले हैं यहां पर सिलेक्टर्स को लेकर अभी तक हमने जो सिलेक्टर्स पढ़े हैं उसमें यूनिवर्सल सिलेक्टर आता था हमारे पास आईडी सिलेक्टर है क्लास सिलेक्टर है और भी डिफरेंट डिफरेंट सिलेक्टर्स हैं बट एक सिलेक्टर्स का कॉमिनेशन भी हम यूज कर सकते हैं यानी अगर मुझे ऐसी स्टाइलिंग अप्लाई करनी है जो उसी आइकन पर अप्लाई हो जो मेरे वव काट क्लास के अंदर आए तो उसके लिए हम इस तरीके से अपना सिंटेक्स लिख सकते हैं यानी पहले हम अपनी क्लास का नाम लिखेंगे पेरेंट का नाम फिर उसके अंदर जितने भी आइकन होंगे उन सबके लिए हम चाहते हैं कि मेरा जो फंट साइज हो फंट साइज कितना होना चाहिए इंस्पेक्ट कर लेते हैं मेरे जो कार्ट का साइज है इसकी विड्थ अराउंड 50 पिक्सल्स कुछ करीबन यहां पर दिख रही है काट 50 नहीं अराउंड 38 पिक्सेल है विड्थ मेरी तो इसको हम 35 पिक्सल्स अगर दें सेव रिफ्रेश तो क्या हुआ साइज में काफी बड़ा हो गया है थोड़ा सा और इसे हाइट कितनी दी जा सकती है 30 पिक्सल्स के अराउंड अगर हम सेट करें सेव रिफ्रेश तो अराउंड इतनी हाइट इसे दी जा सकती है एंड मेरे कार्ट का जो फॉन्ट साइज है वो उतने का उतना रहा कार्ट का जो फॉन्ट साइज है अगर हम एनालाइज करें तो वो ऑर्डर्स वाले फॉन्ट साइज के ऑलमोस्ट इक्वल है तो अब अगर मुझे कार्ट को फॉन्ट साइज देना है तो मैं लिखूंगी वव काट एंड इसके अंदर जाकर हम फॉन्ट साइज को सेट कर सकते हैं लेट्स से वी सेट इट टू 0.85 फम सेव रिफ्रेश एंड यहां जाकर इसे हम बोल्ड भी कर सकते हैं क्योंकि ये थोड़ा सा बोल्ड मुझे दिखाई दे रहा है क्लिक करेंगे जाकर इसका भी फॉन्ट साइज 14 पिक्सल्स है एंड इसका भी फॉन्ट वेट क्या है 700 ल्ड है तो यहां पर जाकर इसे फॉन्ट वेट दे देंगे 700 के इक्वल सेफ रिफ्रेश तो अब यह मेरा अपर पैनल है जिसके अंदर काफी ज्यादा स्टाइलिंग जो है नेव बार जैसी दिखने लग गई है इसको हर इफेक्ट एक और एडिशनल बस दे देते हैं यहां पर हर इफेक्ट के लिए मैंने क्लास ऐड कर दी बॉर्डर तो ये दो मल्टीपल क्लासेस एक साथ अप्लाई करने के लिए हम साथ में लिख सकते हैं तो ये मैंने कार्ट को ऐड कर दिया एंड इस तरीके से मेरा नाव बार तैयार है अब बढ़ते हैं अपने सेकंड कंपोनेंट की तरफ जो होने वाला है मेरा यह पैनल यानी ये जो मेरा ग्रे वाला पैनल है दिस पैनल अब इस पैनल के बारे में नोटिस कर लेते हैं क्या-क्या एलिमेंट्स है एक मेरे पास यहां पर मैंने एक यह एंकर टैग बनाया हुआ है जिसके अंदर मेरे पास एक आईक है मेन्यू आइकन इसको कहते हैं ऑल उसके बाद मैंने एक डिव बनाया है जिस डिव के अंदर मतलब amazonbusiness.in अलग से डिव है वो मुझे क्रिएट करना है तो सबसे पहले अपने हेडर के अंदर ही हम एक और डिव बनाएंगे जिसको हम क्लास देने वाले हैं पैनल पैनल के अंदर तीन कॉम्पोनेंट्स होंगे पहला कॉम्पोनेंट है मेरा पैनल ऑल का जिसमें मेरे पास एक तो आइकन आएगा और एक मेरे पास ऑल लिखा होगा आइकन के लिए क्या कर सकते हैं सिंपली हम सर्च कर सकते हैं मेन्यू आइकन के लिए तो जैसे ही हम फंट ऑसम पर मेन्यू आइकन सर्च करेंगे ये बार वाला आइकन है जो सिमिलर लग रहा है इसको हम यहां पर कर सकते हैं कॉपी एंड पेस्ट रिफ्रेश करेंगे तो ये ऑल मुझे यहां पर आकर दिखाई दे रहा है इस ऑल को बेसिकली ये जो मेरा पैनल है इस पैनल को बेसिकली मुझे अपने डिव के बाद स्टार्ट करना है यह यहां पर आ जाएगी फॉर्मेटिंग यानी नेक्स्ट लाइन से गलती से क्या कर दिया था हमने अपने इसे अगर मिनिमाइज करके आपको दिखाऊं तो इतना जो पार्ट है यह मेरे वव बार के लिए है वव बार का डिव खत्म हो जाए उसके बाद मुझे पैनल को स्टार्ट करना है और पैनल हेडर टैग के अंदर ही हम लिखने वाले हैं तो आई होप यह चीज थोड़ी सी क्लियर है कोड से एंड पैनल में हमने अपने फर्स्ट डिव को क्रिएट कर दिया है अब अपने सेकंड डिव को क्रिएट कर देते हैं सेकंड डिव को हम क्या क्लास देंगे इसको क्लास दे देते हैं पैनल ऑप्शंस तो ऑप्स लिख दिया है पैनल ऑप्शंस के लिए एंड इसमें अलग-अलग हम पैराग्राफ टैग्स भी क्रिएट कर सकते हैं एंकर टैग्स भी क्रिएट कर सकते हैं लेट्स क्रिएट पैराग्राफ टैग्स पैराग्राफ टैग्स में हमें यह वाला टेक्स्ट ऐड करना है तो इस टेक्स्ट को यहां से कोशिश कर लेते हैं अगर कॉपी हो जाए तो कॉपी एंड यहां पर पेस्ट तो इस तरीके से इसे कर लेते हैं तो हमारे पास अच्छे से चीजें लिखकर आ गई है सही फॉर्मेटिंग के साथ यह मेरे पैनल ऑप्शन हो गए एंड लास्ट में हम एक डिव क्रिएट कर सकते हैं फॉर माय डील्स डील्स के लिए डिव के लिए हम इसको क्लास दे सकते हैं पैनल डील्स एंड इसके अंदर हम अपना टेक्स्ट ऐड कर सकते हैं च इज बेसिकली शॉप डील्स इन इलेक्ट्रॉनिक्स देख लेते हैं सही चीज लिखी है क्या हमने शॉप डील्स इन इलेक्ट्रॉनिक्स बिल्कुल सेम चीज लिखी है सेव रिफ्रेश तो ये सारा का सारा टेक्स्ट मेरे पास यहां पर आ गया ये मेरा ल्स वाला पैनल है ये मेरे ऑप्शंस वाला पैनल है ये मेरा लास्ट का डील्स वाला पैनल है अब इन तीनों के लिए हम स्टाइलिंग ऐड करने वाले हैं स्टाइलिंग के लिए सबसे पहले तो पैनल के साथ ही शुरुआत कर देते हैं तो यहां पर कमेंट कर देते हैं सीएसएस फाइल में अपना पैनल तो पैनल की स्टाइलिंग को हम ऐड करना स्टार्ट करेंगे सबसे पहले लिखेंगे डॉट पैनल डॉट पैनल के लिए हम इसकी हाइट सेट कर सकते हैं तो यहां पर इंस्पेक्ट करके amazonbusiness.in हाइट आप निकालेंगे तो अराउंड 39 पिक्सल्स की हाइट मुझे दिख रही है तो इवन रखने के लिए चीजों को इसकी हाइट हम सेट कर देते हैं टू 40 पिक्सल्स 40 पिक्सेल सेट कर दी रिफ्रेश किया तो अभी दिखाई नहीं दे रही बट इसे हम एक बैकग्राउंड कलर भी दे सकते हैं अब हम चाहे तो इंस्पेक्ट करके बैकग्राउंड कलर फाइंड आउट कर सकते हैं जितना मुझे समझ में आ रहा है इसका जो बैकग्राउंड कलर है वो ऊपर वाले कलर के सेम है बस ओपेसिटी के साथ थोड़ा सा खेला गया है बट एग्जैक्ट बैकग्राउंड कलर अगर आपको इंस्पेक्ट करके ना मिले तो उसको हमने ऑलरेडी फाइंड आउट कर कर रखा है आपकी आसानी के लिए तो द बैकग्राउंड कलर इज 22 f3d सेव करेंगे रिफ्रेश तो ये मेरा बैकग्राउंड कलर आ गया इसी तरीके का कलर मेरी amazonbusiness.in तो मेरा मेन कंटेनर है पैनल इसको हम कर देंगे डिस्प्ले फ्लेक्स जैसे ही डिस्प्ले फ्लेक्स करेंगे रिफ्रेश करेंगे क्या हुआ सारा का सारा कंटेंट एक सिंगल लाइन के अंदर आने लग जाएगा मतलब ये मेरा फर्स्ट डिव है ये मेरा सेकंड डिव है जिसके अंदर पैराग्राफ टैग्स हैं एंड ये मेरा थर्ड डिव है अब पैराग्राफ टैग्स को मैं नहीं चाहती अलग-अलग लाइन में आए तो उनके लिए हम डिस्प्ले इनलाइन कर सकते हैं तो अगर मुझे पैनल के सारे के सारे पैनल नहीं इसको हम कहेंगे पैनल ऑप्शंस के सारे के सारे पैराग्राफ टैग्स को डिस्प्ले करना है इनलाइन तो हम इस तरीके से लिख सकते हैं जितने भी पैराग्राफ पैनल ऑप्शंस के अंदर है इसको सेव कर देंगे रिफ्रेश कर लेंगे तो ये सेम लाइन के अंदर आ गए अब सारे के सारे टेक्स्ट का हम कलर भी सेट कर सकते हैं टू वाइट ताकि और ज्यादा विजिबल हो तो ये मेरे सारे के सारे ऑप्शंस एक सिंगल लाइन में मुझे दिखाई दे रहे हैं अब इनको अगर मुझे स्पेस देना है सबसे पहले तो इनको वर्टिकली अलाइन कर लेते हैं मतलब सेंटर में लेकर आते हैं तो वर्टिकली अलाइन करने के लिए हम लिख सकते हैं अलाइन आइटम सेंटर सेव रिफ्रेश य सेंटर में आ गए और हॉरिजॉन्टल अलाइन करने के लिए हम कर सकते हैं जस्टिफाई कंटेंट एंड लेट्स मेक इट स्पेस इवनली सेव रिफ्रेश तो ये क्या हो गया इवनली आ गया सारा का सारा कंटेंट इवनली आ गया ये चीज सेंटर में आ गई ये चीज लेफ्ट में आ गई ये चीज मेरी राइट में आ गई अब एक चीज हम नोटिस करेंगे कि जितना भी कंटेंट मेरे पैनल के अंदर लिखा हुआ है इसमें ये वाला जो डिव है ना सेकंड वाला डिव ऑप्शंस वाला ये काफी सारी विड्थ को ऑक्यूपाइड इस पैनल के पास ये वाला एरिया खाली पड़ा है पर फिर भी ये विड्थ इस डिव को दी हुई है तो इससे हमें पता चलता है कि मेरे जो पूरे पैनल की विड्थ है उसमें से काफी सारा एरिया विड्थ इनफैक्ट दिस इज मोर दन 50 60 पर इतना जो विड्थ है वो सिर्फ मेरा नेविगेशन वाले जो ऑप्शंस है वो ऑक्यूपाइड ऑप्शंस है उसको हम एक विड्थ दे सकते हैं व्हिच इज इक्वल टू 70 पर रिफ्रेश किया तो क्या हुआ अब इसने 70 पर विड्थ ले ली इसको इंस्पेक्ट भी कर सकते हैं हम इंस्पेक्ट करेंगे तो यहां पर आकर यह वाला मेरा जो डिव है सेकंड डिव यह काफी सारी वि जो है उसे ऑक्यूपाइड है अब फॉन्ट साइज की बात कर लेते हैं यहां पर ये जो फॉन्ट साइज है दिस इज इक्वल टू 14 पिक्सल्स व्हिच इज स्मॉल एंड यह वाला फॉन्ट साइज थोड़ा सा बड़ा दिख रहा है इवन दो इस वाले फॉन्ट साइज से एंड डार्कर है शेड में इस पर क्लिक करेंगे तो हमें पता चलेगा यह जो शॉप डील्स इन इलेक्ट्रॉनिक्स लिखा हुआ है इसके ऊपर भी अपना एक फॉन्ट वेट जो है वो अप्लाइड है तो फॉन्ट साइज सेट करने के लिए अपने पैनल ऑप्शंस को सबसे पहले एक फॉन्ट साइज दे देते हैं लेट्स मेक इट 0.85 फम्स सेव रिफ्रेश तो ये छोटे हो गया फॉन्ट साइज एंड शॉप डील्स इन इलेक्ट्रॉनिक्स के लिए भी फॉन्ट साइज सेट कर देते हैं पैनल डील्स फॉन्ट साइज इसके लिए थोड़ा सा हम बड़ा रख लेंगे 0.9 रेम्स इसको दे देते हैं क्योंकि देखने में इवन दो इंस्पेक्ट करके ये इक्वल है बट मुझे देखने में थोड़ा सा बड़ा लग रहा है फॉर सम रीजन तो इसीलिए बस मैं इसको दे रही हूं आप चाहे तो सेम भी रख सकते हैं 0.85 बट मैंने थोड़ा सा लार्जर दिया इसे एंड इसे एक फंट वेट दे देते हैं फंट वेट का होने वाला है 700 सेव रिफ्रेश तो क्या हुआ यहां पर फॉन्ट वेट आ गया अब ये जो ऑप्शंस है बहुत करीब हैं एक दूसरे के तो इनके बीच में थोड़ी सी मार्जिन ऐड करने के लिए थोड़ी सी स्पेस ऐड करने के लिए हम क्या करेंगे पैनल ऑप्शंस जो हैं उन सब को एक मार्जिन दे देते हैं फ्रॉम लेफ्ट लेट्स गिव देम अ मार्जिन ऑफ लेट्स से 10 पिक्सल्स का मार्जिन दे दें रिफ्रेश इस तरीके से थोड़ी सी स्पेस बन जाएगी हम चाहे तो 15 पिक्सल्स भी दे सकते हैं 15 पिक्सेल दिया तो तो थोड़ी सी और स्पेस आ जाएगी एंड कुछ इस तरीके से हमारा जो सेकंड पैनल है वो भी तैयार हो जाएगा तो हमारा नेविगेशन पैनल हमारा जो हेडर है वो पूरा तैयार है नाव बार भी तैयार है पैनल भी तैयार है एंड इस तरीके से अब हम बढ़ सकते हैं अपने जो वेबसाइट है उसके हीरो सेक्शन की तरफ तो यह मेरा पैनल कुछ ऐसा था अब हीरो सेक्शन की बात करें तो हीरो सेक्शन होता है मेरी वेबसाइट का होम पेज पर आ जाते हैं हीरो सेक्शन होता है मेरी वेबसाइट का यह वाला हिस्सा जो मेरा मेन हिस्सा होता है इसकी जो इमेज है है उसको हमने ऑलरेडी डाउनलोड कर रखा है हम एक सिंगल इमेज रखने वाले हैं सिंपलीसिटी के लिए तो सेव इमेज करके हम इमेज को डाउनलोड भी कर सकते हैं लद इस इमेज को हमने ऑलरेडी डाउनलोड कर रखा है ये मेरी कंटेनर के अंदर ये वाली इमेज है रो image.jpg अब हीरो सेक्शन बनाने के लिए हम क्या करेंगे हेडर के बाहर एक और नया डिव बनाएंगे जिसको हम क्लास देने वाले हैं हीरो सेक्शन हीरो सेक्शन इसे क्लास दे दी अब इस पूरे के पूरे हीरो सेक्शन को हम बैकग्राउंड इमेज देने वाले हैं हमारी यह वाली हीरो इमेज तो बैकग्राउंड इमेज देने के लिए हम यहां लिख सकते हैं कमेंट्स में हीरो सेक्शन अब हीरो सेक्शन की स्टाइलिंग के लिए हम इसे बैकग्राउंड यहां लिख देते हैं डॉट हीरो सेक्शन हीरो सेक्शन को एक बैकग्राउंड इमेज हम देंगे तो उसके लिए यूआरएल लिख देते हैं यह होगी हमारी हीरो नाम से इसे लिख देते हैं हीरो इमेज हीरो अको इमेज डट जेपीजी सेव रिफ्रेश अब ये इमेज दिखाई नहीं देगी क्यों क्योंकि हीरो सेक्शन को हमने कोई हाइट या विड्थ नहीं दि है तो इसे हाइट हम दे सकते हैं एप्रोक्सीमेटली इसे जो अभी हाइट मिली हुई है बॉक्स मॉडल की तरफ अगर जाए इंस्पेक्ट करके तो द हाइट इज अप्रॉक्सिमेट्स के अराउंड इसको हाइट दी हुई है एंड इसे लद मार्जिन वगैरह काफी सारी चीजें दी हुई है हम क्या करेंगे इसकी हाइट को सेट कर लेते हैं टू अराउंड 600 पिक्सल्स सेव रिफ्रेश तो क्या हुई मेरे पास इमेज आ गई बट ये इमेज अच्छे से फिट नहीं कर रही तो इमेज को एक बैकग्राउंड साइज भी दे देते हैं लेट्स गिव इट कवर सेव रिफ्रेश तो ये क्या हुई मेरी पूरी की पूरी इमेज जो यहां पर आ रही थी वो मुझे डिस्प्ले होकर दिखाई दे रही है एंड अब ये जो मेरी वेबसाइट है थोड़ी-थोड़ी amazon2 नव बार से या नेविगेशन पैनल से या हेडर से नहीं दिखती कंटेंट जब आप डालते हैं तो थोड़ी सी दिखनी शुरू होती है एंड मेरे कंटेंट से अब ये थोड़ी सी मुझे दिखनी स्टार्ट हो गई है हम चाहे तो इसकी जो हाइट है उसको थोड़ा सा कम भी कर सकते हैं उतना भी रख सकते हैं अब क्या करेंगे यह मेरा हीरो सेक्शन की इमेज तो आ गई बट इस इमेज के साथ-साथ हीरो सेक्शन में मेरे पास एक और डिव है जो कुछ यहां पर है यह जो मेरा डिव है इसको भी हीरो सेक्शन में ऐड करेंगे बेसिकली वाइट कलर का यहां पे बैकग्राउंड है कुछ मेरे पास टेक्स्ट लिखा हुआ है एंड इस टेक्स्ट को मुझे लिखना है तो एक और डिव ऐड कर देते हैं अपने हीरो सेक्शन में इस डिव को हम नाम देंगे लेट्स गिव इट हीरो मैसेज हीरो मैसेज के अंदर मेरे पास एक पैराग्राफ टैग है जिसके अंदर यह पूरा का पूरा हम टेक्स्ट ऐड करने वाले हैं इसको कर लेते हैं कॉपी एंड पेस्ट यह जो क्लिक हेयर टू गो टू amazon.in है इस चीज को हम एक एंकर टैग के अंदर लिख देते हैं क्यों क्योंकि यह क्लिकब्रिक्स आ जाएंगी कल x कल v इसे कर लेते हैं सेव एंड इस तरीके से रिफ्रेश करेंगे तो अब मेरे पास यह मेरा कंटेंट दिखाई दे रहा है सबसे पहले तो यह जो डिव है इसको एक बैकग्राउंड कलर दे देते हैं रो मैसेज वाला जो डिव है इसे लिखेंगे रो मैसेज एंड इसे एक बैकग्राउंड कलर दे देंगे वाइट एंड इसका जो टेक्स्ट है उसे हम बैकग्राउंड कलर दे सकते हैं लेट्स गिव इट ब्लैक सेव रिफ्रेश तो इस तरीके से मेरा डिव आ जाएगा अब डिव की हाइट भी हम चेक कर सकते हैं यह जो डिव है इसकी एप्रोक्सीमेट हाइट है अराउंड 40 पिक्सल्स तो वी कैन गिव इट अ हाइट ऑफ 40 पिक्सल्स सेव रिफ्रेश तो इसे हाइट मिल गई 40 पिक्सल्स एंड ये जो कंटेंट है इसको हम सेंटर में ला सकते हैं सेंटर में लाने के लिए मुझे क्या करना है ये जो डिव है इसे बनाना है डिस्प्ले फ्लेक्स तो जो मेरा हीरो मैसेज वाला डिव है इसको हम दे देंगे प्रॉपर्टी डिस्प्ले फ्लेक्स रिफ्रेश अब वर्टिकली सेंटर में लाने के लिए अलाइन आइटम्स सेंटर एंड हॉरिजॉन्टल लाने के लिए जस्टिफाई कंटेंट सेंटर सेव रिफ्रेश तो ये कंटेंट जो है मेरा ऑटोमेटिक सेंटर में आ जाएगा अब साइजिंग देख लेते हैं डिव की थोड़ी सी डिव की साइजिंग के लिए ये जो मेरा टेक्स्ट है 14 पिक्सल्स का है एंड ये वाला टेक्स्ट भी 14 पिक्सल्स है बट इसका कलर यहां पर अलग है क्लिक हेयर टू गो टू amazon.in यह वाला जो टेक्स्ट है इसको कलर दिया हुआ है हमने 0715 तो जो मेरा हीरो मैसेज के अंदर जो मेरा एंकर टैग आ रहा है उस एंकर टैग को हम कलर देना चाहते हैं हैश लेट्स गिव इट व्हाट इज द कलर 0715 0071 85 सेव रिफ्रेश तो इसका कलर चेंज हो गया एक स्पेस भी दे देते हैं एक्स्ट्रा यहां पर सेव रिफ्रेश थोड़ा सा बेटर लग रहा है अब फॉन्ट साइज सेट कर देते हैं सबका तो मेरे हीरो मैसेज के लिए सारे के सारे टेक्स्ट का जो फॉन्ट साइज है दैट शुड बी 0.85 फम्स रिफ्रेश एक चीज आपने नोटिस की होगी कि जो भी फॉन्ट साइज amazon.ca तरीका है ट्रैक करने का कि सारी चीजें रिलेटिवली उतने ही बड़े फॉन्ट साइज या उतनी ही छो छोटे फंट साइज के साथ आ रही है तो यह मेरा बॉक्स आ गया डिव बट यह बॉक्स मेरे इमेज के ऊपर प्लेस नहीं है इमेज के नीचे प्लेस है अब इसे नीचे प्लेस करने के लिए मुझे इसे कोई पोजीशन देनी पड़ेगी यानी मैं इसे बॉटम पे प्लेस करना चाह रही हूं तो हम इसे बॉटम से प्लेस कर सकते हैं लेट्स से टू 25 पिक्सल सेव रिफ्रेश अब ये यहीं के रहेगा क्योंकि इसकी पोजीशन बाय डिफॉल्ट स्टैटिक है तो बॉटम पोजीशन अप्लाई करने के लिए हमें इसे पोजीशन देनी पड़ेगी रिलेटिव सेफ रिफ्रेश हम क्या करेंगे इसे डायरेक्टली पोजीशन देने की बजाय एक और बेटर तरीका दिमाग में आया कि क्या करेंगे इसका जो मेन कंटेनर है यानी ये जो हीरो सेक्शन है इसी को डिस्प्ले फ्लेक्स बना देते हैं और आइटम्स जो है इनको फ्लेक्स एंड पे यानी मेरा जो क्रॉस सेक्शन होगा मैं आपको करके दिखाती हूं उससे बेटर समझ में आएगा कि अगर मैं अपने हीरो सेक्शन को डिस्प्ले फ्लेक्स दे दूं सेव रिफ्रेश उससे क्या होगा यह वाली जो मेरा डिव है ये बिल्कुल यहां पर आ जाएगा और इस डिव को हम थोड़ी सी विड्थ दे देते हैं मतलब हम चाहते हैं इससे ज्यादा स्प्रेड करें यहां पर ऑलमोस्ट कितनी विड्थ आपको लग रही है 80 पर क्योंकि ये पूरा का पूरा डिव नहीं जा रहा मतलब ये जो वाइट वाला बॉर्डर है यह बिल्कुल एंड तक नहीं जा रहा वाइट वाला बॉर्डर कहां तक जा रहा है थोड़ा सा डिस्टेंस पर है लेट्स गिव इट लेट्स से 80 पर तो इसे हम विड्थ दे देते हैं 80 पर सेफ रिफ्रेश तो यह कुछ इस तरीके से दिख गया अब डिस्प्ले फ्लेक्स इसे दिया है तो जस्टिफाई कंटेंट हम कर देते हैं टू सेंटर रिफ्रेश किया सेंटर में आ गया और अब इसे नीचे ले जाने के लिए हम अलाइन आइटम्स फ्लेक्स एंड कर सकते तो क्रॉस एक्सिस कहां होगा टॉप से लेकर बॉटम की तरफ तो फ्लेक्स एंड कहां हो जाएगा बॉटम की तरफ तो इसीलिए मैंने अलाइन आइटम्स कर दिया फ्लेक्स एंड सेव रिफ्रेश तो ये क्या हो गया बिल्कुल एंड पर आ गया अब हम इसे एक मार्जिन दे सकते हैं फ्रॉम द बॉटम इसे बॉटम से कुछ मार्जिन दी जा सकती है लेट्स गिव इट अ मार्जिन फ्रॉम बॉटम मार्जिन बॉटम लेट्स गिव इट 25 पिक्सल्स सेव रिफ्रेश तो ये क्या हुआ 25 पिक्सल्स पर आ गया अब हम चाहे तो इमेज का ये जो साइज है ना हम इसे थोड़ा सा छो भी कर सकते हैं मतलब अगर इस बॉक्स को मुझे ऊपर की तरफ करना है तो डायरेक्टली हम अपने यह जो हीरो सेक्शन है इसी का साइज छोटा कर देते हैं लेट्स मेक इट 400 पिक्सल्स रिफ्रेश तो 400 पिक्सल्स करके कुछ ऐसा मुझे दिखाई देगा एंड आई थिंक इतना काफी है यह कुछ इसी तरीके का बॉक्स मेरे पास डिस्प्ले होकर आ रहा है जैसा मुझे यहां पर दिखाई दे रहा है हम चाहे तो इसे 350 भी कर सकते हैं 350 या 380 के अराउंड सेट करें तो रिफ्रेश कुछ ऐसा दिखाई देगा एंड दिस सीम्स मोर एप्रोप्रियेट यहां पर दिख रहे हैं जैसे थोड़ा सा इंस्पेक्ट करते हैं amazon-in क्स अलग-अलग ऑप्शंस को हम बॉक्सेस की फॉर्म में क्रिएट करेंगे तो सबसे पहले तो index.htm के अंदर आते हैं एंड यहां पर इस हीरो सेक्शन के बाद हम एक कंटेंट सेक्शन क्रिएट कर सकते हैं या इसे हम शॉप सेक्शन भी कह सकते हैं क्योंकि शॉपिंग करने के लिए यह सेक्शन बनाया जाएगा तो इसे शॉप सेक्शन कह देते हैं शॉप सेक्शन के अंदर हम डिफरेंट डिफरेंट बॉक्सेस क्रिएट करेंगे तो सबसे पहले एक क्लास बना लेते हैं बॉक्स वन इसी तरीके से हम बॉक्स टू बॉक्स थ्री चार बॉक्सेस के साथ स्टार्ट करते हैं लेट्स मेक इट बॉक्स टू लेट्स मेक इट बॉक्स थ्री लेट्स मेक इट बॉक्स फोर सेव रिफ्रेश तो यहां मेरे बॉक्स वन बॉक्स टू बॉक्स थी बॉक्स फोर आ जाएंगे अब चारों बॉक्सेस के लिए कुछ टेक्स्ट यहां पर दे देते हैं ये मेरा बॉक्स वन हो जाएगा यह मेरा बॉक्स टू हो जाएगा यह मेरा बॉक्स थ्री हो जाएगा यह मेरा बॉक्स फोर हो जाएगा सेव रिफ्रेश तोय चार बॉक्सेस मेरे पास आ गए अब मैं चाहती हूं चारों के चारों बॉक्सेस हैं इन बॉक्सेस को स्टाइलिंग देना हम स्टार्ट करें तो यहां पर शॉप सेक्शन का सीएसएस हम ऐड करना स्टार्ट करेंगे शॉप सेक्शन सबसे पहले तो अपने बॉक्सेस को हम कोई हाइट एंड विड्थ देने वाले हैं लेट्स गिव देम ऑल अ हाइट ऑफ लेट्स से 100 पिक्सल और अभी के लिए ताकि बॉक्स क्लियर हमें दिखाई दे इन्हें बॉर्डर भी दे देते हैं बॉर्डर दे देते हैं टू पिक्सल सॉलिड ब्लैक ये बॉर्डर हम बाद में हटा देंगे बट अभी के लिए इस तरीके का बॉर्डर हम देने वाले हैं तो बॉक्स सभी के लिए सेम स्टाइलिंग अगर मुझे रखनी है तो बॉक्स वन की जगह हम इसे बॉक्स लिख देते हैं यहां पर बॉक्स क्लास भी साथ में दे देते हैं यह मेरी दोबारा से बॉक्स क्लास हो गई यह मेरी एक और बॉक्स क्लास हो गई सेव रिफ्रेश तो ये क्या हुए चार बॉक्सेस मेरे पास क्रिएट हो गए हैं एंड इन चारों बॉक्सेस को बाय डिफॉल्ट 100% विड्थ मिली हुई है एंड हाइट हमने इनके लिए सेट कर दी है अब हम चाहते हैं जो बॉक्सेस है ना एक लाइन में लेट्स सपोज हम चार बॉक्सेस दिखाना चाहते हैं जैसे अगर इसे क्रॉस करें तो एक लाइन में amazonbusiness.in चारों बॉक्सेस को अगर सेम लाइन में लेकर आना है तो इनका जो कंटेनर है उस कंटेनर को हम कर सकते हैं डिस्प्ले फ्लेक्स तो कंटेनर है मेरे पास शॉप सेक्शन ऊपर जाकर लिख देंगे डॉट शॉप सेक्शन एंड इस कंटेनर को कर देंगे डिस्प्ले फ्लेक्स यहां लिख देते हैं डॉट सेव रिफ्रेश तो ये चारों बॉक्सेस सेम लाइन में आ गए और अब हम इन्हें कुछ विड्थ दे सकते हैं लेट्स गिव देम अ विड्थ ऑफ लेट्स सपोज 23 पर या 25 पर से स्टार्ट करें रिफ्रेश तो क्या हुए बॉक्सेस बिल्कुल इवनली आ गए मतलब 25 25 25 25 पूरी 100% विड्थ को इन्होंने ऑक्यूपाइड हम पूरी 100% विट नहीं ऑक्यूपाइड वेबसाइट पर अगर देखें तो यहां पर स्पेसिंग है मतलब ये बॉक्सेस पूरे के पूरे फिट नहीं हो रहे थोड़ी सी स्पेसिंग है तो हम इसको 25 से थोड़ी सी कम वैल्यू दे सकते हैं 20 पर अगर देंगे रिफ्रेश करेंगे तो कुछ ऐसे दिखाई देंगे और अगर इनके बीच में हमें स्पेस चाहिए और साइड में भी स्पेस चाहिए क्योंकि यहां क्या हो रहा है चारों बॉक्सेस हैं इन चार बॉक्सेस का एग्जांपल लेते हैं ये मेरा पूरा वाइट बॉक्स है और इसके लेफ्ट में भी स्पेस है राइट में भी उतनी स्पेस है यहां पर भी उतनी स्पेस है यहां पर भी उतनी यहां पर भी उतनी जब हमें हर जगह इवन स्पेस चाहिए होती है तो उसके लिए हम क्या करते हैं अपने कंटेनर को दे देते हैं जस्टिफाई कंटेंट स्पेस इवनली तो फ्लेक्स बॉक्स जो कांसेप्ट हमने पहले सीखा था वो इतना ज्यादा हमारे काम आ रहा है कि हर बॉक्स में स्पेसिंग ऐड करने के लिए हम फ्लेक्स बॉक्स को यूज कर रहे हैं तो सो दैट इज व्हाई फ्लेक्स बॉक्स का जो लेआउट है वो बहुत इंपॉर्टेंट होता है इसे करेंगे रिफ्रेश तो क्या हुआ इवन स्पेस आ गई बट यह स्पेस हमें थोड़ी सी ज्यादा लग रही है अब इसको नोटिस करेंगे थोड़ी सी ज्यादा स्पेस है एज कंपेयर टू द मेन वेबसाइट तो हम यहां पर इनकी विड्थ को बढ़ा के लेट्स मेक इट 23 पर रिफ्रेश करें अब थोड़ी सी ठीक स्पेस लग रही है तो यह मेरे बॉक्सेस क्रिएट हो गए अब हम चाहे तो इन बॉक्सेस को एक हाइट भी दे सकते हैं हाइट हमने अभी 100 पिक्सल्स दी है थोड़ी सी और बड़ी करें इसको 400 पिक्सल्स के अराउंड करते हैं तो इतनी हाइट हम दे सकते हैं अपने बॉक्सेस को यह मेरे बॉक्सेस क्रिएट हो गए अब हम चाहे तो बॉक्सेस के पीछे क्या हो रहा है यहां पर लेआउट कुछ ऐसा है कि ये जो मेरी इमेज है ये बॉक्सेस के बैकग्राउंड में भी आ रही है बट हम ऐसे नहीं क्रिएट करेंगे हम क्या करने वाले हैं हमारे जो बॉक्सेस वाला सेक्शन है शॉपिंग सेक्शन इसको अलग से एक बैकग्राउंड हम दे देते हैं कोई भी बैकग्राउंड आप दे सकते हैं शॉप सेक्शन को एक बैकग्राउंड कलर दे सकते हैं हम चाहे तो इसे पिंक बैकग्राउंड कलर भी दे सकते हैं रिफ्रेश करें तो ये पिंक हो जाएगा बट पिंक नहीं देने वाले हम कुछ और बैकग्राउंड कलर इसे देंगे ये जो हमारा ग्रीनिज कलर है इसके सिमिलर बैकग्राउंड कलर हम इसे देने वाले हैं तो वो चीज हमने ऑलरेडी फिगर आउट कर ली है सेम कलर हमें कॉपी करना है ये होने वाला है e2 e7 e6 सेव रिफ्रेश तो एक बैकग्राउंड कलर मुझे मिल गया बॉक्सेस को भी बैकग्राउंड कलर सेम क्यों मिल रहा है क्योंकि बॉक्सेस को हमें अलग से जाकर एक और बैकग्राउंड कलर देना पड़ेगा व्हिच इज इक्वल टू वाइट तो क्या हुआ मेरा बैकग्राउंड कलर अलग है और मेरे बॉक्सेस मुझे वाइट कलर के दिख रहे हैं बिल्कुल ऊपर की तरफ लाकर अब हम चाहे तो अपना बॉर्डर हटा भी सकते हैं बट थोड़ा सा अंदर का लेआउट सेट कर लेते हैं पहले क्या करेंगे सिंगल बॉक्स के लिए लेआउट सेट करेंगे सिंगल बॉक्स के लिए अगर मुझे लेआउट सेट करना है तो हम इस बॉक्स के एग्जांपल को लेकर चलेंगे सबसे पहले तो बॉक्स को इंस्पेक्ट कर लेते हैं इस बॉक्स के अंदर क्या-क्या आ रहा है यहां पर आ जाते हैं इस बॉक्स के अंदर सबसे ऊपर तो एक मेरा h2 टैग है हेडिंग टू आ रही है उसके अलावा मेरे पास मेरी एक बैकग्राउंड इमेज आ रही है नीचे मेरा एक शॉप नाउ का ऑप्शन आ रहा है तो इस तरीके का लेआउट मुझे प्रिपेयर करना है तो क्या करेंगे सबसे पहले अपने बॉक्स वन के लिए इस लेआउट को तैयार करेंगे बॉक्स वन के पास सबसे पहले तो एक h2 हेडिंग आ रही है h2 हेडिंग के अंदर यही लिख देते हैं हेल्थ एंड पर्सनल केयर उसके बाद मेरे पास एक इमेज आ रही है तो इस डिव को बना लेते हैं इसको क्लास दे देते हैं बॉक्स इमेज बॉक्स इमेज इसको हमने क्लास दे दी एंड उसके बाद में हमने एक और पैराग्राफ लिखा है जिसमें हम लिखते हैं सिर्फ सी मोर इसको कर लेते हैं सेव एंड यहां पर करेंगे रिफ्रेश तो बॉक्स वन के लिए यह मेरा h2 हेडिंग आ गई है यह मेरा सी मोर आ गया है अब सबसे पहले ये जो मेरा डिव है से हम एक बैकग्राउंड इमेज दे देते हैं यानी डॉट बॉक्स या इनफैक्ट हर बॉक्स को मुझे क्या करना पड़ेगा एक अलग इमेज देनी पड़ेगी बॉक्स टू को भी अलग इमेज देंगे बॉक्स थ्री को भी अलग इमेज देंगे तो ये जो बैकग्राउंड इमेजेस है इनके लिए ये हम डायरेक्टली यहीं पर ऐड कर सकते हैं मतलब इनलाइन में ऐड कर देंगे हम लिखेंगे बैकग्राउंड इमेज एंड बैकग्राउंड इमेज के लिए लिख देंगे बाद में यूआरएल एंड बॉक्स वन की इमेज कौन सी होने वाली है बॉक्स वन यहां से दे देख लेते हैं बॉक्स 1 अंडर इमेज बॉक्स 1 इमेज डॉट जेपीजी इसे कर लेंगे सेव रिफ्रेश अभी डिव को हमने साइज नहीं दिया है इसलिए इमेज दिख नहीं रही एक और छोटी सी चीज आपको नोटिस करनी है जो काफी सारे बिगिनर्स यहां पे मिस्टेक करेंगे कि स्टाइल टैग जब हम इनलाइन लिखेंगे ना तो उसमें डबल कोट्स बाहर की तरफ आएंगे और अंदर की तरफ हमें सिंगल कोट्स देने हैं मतलब जैसे यूआरएल बैकग्राउंड इमेज के लिए हम यहां पर डबल कोट्स दे देते थे वैसे यहां पर डबल कोट्स नहीं आ रहे होंगे इक्सड मेरी जो बॉक्स इमेज होने वाली है इसे हम एक हाइट दे सकते हैं लेट्स गिव इट अ हाइट ऑफ 100 पिक्सल्स रिफ्रेश तो ये 100 पिक्सल्स डिस्प्ले हो रहा है बट 100 पिक्सेल से ज्यादा है इसकी हाइट ये वाला जो एरिया है इसकी हाइट बॉक्स का मैक्सिमम हाइट कवर कर रही है यानी बॉक्स को अगर मैंने हाइट दी है कितनी हाइट दिया हमने बॉक्स को अपने बॉक्स को हमने हाइट दि है 400 पिक्सल्स तो एटलीस्ट 300 पिक्सल्स मेरी बॉक्स इमेज की हाइट है ये क्या हो रहा है 300 पिक्सल्स के अराउंड मेरी हाइट आने वाली एंड यहां पर यह जो मेरा पूरा का पूरा एरिया है कंटेंट एरिया इसके बाहर काफी सारी स्पेसिंग है स्पेसिंग को अगर हमें टेस्ट करना हो तो कैसे करें यहां पर जा सकते हैं एंड यह वाला जो मेरा एरिया है इस बॉक्स के लिए देखें तो हमने क्या किया है पैडिट कर रखी है 20 पिक्सेल जीरो पिक्सेल 15 पिक्सल्स तो वो सिमिलर पैडिट कर सकते हैं हमने क्या किया अपने बॉक्स के अंदर एक पैडिट ऐड कर रखी है 20 पिक्सल्स जीरो पिक्सल्स एंड 15 पिक्सल्स आई होप इट वाज 15 पिक्सल्स दोबारा एक बार चेक कर लेते हैं ये पैडिट है 15 पिक्सल्स के इक्वल यस सेव कर लिया रिफ्रेश कर लिया तो ये क्या हुआ एक पैडिट के साथ मेरे एलिमेंट्स आ गए हैं अब हम क्या कर सकते हैं इन एलिमेंट्स को सारे के सारे बॉक्स को लेफ्ट की तरफ से कोई मार्जिन भी दे सकते हैं तो टॉप से मार्जिन देने के लिए हम क्या करेंगे ये जो मेरा h2 हेडिंग टैग है इमेज है और सी मोर है इन तीनों को एक और अलग डिव के अंदर ऐड कर देते हैं यानी ये जो तीनों चीजें हैं इनको यहां से करेंगे कट एक और क्लास बना लेते हैं लेट्स कॉल इट बॉक्स कंटेंट क्योंकि बॉक्स का जितना भी कंटेंट है वो हम इसके अंदर ऐड करने वाले हैं यहां बॉक्स कंटेंट के अंदर ये दोनों चीजें आ गई मेरी h2 आ गई मेरा डिव आ गया मेरा p आ गया इसको कर लेते हैं सेव अब ये जो मेरा बॉक्स कंटेंट है इसको हम मार्जिन दे देंगे तो यहां पर आ गए बॉक्स कंटेंट तो इसे हम एक मार्जिन दे देते हैं लेफ्ट से लेफ्ट से 10 पिक्सल्स के अराउंड मार्जिन दे दी तो ये कुछ यहां पर शिफ्ट हो गया एंड इसे राइट से भी मार्जिन दे सकते हैं क्योंकि यहां पर नोटिस करें अगर लेफ्ट से भी मेरे पास खाली एरिया है राइट से भी खाली एरिया है अब यहां पर एक चीज आपके दिमाग में आ रही होगी कि हम सिर्फ बॉक्स वन पे इतना फोकस क्यों कर रहे हैं क्योंकि जैसे हमने एक बॉक्स को डिजाइन कर लिया हम क्या करने वाले हैं सारे के सारे बॉक्सेस पर सेम स्टाइलिंग रिप्लिकेट कर देंगे क्योंकि बाकी सारे मतलब ये ब्यूटी पिक्स वाला बॉक्स और इसका जो लेआउट है वो दोनों सेम ही है ये तीनों बॉक्सेस का लेआउट सेम ही है लास्ट में कुछ ऑप्शन है मेरे पास बीच में बैकग्राउंड इमेज है ऊपर मेरे पास कुछ टेक्स्ट है तो एक बॉक्स का अगर मैंने लेआउट फिगर आउट कर लिया तो मेरा सब पर मुझे बस कॉपी पेस्ट करना करना है इसीलिए हम सिर्फ बॉक्स वन पर अभी के लिए फोकस कर रहे हैं तो मार्जिन लेफ्ट 10 पिक्सल्स आ गई एंड मार्जिन राइट भी यहां पर दे देते हैं मार्जिन राइट को भी सेट कर देते हैं लेट्स से टू 10 पिक्सेल सेव रिफ्रेश तो क्या हुआ यहां से मेरे पास मार्जिन आ गई हम चाहे तो पिक्सल्स की जगह इसे रेम की फॉर्म में भी लिख सकते हैं यानी एक रेम और एक रेम की अगर हम मार्जिन दे दें सेफ रिफ्रेश रम कहने का मतलब होगा बेसिकली अराउंड 16 पिक्सल्स आई थिंक 16 पिक्सल्स इज द रूट फॉन्ट साइज यहां पर मेरे पेज के लिए तो यह मेरा पेज आ गया एंड बॉक्स को यह जो मेरा बॉक्स है यह मेरी इमेज से जाकर टकरा रहा है तो हम चाहे तो इसे थोड़ी सी स्पेस दे सकते हैं जैसे मेरा बॉक्स है उसे मार्जिन दे सकते हैं फ्रॉम टॉप लेट्स गिव इट अ मार्जिन ऑफ फाइव पिक्सल्स सेव रिफ्रेश तो क्या हुआ थोड़ा नीचे की तरफ आ गया हम चाहे तो और थोड़ी सी मार्जिन दे सकते हैं 15 पिक्सल्स अगर कर दें तो और थोड़ा सा नीचे की तरफ आ जाएगा कंटेंट एंड अब हमने क्या किया है अब इसकी हम बॉर्डर चाहे तो हटा सकते हैं बॉर्डर हटा दिया रिफ्रेश किया ये क्या हुआ मेरा एक इंडिविजुअल बॉक्स आ गया बट इस बॉक्स में अभी भी अंदर की तरफ जो स्पेसिंग है वो इतनी खास है नहीं क्योंकि ये जो इमेज है इसके ऊपर एंड नीचे की तरफ काफी सारी स्पेसिंग अवेलेबल है तो उसके लिए क्या करेंगे बॉक्स इमेज के लिए कुछ-कुछ स्पेसिंग हम ऐड करेंगे पहले तो इसका ये जो इमेज है ये क्या हो रही है अभी रिपीट हो रही है तो उसके लिए हम इसे करने वाले हैं बैकग्राउंड इमेज एंड रिपीट की जगह इसे हम कर देते हैं सेट टू कवर और एक और ऑप्शन हमारे पास होता है बैकग्राउंड रिपीट का जिसको हम सेट कर कर देते हैं टू नो रिपीट रिफ्रेश तो क्या होगी अब रिपीट नहीं होगी या यहां पर कुछ और ट्राई करते हैं लेट्स गो फॉर कंटेन सेव रिफ्रेश तो कंटेन होकर बेसिकली हमारी ये जो इमेज है यह काफी छोटी है अब इस इमेज को ऊपर और नीचे से मार्जिन देने के लिए यहां पर इमेज के लिए मार्जिन सेट कर सकते हैं मार्जिन फ्रॉम टॉप लेट्स सेट इट टू वन रेम एंड मार्जिन फ्रॉम बॉटम लेट्स सेट इट टू वन रेम सेव रिफ्रेश क्या हुआ मार्जिन इसके पास ऐड होकर आ गई एंड ये जो सीमोर है इसके लिए हम टेक्स्ट का कलर चेंज कर सकते हैं बेसिकली जो हमने यहां क्लिक हेयर टू गो टू amazon2 का कलर है यहां आके चेक करेंगे तो इसी तरीके का कलर है तो हम यहां सेट कर सकते हैं बॉक्स कंटेंट के अंदर जो भी मेरा पैराग्राफ टैग है उसके लिए कलर मेरे पास हो जाएगा यहां से ऊपर से कलर अपना कॉपी कर लेते हैं कहां गया पैनल के अंदर हमने कलर सेट किया था हीरो सेक्शन के अंदर यह वाला कलर जो हमने सेट किया था इस कलर को करते हैं कॉपी पेस्ट सेव रिफ्रेश इस तरीके से सीमोर आ गया हमारे पास हेल्थ एंड पर्सनल केयर हमारे पास आ गया एंड मेरे पास मेरी इमेज आ गई अब जो हमारी बॉक्स वन के लिए हमने इमेज दी है बॉक्स इमेज इस बॉक्स इमेज के लिए अभी के लिए हम सीधा इसे कवर ही सेट करने वाले हैं सेव रिफ्रेश तो कवर सेट करने से ये कुछ ऐसी दिखाई देगी अच्छा एक छोटी सी मिस्टेक है जो हम यहां पे कर रहे थे हमने यहां बैकग्राउंड इमेज लिखा है जबकि हमें बैकग्राउंड साइज लिखना चाहिए था तभी मैं सोचूं यह चेंज क्यों नहीं हो रही रिपीट क्यों हो रही है इमेज अब अगर रिफ्रेश करेंगे तो अब इमेज थोड़ा सा बेटर दिखाई देगी तो हमने क्या किया अपने एक बॉक्स को क्रिएट कर लिया और यही सेम जो लेआउट है वह हम अपने मल्टीपल बॉक्सेस पर अप्लाई कर सकते हैं तो बेसिकली कुछ नहीं करना मुझे क्या करना है कॉपी करना है बस यह बॉक्स कंटेंट वाला जो डिव है इसे कॉपी करके अपने बॉक्स टू की जगह हम डाल सकते हैं यहां पर डाल दिया सेव किया रिफ्रेश किया तो यह मेरा बॉक्स टू तैयार सेम जो कंटेंट है उसे यहां पर बॉक्स थ्री की जगह कॉपी करके डाल सकते हैं थोड़ा सा लेआउट बेटर रख लेते हैं यहां पर डाला रिफ्रेश किया सेम लेआउट आ गया यही सेम चीज अपने बॉक्स फोर की तरफ हम डाल सकते हैं रिफ्रेश किया सेम लेआउट आ गया एंड इसी तरीके से सिर्फ चार नहीं हम आठ बॉक्सेस क्रिएट कर सकते हैं यानी मैं कुछ नहीं करूंगी ये जो सारे डिब्स हैं इन्हीं को कॉपी करके नीचे चार और डिव पेस्ट कर दिए रिफ्रेश किया तो क्या हुआ यहां पर ये मेरे सारे के सारे डिव एक ही लाइन के अंदर आ गए हैं तो ये रैप होने चाहिए थे बाय डिफॉल्ट मैं क्या चाहती हूं कि मैक्सिमम एक रो के अंदर चार ही आए उसके बाद नेक्स्ट लाइन में आ जाए तो उसके लिए हम फ्लेक्स रैप को यूज कर सकते हैं तो बेसिकली बॉक्स पर जाकर जहां हमने डिस्प्ले फ्लेक्स किया था डिस्प्ले फ्लेक्स के नीचे हम कर सकते हैं फ्लेक्स रैप को सेट कर सकते हैं टू रैप सेफ रिफ्रेश तो क्या हुआ चार बॉक्सेस एक लाइन पर आ गए अब इन बॉक्सेस के अंदर अलग-अलग हम मल्टीपल इमेजेस ऐड कर सकते हैं एंड हर बॉक्स के हिसाब से एक बार इमेज ऐड कर देते हैं कुछ नहीं करना हमें जाकर बस जितनी भी हमारी इमेजेस हैं जैसे बॉक्स वन वाली इमेज है इसको हम टू सेट कर देंगे इसको हम थ्री सेट कर देंगे बॉक्स थ्री वाली को बॉक्स फोर वाली को फोर सेट कर देंगे बॉक्स फाइव वाली को फाइव सेट कर देंगे एंड इस तरीके से सिक्स सेवन एंड एट नाउ सेव रिफ्रेश तो क्या हुई अलग-अलग इमेजेस मेरे पास ऐड होकर आ गई हैं एंड अब ये मेरी पूरा amazonbusiness.in बस एक की स्टाइलिंग को मास्टर कर लेना है एक का हमने सही से लेआउट डिजाइन कर लिया तो बाकी पर सिर्फ हमें कॉपी पेस्ट करना होता है जो कि बहुत इजी है करना अब हम क्या कर सकते हैं इनके नाम चेंज कर सकते हैं डिपेंडिंग अपॉन यहां लिखा क्या हुआ है जैसे यहां पर हेल्थ एंड पर्सनल केयर है ये कह सकते हैं हमारे क्लोथ्स का सेक्शन है तो यहां हेल्थ एंड पर्सनल केयर की जगह हम क्लोथ्स लिख सकते हैं हम यहां चाहे तो इसको फर्नीचर सेक्शन रख सकते हैं जो मेरा बॉक्स थ्री है तो दिस इज बेसिकली क्लॉथस यह हो जाएगा फर्नीचर सेफ तो यह फर्नीचर हो गया यहां पर डिवाइसेसपोर्ट मेक इट इलेक्ट्रॉनिक्स सेव रिफ्रेश दिस इज इलेक्ट्रॉनिक्स इस तरीके से यह मेकअप इसे मेकअप लिख सकते हैं मेकअप इनफैक्ट इसका यहां पर ब्यूटी पिक्स इसे लिख सकते हैं जो सेम एन वेबसाइट पर दिया हुआ है ब्यूटी पिक्स इसको कह सकते हैं यह वाली जो इमेज है उसके लिए वैसे ये इमेज यहीं से लिए हमने इस इमेज के ऊपर क्या लिखा हुआ था इ वी स्क्रोल टू द अभी यह इमेज मुझे दिख नहीं रही बट आई स्वेर मैंने ये इमेज यहीं से उठाई है amazon2 बॉक्स थ्री हटा सकते हैं यह जो बॉक्सेस थे ये हमने अपनी कन्वीनियंस के लिए इनको एक क्लास दी थी अलग से ये जो क्लास है बॉक्स वन बॉक्स टू बॉक्स थ्री बॉक्स फोर इस का एस सच कोई मतलब है नहीं तो इसको हम कर सकते हैं पेट केयर एंड यह वाला जो बॉक्स है यहां से बॉक्स थ्री हटा देंगे इसको हम कर सकते हैं न्यू अराइवल इन टॉयज एंड ये जो लास्ट बॉक्स है इसके लिए हम लिख सकते हैं यहां पर वी कैन मेक इट डिस्कवर फैशन ट्रेंड्स यहां इसकी h2 हेडिंग में चेंज कर देंगे डिस्कवर फैशन ट्रेंड्स सेफ रिफ्रेश तो ये इस तरीके से मेरी amazonbusiness.in जो बैक टू टॉप बैक टू टॉप इसी तरीके से लिखा हुआ है इसे करेंगे रिफ्रेश तो अब ये मेरा फुटर आ गया है नीचे की तरफ बैक टू टॉप अब ये जो बैक टू टॉप है इसके लिए स्टाइल ऐड करेंगे तो यहां हम स्टाइल ऐड करने वाले हैं अपने फुटर के लिए अब फुट पैनल वन के लिए कुछ-कुछ स्टाइल ऐड करेंगे सबसे पहले तो इसको एक बैकग्राउंड कलर दे देते हैं इसका जो बैकग्राउंड कलर है वैसे तो इंस्पेक्ट करके या हम राइट की तरफ काफी सारे ऑप्शन देखें तो हमें ढूंढने को मिल जाएगा बट ऑलरेडी हमने फिगर आउट कर रखा है बैक बै ग्राउंड कलर इस पैनल का है हमारे पास 3747 5a तो इस तरीके का बैकग्राउंड कलर है और टेक्स्ट को हम कलर देने वाले हैं वाइट वाइट कलर ही है यहां पर यह रिफ्रेश किया तो ये वाइट आ गया अब जो मेरा फुट पैनल है इसे हम एक फिक्स्ड हाइट दे सकते हैं यहां पर इंस्पेक्ट करें तो इसकी हाइट अराउंड 50 पिक्सल्स है 49 है सिंपलीसिटी के लिए लेट्स कीप इट 50 पिक्सल्स सेफ एंड रिफ्रेश इसे क्या किया हमने पैनल को हाइट दे दिया है एंड अब हम इसे डिस्प्ले फ्लेक्स दे सकते हैं सारी चीजों को सेंटर करने के लिए डिस्प्ले फ्लेक्स दे दिया जस्टिफाई कंटेंट सेंटर कर दिया अलाइन आइटम सेंटर कर दिया अब तो आदत हो जानी चाहिए चीजें लिखने की तो ये बैक टू टॉप बिल्कुल सेंटर में आ गया बैक टू टॉप का फॉन्ट भी हम चेंज कर सकते हैं फॉन्ट साइज अभी इसके लिए छोटा सा फॉन्ट साइज हमें रखना है तो इसको हम फॉन्ट साइज दे सकते हैं लेट्स गिव इट 0.5 रेम सेव रिफ्रेश तो ये छोटा सा बैक टू टॉप मेरे पास आ गया है एंड इस तरीके से मेरा पैनल वन तैयार हो गया अब हम चाहे तो इसे ऊपर से थोड़ा सा स्पेस दे सकते हैं तो मेरा जो पूरा का पूरा फुटर है उसी को हम स्पेस दे देते हैं फुटर क्लास नहीं जो मेरा फुटर ही है इसको एक मार्जिन टॉप दे सकते हैं मार्जिन फ्रॉम टॉप लेट्स गिव इट 15 पिक्सल्स सेव रिफ्रेश तो थोड़ा सा टॉप से स्पेस बनाकर आ गया अब बात करते हैं अपने पैनल टू की यह मेरा पैनल टू है जिसे हम डिजाइन करने वाले हैं यह जो मेरा सेकंड बॉक्स है तो इसको डिजाइन करने के लिए हम आ जाते हैं यहां पर अपने फुट के अंदर एक फुट पैनल टू नाम से क्लास क्रिएट करेंगे इस पैनल टू क्लास में हम क्या करेंगे डिफरेंट डिफरेंट लिस्ट बनाएंगे क्योंकि इसको अगर आप इंस्पेक्ट करें ये क्या है ये एक लिस्ट है जिसके अंदर मल्टीपल आइटम्स हैं दिस इज बेसिकली एन अन ऑर्डर्स ये भी अन ऑर्डर्स कह सकते हैं इसको भी कह सकते हैं इसको भी कह सकते हैं तो हम एक अन ऑर्डर्स बनाने वाले हैं इसको कर लेते हैं कॉपी एंड यहां पर अपनी एक अनऑथराइज्ड है यहां आप नोटिस करें गेट टू नो साइज में बड़ा है और बाकी सारे ऑप्शन छोटे हैं तो इन सब को तो हम एंकर टैग की फॉर्म में लिख सकते हैं और यह हम इसको पैराग्राफ टैग में भी लिख सकते हैं या कोई और स्पेशल क्लास दे सकते हैं तो इसको पैराग्राफ टैग में लिख लेते हैं यहां पर इसे करते हैं कट यह आ गया इसे भी करेंगे कट ब्लॉग उसके बाद अबाउट रिलेशंस हमारे पास आ गया है अन डिवाइसेसपोर्ट है तो हम इसको डिस्प्ले ब्लॉक दे सकते हैं पर स्टाइलिंग ऐड करने से पहले क्या करेंगे इसके चार पार्ट्स करेंगे यानी चार डिफरेंट डिफरेंट आप चाहे तो इन सभी को भी इंडिविजुअली कॉपी कर सकते हैं इन सारी की सारी लिस्ट को बट हमने क्या किया है इसी सेम चीज को हमने चार बार कॉपी कर लिया तो लुक एंड फील तो सेम रहेगा बट कंटेंट उतना सही नहीं होगा बट कोई नहीं थोड़ा सा ट्राई करके देखते हैं तो ये फुट पैनल टू के अंदर हमने चार बार अपनी अन ऑर्ड लिस्ट को क्रिएट कर लिया है अब इसे हम कुछ-कुछ स्टाइल देने वाले हैं इसे कर लेते हैं सेव स्टाइल सीएए के अंदर जाएंगे और अब बात करेंगे फुट पैनल टू की फुट पैनल टू के अंदर सबसे पहले तो मुझे क्या करना पड़ेगा इसका बैकग्राउंड कलर सेट करना पड़ेगा अब बैकग्राउंड कलर जो इसका है इट इज वेरी सिमिलर टू जो मेरे ऊपर वाले नेविगेशन पैनल्स के बैकग्राउंड कलर हैं तो यहां हम जो कलर सेट करेंगे दैट इज ये 22 f3d वाला कलर हम सेट करने वाले हैं रिफ्रेश ये वाला कलर हमारे पास आ गया एंड टेक्स्ट का कलर जो हम सेट करेंगे दैट इज इक्वल टू वाइट सेव रिफ्रेश तो इस तरीके से मेरे टेक्स्ट का कलर आ गया अब हम इस पैनल को एक हाइट देने वाले हैं लेट्स गिव इट अ हाइट ऑफ 500 पिक्सल्स रिफ्रेश किया तो यह मेरी पूरी हाइट आ गई एंड सारी की सारी चीजों को मतलब यह अगर मेरा एक बॉक्स है यह अगर मेरा दूसरा बॉक्स है यह मेरा तीसरा बॉक्स है इन चीजों को सबसे पहले तो क्या करेंगे यह जो मेरे पैराग्राफ या एंकर टैग्स है डिस्प्ले ब्लॉक डिस्प्ले ब्लॉक करने से क्या होगे यह सारे के सारे एक सिंगल लाइन में आ जाएंगे तो यह मेरा एक कंटेंट पीस हो गया एक कंटेंट पीस हो गया इस तरीके से सारे के सारे सिंगल लाइन में आ जाएंगे अब हम चाहते हैं कि सारी की सारी अन ऑर्ड लिस्ट एक के बाद एक के बाद एक सिंगल रो में आ जाए उसके लिए उनके पेरेंट कंटेनर को हम डिस्प्ले फ्लेक्स कर सकते हैं तो जब भी चीजें सिंगल रो में चाहिए पेरेंट कंटेनर को डिस्प्ले फ्लेक्स कर सकते हैं पेरेंट कंटेनर कौन है फुट पैनल टू तो इसको हम कर देंगे डिस्प्ले फ्लेक्स सेफ रिफ्रेश तो क्या हुआ चारों की चारों चीजें एक साथ आ गई हैं एंड इसके अलावा हम इसे कर सकते हैं जस्टिफाई कंटेंट स्पेस इवनली सेव रिफ्रेश तो ये क्या हुए इवनली आकर मेरे पास स्पेस हो गए एंड यही सिमिलर सा लेआउट मुझे यहां पर देखने को मिलेगा स्पेस इवनली अब हम इनके टेक्स्ट साइज के साथ थोड़ा सा खेल सकते हैं मेरा जो पैराग्राफ है उसको तो सेम टेक्स्ट साइज रखते हैं इन सबका एंकर टैग्स का टेक्स्ट साइज मुझे छोटा करना है तो कर देंगे 0.85 रेम सेफ रिफ्रेश य टेक्स्ट साइज थोड़ा सा मेरे पास छोटा हो गया साथ के साथ इन सबको मार्जिन दे सकते हैं फ्रॉम टॉप लेट्स गिव देम ऑल अ मार्जिन फ्रॉम टॉप ऑफ 10 पिक्सेल सेव रिफ्रेश तो ये क्या हुए थोड़े से मार्जिन के साथ आ गए हैं अब यहां पर जाकर इंस्पेक्ट करें तो यह जो मेरे ऑप्शंस है इन सबका जो फॉन्ट कलर है दैट इज नॉट एगजैक्टली वाइट ये जो एंकर टैग में ऑप्शंस है इनका फॉन्ट कलर है डबल डी डडी डडी यहां पर जाकर हम इनका कलर सेट कर सकते हैं टू हैश थोड़ा सा ग्रेश कलर आ जाएगा रिफ्रेश करेंगे तो ये मेरे पास थोड़ा सा ग्रेश कलर आ गया अब हम चाहे तो अन ऑर्डर लिस्ट से ऊपर की तरफ थोड़ा सा स्पेस ले सकते हैं तो यहां पर मेरी जो अन ऑर्डर लिस्ट है उसे मार्जिन मिल जाएगा फ्रॉम टॉप लेट्स गिव इट अ मार्जिन ऑफ 10 पिक्सेल सेव रिफ्रेश तो टॉप से थोड़ा सा नीचे आ गए 20 पिक्सल्स अगर ले ले तो कुछ यहां पर आ जाएंगे तो इस तरीके से हमने यह वाले जो पैनल टू है मेरा फुटर का बेसिकली इसको क्रिएट कर लिया है हम चाहे तो एक-एक ऑप्शन जाकर हम चेंज कर सकते हैं बट उसको अभी के लिए हम चेंज नहीं करने वाले क्योंकि उसमें बहुत सारा टाइम एक्स्ट्रा आप ही का वेस्ट होगा आप चाहे तो अपने टाइम में जाकर इसको चेंज कर सकते हैं अब बात करेंगे अपने पैनल थ्री की पैनल थ्री हम यह वाला पैनल बनाएंगे इस पैनल के अंदर बेसिकली हम कहेंगे फुट पैनल थ्री के अंदर बेसिकली एक और हम लोगो ऐड करने वाले हैं तो अब स्टाइल की तरफ आ जाते हैं सबसे पहले जो मेरा फुट पैनल थ्री होगा उसे एक बैकग्राउंड कलर हम दे देंगे तो इसका जो बैकग्राउंड कलर है वो ऊपर वाले कलर से बिल्कुल सेम है तो इसे एक बैकग्राउंड कलर दे देते हैं व्हिच इज द सेम एज दिस बैकग्राउंड कलर और टेक्स्ट भी इसे हम सेम देने वाले हैं व्हिच इज वाइट सेव कर लिया रिफ्रेश कर लिया वैसे वाइट का कलर देने की जरूरत नहीं है क्योंकि टेक्स्ट अलग होगा एंड ये जो छोटी सी लाइन है जो लाइन यहां पे आ रही है इसको क्रिएट करने के लिए हम इसे एक बॉर्डर दे देते हैं बॉर्डर फ्रॉम टॉप इसे हम देने वाले हैं लेट्स से 0.5 पिक्सल सॉलिड वाइट बॉर्डर सेव रिफ्रेश तो ये क्या हुआ छोटा सा मेरे पास बॉर्डर आ गया इसके बाद इसके अंदर जो लोगो है लोगो में हम अपना लोगो ऐड करेंगे एज अ बैकग्राउंड इमेज अब बैकग्राउंड इमेज हम यहां से कॉपी कर सकते हैं पूरा कॉपी एंड यहां पर पेस्ट सेव रिफ्रेश तो अभी जो मेरा लोगो है वो दिखाई नहीं दे रहा क्योंकि हमने अपने डिव को थोड़ी इसकी विड्थ को यहां से हटा लेते हैं सेव रिफ्रेश तो यहां बेसिकली हमारा लोगो बीच में कहीं पर अपीयर होना चाहिए बट फुट पैनल को हमने कोई हाइट नहीं दी अगर मुझे इसे हाइट देनी है तो यहां हम इंस्पेक्ट कर सकते हैं कितनी हाइट देनी चाहिए इस पैनल की एप्रोक्सीमेट जो हाइट है दिस इज अराउंड 68 पिक्सल्स वी कैन गिव इट 70 पिक्सेल सेव रिफ्रेश तो ये फुट पैनल की एक सेट हाइट आ जाएगी हम लोगो को भी एक विड्थ दे सकते हैं लेट्स गिव इट अ विड्थ ऑफ़ 100 पिक्सेल सेव रिफ्रेश तो यहां मेरा लोगो कुछ यहां अपीयर हो रहा है अब इस लोगो को सेंटर कराने के लिए मैं क्या कर सकती हूं इसका जो कंटेनर है यानी फुट पैनल थ्री इसे हम दे सकते हैं डिस्प्ले फ्लेक्स जस्टिफाई कंटेंट सेंटर सेव रिफ्रेश तो ये लोगो सेंटर में आ गया वर्टिकली अगर सेंटर में करना है तो उसके लिए अलाइन आइटम्स एक्स्ट्रा ऐड कर देंगे उसके लिए भी सेंटर सेव रिफ्रेश तो यहां पर सेंटर में आ गया अब आ जाते हैं अपने लास्ट पार्ट की तरफ जो मेरा यह वाला फोर्थ पैनल होने वाला है जिसमें कॉपीराइट कंडीशन ये सारी चीजें मेंशन है तो यहां पर एक और डिव क्रिएट कर लेते हैं इस डिव को हम नाम देंगे फुट पैनल फोर फुट पैनल फोर हमने इसको नाम दिया इसके अंदर दो कॉम्पोनेंट्स होंगे यानी दो लाइने हैं एक है मेरा ये वाला डिव एक है मेरा ये सेकंड वाला डिव तो फर्स्ट वाला जो डिव है इसको हम फुट ऑप्शंस कह सकते हैं या काफी सारे डिफरेंट नाम है जो उसको दिए जा सकते हैं ये बेसिकली पेजेस हैं जिसकी तरफ रीडायरेक्ट कर रहा है तो हम इसे नाम दे देते हैं डिव को पेजेस इसके अंदर हम मल्टीपल एंकर टैग्स क्रिएट कर लेंगे तो कंडीशंस ऑफ यूज कंडीशंस ऑफ यूज दूसरे वाला जो एंकर टैग है इसे हम लिख सकते हैं प्राइवेसी नोटिस एंड तीसरे वाला जो एंकर टैग है इसे हम लिख सकते हैं योर एड्स प्रिव चॉइस योर एड्स प्राइवेसी चॉइसेज करेंगे सेव रिफ्रेश तो यह मेरा फोर्थ पैनल मुझे यहां पर दिखाई दे रहा है और इसमें सेकंड लाइन के अंदर हम ऐड करने वाले हैं अपना एक डिव जिसकी क्लास हम दे सकते हैं कॉपीराइट कॉपीराइट के अंदर यह टेक्स्ट है जिसको हम कॉपी कर सकते हैं सीधा य लास्ट वाली जो लाइन है कॉपी एंड लेट्स पेस्ट इट सेव रिफ्रेश तो यह मेरा सेकंड लाइन में टेक्स्ट आ गया अब यहां पर अपने पैनल फोर की स्टाइलिंग ऐड करेंगे सीएसएस के अंदर आ जाते हैं फुट इसे कर लेते हैं डॉट फुट डॉट फुट पैनल फर सबसे पहले तो इसे एक बैकग्राउंड कलर दे देते हैं लेट्स गिव इट अ बैकग्राउंड कलर यह वाला जो बैकग्राउंड कलर है ये मुझे हेडर के बिल्कुल सिमिलर लग रहा है मतलब हमारी जो वेबसाइट का हेडर था इसे सेम बैकग्राउंड कलर हम देने वाले हैं जो हमने हेडर को दिया था यह वाला कलर कॉपी करते हैं एंड वल पेस्ट इट जो हमने नाव बार को कलर दिया था सेव किया रिफ्रेश किया तो ये मेरा कलर आ गया फंट को हम कलर दे सकते हैं है वाइट सेव रिफ्रेश तो फॉन्ट को वाइट कलर हमने दे दिया अब यहां पर हमें चीजों को थोड़ा सा सेंटर करना है तो सेंटर करने के लिए इसे हम डिस्प्ले दे सकते हैं फ्लेक्सस एंड जस्टिफाई कंटेंट सेंटर एंड अलाइन आइटम्स सेंटर सेव रिफ्रेश तो क्या हुई चीजें सारी की सारी सेम लाइन पर आ गई अभी के लिए क्या करेंगे ये हटा देते हैं क्योंकि हमें चीजें सेम लाइन पर नहीं चाहिए तो अलग-अलग लाइंस को अलग-अलग स्टाइल करने की कोशिश करते हैं सबसे पहले तो फुट पैनल को एक हाइट भी सेट कर देते हैं हाइट कितने होने वाली है इसकी हाइट होगी एप्रोक्सीमेटली 76 पिक्सल्स दी हुई है लेट्स मेक इट एन इवन 100 पिक्सेल सेव रिफ्रेश तोय 100 पिक्सल्स की हाइट है अब इसमें सबसे पहले तो फंट साइज सेट कर देते हैं एक मेरे पास है मेरे पेजेस एंड एक मेरे पास है मेरा कॉपीराइट पेजेस का जो फंट साइज है लेट्स यह फंट साइज काफी छोटा है सो लेट्स सेट द फट फट साइज टू 0.7 रेम्स सेव रिफ्रेश ये छोटा फंट साइज आ गया एंड इन फैक्ट सिमिलर फंट साइज हम दे सकते हैं अपने कॉपीराइट को सेव रिफ्रेश तो कॉपीराइट के पास भी छोटा सा मेरे पास फॉन्ट साइज आ गया फुट पैनल की हाइट हम थोड़ी सी छोटी कर सकते हैं 80 पिक्सल्स अगर इसे कर दें तो यह अब थोड़ा सा और एप्रोप्रियेट के लिए भी टेक्स्ट अलाइन सेंटर सेव रिफ्रेश तो क्या हुआ सेंटर में टेक्स्ट अलाइन हो गया एंड ऊपर से अपना जो पेजेस है इसे हम थोड़ी सी लेट्स गिव इट अ पैडिप जस को हम पैडिकल्स गिव इट अ पैडिट ऑफ 25 पिक्सेल सेव रिफ्रेश तो क्या हुआ अब थोड़ा सा सेंटर की तरफ आ गया है इन दोनों लाइंस के बीच में भी मुझे थोड़ा सा डिस्टेंस चाहिए तो कॉपीराइट को भी एक पैडिट दे सकते हैं टॉप से नहीं तो मार्जिन भी दे सकते हैं थोड़ी सी पाच पिक्सल्स रिफ्रेश तो थोड़ा सा ये नीचे आ गया अब ये जो फंट साइज एंड टेक्स्ट अलाइन है यह दोनों की दोनों चीजें जाकर फुट पैनल के अंदर लिखी जा सकती हैं इसे अगर हम हटा दें सेव रिफ्रेश तो ये सेम स्टाइलिंग अप्लाई करेगी तो दो बार हमें सेम चीज नहीं लिखनी पड़ेगी बेसिकली अगर हम दो बार सेम चीज लिखते हैं कोड के अंदर तो वो देखने में अच्छा नहीं होता तो इसलिए कोड की लाइन मिनिमाइज करने की कोशिश करनी चाहिए तो इस तरीके से हमारा जो वेब पेज है 64 सीएसएस की लाइंस लिखी हैं html5 लिखी हैं तो काफी सारी लाइनें ऑफ कोड लिखने के बाद फाइनली हमारी सारी सीएसएस तैयार है इसको रिफ्रेश करके देख लेते हैं यह मेरा amazononline.in एंड आई होप कि जो क्लोन है इसको बनाने में आपको मजा आया हो अब आप कई सारी चीजें सोच सकते हैं कि जब हम चीजों पर क्लिक कर रहे हैं तो वर्क क्यों नहीं कर रही हिसाब से ये फ्रंट एंड के हिसाब से एक अच्छा खासा प्रोजेक्ट है अब जावास्क्रिप्ट सीखकर और इसके अंदर फंक्शनैलिटीज वगैरह ऐड की जा सकती हैं बाकी दिस इज अ गुड लेवल ऑफ प्रोजेक्ट जो आपने सीएसएस को यूज करके अभी बना लिया है एंड इसके अंदर अगर हम amazononline.in नहीं देखेंगे बट लेआउट में दिस इज प्रिटी सिमिलर टू व्हाट amazonbusiness.in खुद से जाकर किसी और दूसरी वेबसाइट का भी क्लोन बनाने की कोशिश कर सकते हैं वो भी ट्राई आउट कर सकते हैं ताकि आपको भी थोड़ा प्रैक्टिकल हैंड्स ऑन एक्सपीरियंस हो चीजों को लेक्चर को देखकर सीख लेना है चीजों को देखकर बना लेना इस पर रुकना नहीं है खुद से जाकर हैंड्स ऑन चीजें ट्राई करनी है एरर्स के साथ जूझना है थोड़ा सा थोड़ा सा हम खुद भी चीजों को यू नो थोड़ा सा साइज में बड़ा करके छोटा करके इस तरीके से लेआउट के साथ एक्सपेरिमेंट करके देखेंगे तभी हम खुद सीख पा रहे होंगे तो वो चीजें जरूर ट्राई आउट करनी है हाय एवरीवन तो डेवलपमेंट के अंदर हमने अच्छी खासी लेवल पे सीएसएस को कंप्लीट कर लिया है प्रोजेक्ट बना लिया है बट डेवलपमेंट में इसके बाद और भी चीजें होती हैं जैसे हमारे डेटा बेसेस हो गए या बैक एंड डेवलपमेंट हो गया तो इस तरीके की चीजें अगर आपको सीखनी है तो आप डेल्टा में आकर मेरे साथ पढ़ सकते हैं अब इसके अलावा सीएसएस के बाद आपको और कौन सी टेक्नोलॉजीज के बारे में लेक्चर चाहिए उसके बारे में आप मुझे नीचे कमेंट करके बता सकते हैं आज के लिए इतना ही मिलते हैं नेक्स्ट वीडियो में टिल देन कीप लर्निंग एंड कीप एक्सप्लोरिंग