🔥 CSS Introduction + CSS Types + Selectors

Name: 🔥 CSS Introduction + CSS Types + Selectors
Uploaded: 2025-12-02T06:14:56+00:00
Duration: 1 h 4 min 45 s
Channel: skillwaala
Description: 👨&zwj;💻 What You’ll Learn in This Class: ✅ What is CSS and how it works with HTML ✅ Types of CSS — Inline, Internal, and External ✅ How to link a CSS file with HTML ✅ Understanding CSS Syntax (Selectors, Properties, Values) ✅ CSS Selectors — Universal, Class, ID, Group

skillwaala

2 days ago

👨‍💻 What You’ll Learn in This Class:
✅ What is CSS and how it works with HTML
✅ Types of CSS — Inline, Internal, and External
✅ How to link a CSS file with HTML
✅ Understanding CSS Syntax (Selectors, Properties, Values)
✅ CSS Selectors — Universal, Class, ID, Group

Category

📚

Learning

Transcript

Display full video transcript

00:00:00झाल झाल

00:00:30कर दो कर एंगा व्यूत अबाइनUST आंगा है खौल न क्त्रीज ज़िये लाफ trade

00:00:39अलो वाइस गुट मॉर्ण गुट इविनिंग एविवन गुट इविनिंग सेबूल साइनाथ लिशना अभी दिपायन सिवकाशी इशा इक बार सब रेस्पोंस करते हैं कि मेरी वाइस किलियर है एंड इस्क्रीन भी सभी वीजिबल है

00:01:04राम राम अजये

00:01:10गुट इविनिंग दिपिका अलका करें यस लक्षे करेंगी यस सर के लिए एंड अवडिबल ठीके चुले तो बहुत अच्छी बात है

00:01:31गुट इविनिंग सर मैं अच्छा हूँ आप कैसे हो मैं अभी बिल्कुल बढ़िया हूँ एक नंबर सब कुछ बढ़िया है परफेक्ट है

00:01:45तो देखो आज की क्लास में अपन क्या डिस्कस करने वाले है जो अपने प्रिवेस क्लास हुई थी उसमें अपने देखा था कि अपने पास अपना

00:01:56HTML क्या काम आता है HTML अपने काम आता था इस्ट्रक्चर बनाने के लिए किसी भी वेब साइट का स्ट्रक्चर वह एक बीसिक सा स्ट्रक्चर अपन क्रियेट कर रहे थे मतलब कि जो भी अपना कॉंटेंट आ रहा था वो ब्लैक कलर रहा था जो भी प्री डिफाइन टैग थे �

00:02:26CSS है CSS की फुल फॉर्म क्या होती है Cascading whats now

00:02:38अब CSS काम क्या आता है CSS काम आता है उपने वेब साइट को ये वbec

00:02:53जैसे मैं search कर लेता हूँ this old store ठीक है और इस website पर आके अपन चेक करते हैं

00:03:00तो basically यहाँ पर पहले इसने क्या बनाए इस website का structure ready करा कि website का structure क्या रहेगा

00:03:07जैसे उस नहीं का tag यहाँ पर बनाए man बनाया woman sneakers एक div लिया ठीक है और उस div के अंदर man woman sneakers

00:03:14अब div जो है वो अपने पास block level है तो अपने पास man woman sneakers से एक line में आएंगे जैसे माल लो ठीक है एक line में ना आके मतलब अलग-अलग line में आ रहे है तीनों

00:03:25अब उनको arrange करना जैसे अपने जो input search bar देखी थी अपनी वो basic से आ रही थी अप इस पर जैसे क्लिक करूँगा तो क्लिक करने बनास यहाँ पर अपने items दिखाए दे रहे है जैसे मैं login के उपर आऊँगा तो यहाँ पर क्लिक करते थे तो इसके उपर एक border create हो क्या रही है

00:03:40तो जो अपन यहाँ पर layout ready करेंगे जो भी layout अपने को यहाँ पर लगाना है वो अपन लगाएंगे CSS के थ्रूँ ठीक है तो CSS basically काम आती है अपनी website के layout को set करने के लिए website पर animations लगाने के लिए transitions लगाने के लिए उसके लिए अपन अपनी CSS use लेते है

00:03:56transitions कैसे जैसे मालूम है यहाँ पर flip card की उपराता हूं कोई भी product अपन यहाँ पर search कर लेते हैं तो अब देखो मैं जैसे इस पर cursor लेके जा रहा हूं तो cursor ले जाने पर सब पे कुछ ने कुछ transition अपने को यहाँ पर दिखाई दे रहा है

00:04:24तो basically यह जो transitions अपने लगाए वे यह अपने CSS से लगाए वे तो CSS से अपन यहाँ पर क्या करेंगे पूरी complete styling करेंगे अपनी website की क्योंकि HTML से अपने सिर्फ अपना structure ready किया था ठीक है

00:04:37तो I hope कि आपको CSS वाला concept समझ में आया कि यहाँ पर CSS से अपन क्या करने वाले हैं ठीक है

00:04:45तो CSS से complete अपनी styling यहाँ पर ready होने वाली है

00:04:49तो CSS की full form आपको सबको पता ही है क्या है cash grading style sheet ठीक है

00:04:58तो अब अपन यहाँ पर CSS पर discuss करेंगे

00:05:01तो CSS में सबसे पहले अपने को पता होना चाहिए कि types of CSS अपने पास यहाँ पर क्या होते हैं

00:05:06मतलब कितने types से मैं आपर CSS को लिख सकता हूँ

00:05:09उससे पहले अपने पास requirement होती कि CSS का syntax क्या होता है

00:05:13फिर उसके बाद अगर आपको types पता है, syntax पता है

00:05:17फिर उसके बाद अपने को क्या करना है अपनी सारी properties यहाँ पर explore करनी

00:05:21कि CSS के अंदर कौन-कौन सी properties आती है जो मैं अपने elements के उपर apply कर सकता हूँ

00:05:26जितने भी HTML elements अपन यहाँ पर create करते हैं

00:05:29उनके अंदर अपन यहाँ पर कौन-कौन सी properties अपन लगा सकते हैं

00:05:33तो वो सारी चीज़े अपन discuss करेंगे अपनी CSS के अंदर

00:05:36तो CSS की journey सिर्फ यह ही है कि पहले अपने को CSS लिखनी आनी चीए

00:05:41syntax पता होना चीए और properties पता होना चीए

00:05:44और properties की क्या-क्या values अपन assign कर सकते हैं

00:05:48सिर्फ यह पता होते हैं आपको complete CSS आ जाएगी कि मेरे को यहाँ पर CSS आती है

00:05:53तो यह सारी चीज़े अपने को CSS में सीखनी है जैसे मैंने HTML में सिर्फ अपन tag देखते जा रहे थी कि कौन-कौन से tag आते हैं और attributes आते हैं

00:06:01वैसे ही same अपने पास CSS के अंदर अपने पास कौन-कौन सी properties आती है तो वह properties अपन यहाँ पर अपनी explore करेंगे

00:06:11ठीक है यहां तक की चीज़ के लिए होगी आपको आई हो वह इस ब्रेक सर वह इस ब्रेक हो रहा है बीच बीच में वह इस वाले इस्वारा है कि फिर से यह सिस्टम चेंज करते इस हो जाता है क्या

00:06:26ठीक है यहां तो perfect है अधार ठीक है पहले इश्वारा था पहले अगर इश्व सब के आ रहा है कि एक बार आप यह confirm कर दिया गरो अगर सब

00:06:44इशो ने आरहे हैं तो आप कमेंट कर जा is कि ao cooper उष्छा

00:06:48ठाइब कि कई बार ल्हार कि अक्र आपका हो तो आपकी तरफ इस BJP फिर वह

00:06:57करें कि सर साइट पे जाने पर हो रहा है ठीक है एक बार अपन थोड़ा सा

00:07:18करते अगर फिर इशु आता है तो आप में कोई बार बताना कि असरे शु आ रहा है कि कि कि आज सिस्टम कर आई तो सिस्टम चेंज करते वापस इशु क्रियेट हो गया हुआ हो ना तो नहीं चीम है था

00:07:33अगर हो गया तो इसका सुलूशन फिकर ऑदेंगे आप्क

00:07:35ठीक है तो यह अपने अपने CSS के तुछ चीजों के डिसकस करा

00:07:46अब देखो CSS जो है वो अपने क्या काम आती है अपने layout को ready करने के लिए

00:07:57phones लगाने के लिए web page का जो अपने web page को present करते है वो एक अच्छा होना चाहिए

00:08:04अब अपना front end ही अच्छा होगा तब भी वह अपनी website पर रुकेगा अगर फ्रेंट ही अच्छा नीए तो website पर रुकेगा है टीक है जैसे आपने पदानी क्या website बना दी अलग-अलग color लगा दी अलग-अलग

00:08:16अच्छी यह लगा दी पता नहीं क्या इंग बना दिया तो भी चलती है जैसे गवर्मेंट एक्जाम फिल करने जाते हो आप कई वेबसाइट पर अच्छी नहीं होती फिर भी वो चलती है क्योंकि वो तो जरूरत है चीक है तो यहां पर अपन देखते हैं सबसे पहले कि

00:08:45कि css का syntax क्या होता है syntax के बाद अपना आगे बढ़ेंगे तो सबसे पहले अपन देखते कि css का syntax क्या होता है

00:08:54अब देखो CSS का syntax क्या होता है syntax समझना syntax में सबसे पहले अपने पास होता है अपना

00:09:03selector कि मेरे पास selector क्या है फिर उसके बाद curly braces ठीक है अब इस curly braces के अंदर अपने पास आती है

00:09:09अपनी property और property के बाद colon करके अपन यहां पर देते हैं अपनी value कि उस property की value क्या है

00:09:15फिर semicolon अपन यहां पर apply करते हैं यह अपना CSS का syntax होता है क्या syntax होता है selector ठीक है curly braces फिर उसके बाद property और उसके अंदर उसकी value ठीक है तो यह अपने पास अपनी CSS का syntax होता है

00:09:31जैसे मालो अपने एक्जामपल लेते हैं मैंने आपको बोला कि एक बिल्डिंग है जैसे मालो एक फ्लैट है और फ्लैट में मैंने बोला कि इसके अंदर जो यह जो शाम अपार्टमेंट वाला फ्लैट है इसमें इस सेकंड फ्लोर के अंदर यह जो है इस रूम में आपको कलर

00:10:01selector क्या हुआ वो फ्लैट हो गया, color यहाँ पर क्या हुई आपकी property हो गई, क्योंकि property यह यह color करना है, लेकिन मैंने अभी यह नहीं बताय कि उसकी value क्या है, मतलब उस पे कौन सा color करना है, तो यहाँ पर जैसे मालों मैं बोलता हूं कि फ्लैट का color आपको white करना है, तो यहाँ �

00:10:31इसके बाद अपने लगा है अपने curly braces और curly braces के अंदर यहां पर

00:10:36property मतलब मेरे को इस h1 tag के उपर कौन सा property लगानी है

00:10:41color property लगानी है phone size property लगानी है background color

00:10:45change करना है क्या change करना है तो मैंने यहां पर बुला कि मेरे

00:10:50पास यहां पर color property है और colon करके अपन उसकी value देते हैं

00:10:54जैसे मालम मैंने यहां पर कह दिया white color करना है फिर semi-color लगा देते हैं तो यह अपना

00:10:59CSS का क्या है syntax है ठीक है h1 tag मेरे पास यहां पर क्या हो गया h1 tag मेरे पास

00:11:06यहां पर हो गया अपना selector curly braces color यहां पर अपनी property हो गई और white इसकी

00:11:12हो गई value हो गई तो यह अपने पास अपना CSS का क्या है syntax है CSS का syntax ठीक है CSS का

00:11:21syntax तो बड़ा easy है selector फिर उसके बाद curly braces फिर उसके बाद property फिर उसके बाद value ठीक है यह अपने

00:11:29CSS का syntax होता है अब देखो अपने जो CSS के syntax पर अभी discuss किया है यह जो मैंने

00:11:37आपको CSS का syntax बताया है इस syntax के अंदर यहां पर अपन multiple properties

00:11:45assign कर सकते तभी तो अपन यहां पर semicolon लगा रहे semicolon लगाने का मतलब एक selector

00:11:51पे आप multiple properties लगा सकते हो जैसे मालो आप actual tag का color भी change करना

00:11:55चाते हो background color भी change करना चाते हो phone size भी change करना चाते हो तो यह

00:12:00होता है और एक property पे multiple values भी लग सकती है depend करता है कि वह property

00:12:05multiple values access करती है या नहीं करती है तो अगर allow करती है तो उसके उपर

00:12:13multiple values भी दे सकते एक property के उपर ठीक है तो यह बात होगे अपने पास अपने CSS के

00:12:19syntax के उपर कि अपना CSS का syntax क्या होता है उसके बाद next अपने

00:12:26CSS में ही अब देखो यहां पर अपन सबसे पहले discuss करेंगे कि अपने पास यहां पर types of CSS

00:12:34कितने है types of CSS तो यहां पर अपने पास तीन टाइप होता है अपने CSS के अगर अपन यहां

00:12:46पर बात करते है अपने types of CSS के तो यहां पर तीन टाइप होता है अपने पास CSS के एक तो होती है

00:12:52पास अपनी external css ठीक है एक अपने पास होती है अपनी internal css

00:13:01और एक होती है अपने पास अपनी inline css ठीक है तीन टाइप होते है अपने पास css के external css ठीक है

00:13:10एक तो होगे अपने पास external css एक होगे अपने पास internal css और एक होगे अपने पास अपनी inline css

00:13:16अब CSS apply कैसे करते है, external कैसे apply करते है, internal कैसे करते है और inline CSS कैसे apply करते है

00:13:23ये अब अब अपन आते हैं अपने VS code के उपर और अपन इसके उपर discuss करते हैं

00:13:28तो मैं आजा तो अपने VS code के उपर, VS code को अपन यहाँ पर open कर लेते हैं

00:13:32ठीक है और यहां पर अपन एक नया फोल्डर बना लेते हैं मैं उपन फोल्डर कर लेता हूं और एक

00:13:43css का फोल्डर पर अपन आ जाते हैं जैसे css का फोल्डर इससी पर आ जाते हैं ठीक है और इस फाइल को तो मैं कर देता हूं

00:13:50यहां पर एक फाइल बना लेते हैं जिसको मैं आपर कहता हूं इंडेक्स.stml ठीक है अब आप बोलोगी सर सीएसेस बढ़ रहे तो सीएसेस की फाइल क्यों नहीं बना रहे तो यहां पर आपकी में फाइल हमीशा आपकी

00:14:05एस्टीमल फाइल ही होगी और एस्टीमल फाइल के अंदर आप अपनी सीएसस लिखने वाले हो ठीक है तो बोईलर प्लेट लगा दो सबसे पहले अब देखो यहां पर सबसे पहले में डिसकस करता हूं अपनी इंटरनल सीएसस के उपर टाइप्स कितने बदा है तीन टाइप

00:14:35लिख दिया मैंने इस फाइल को यहां पर रन भी कर दिया तो अपने को यहां पर अपना स्किल वाला लिखाई दे रहा है अब देखो यहां पर यह जो स्किल वाला लिखावा आ रहा है इसका बाई डिपोल्ट कलर अपने पास क्या है ब्लैक है अपने को कलर चेंज करना इस

00:15:05अपने को एक tag लेना रहता है अपना style tag क्योंकि मेरे को style करना है तो मैंने यहाप पर style tag लिया और style tag को यहाँ पर open कर लिया

00:15:12अब बस आपने style tag ले लिया अब वही syntax आपको use करना है जो अपनी CSS का syntax होता है

00:15:18क्या syntax होता है selector curly braces property और value मैंने बोला कि मेरा h1 tag यहाँ पर क्या हो गया है मेरा selector

00:15:25curly braces मैंने यहाँ पर लगा दिये और इसके अंदर आप लिखो कि property मैंने बोला color मेरी property है

00:15:31और उसकी value मैंने यहाँ पर देदी brown यह जो CSS मैंने लिखी है यह आपकी internal CSS है

00:15:38internal CSS कहां लिखते है अपने head tag के अंदर अगर आप यहाँ पर आके check करोगे तो इसका color अपने पास क्या हो जाएगा

00:15:45brown color हो जाएगा brown color क्यों हो गया क्यों हो गया क्यों कि यहाँ पर मैंने अपनी CSS apply कर दी अपने h1 tag के उपर

00:15:52यह element था अपना h1, h1 को मैंने यहाँ पर target किया और उसके उपर अपने क्या कर दी अपनी internal CSS apply कर दी

00:15:59style tag, style tag के अंदर वही syntax जो होता है CSS का selector, curly braces, property और value ठीक है तो यह अपनी internal CSS है जो मैंने यहाँ पर apply करी है

00:16:10ठीक है वोइस प्रोब्लम वोइस प्रोब्लम वोइस प्रोब्लम

00:16:40एक ठीक चीज बताओ कि वोइस आरी है या नहीं आरी कई बोल रहे कि वोइस प्रोब्लम है कई बोल रहे नहीं है वोइस प्रोब्लम ऐसा तो कैसे चलेगा

00:17:09कि मैं चेंज कर लेता हूं यहाँ पर

00:17:12ठीक है अब वो इस क्लियर होगी मेरे हिसाब से

00:17:37अब वोइस क्लियर होगी एक बार रेस्पांस कर दो इस चीज का

00:17:47कि डैक्टवक इश्यू तो नहीं होना चीए क्योंकि वाइफाई से अच्छा तो

00:17:53फोन का तो भी नहीं सकता नेट्वर अच्छा हूं

00:18:03बीच बीच में ब्रेक हो रही है सर ठीक है इसके लिए फिर ब्राउजर चेंज करके देखना पड़े

00:18:15पड़ेगा एक पार फिलाल ठीक है ठीक है चलो मैं थोड़ा सा आगे समझाता हूं और अगर इश्वार है तो मैं आके चेक करता हूं आपस है अब देखो यह जो

00:18:28क्यों देखी अपनी इंटर्लस सो गई है अब स्केंड कर्णेर अब आपने स्केंड बद्रेज्व क्यों पर एक उरओं वा क्यों इस

00:18:56अब देखो यहां पर मैं इस paragraph tag पर अपनी inline css लिखना चाहता हूं तो देखो inline css कैसे लिखते हैं

00:19:09जो अपना tag होता है उसी में as a attribute आपको अपना style attribute पास करना है जो अपना tag होता है उसी के अंदर अपन as a attribute किसको पास करेंगे style को

00:19:21अब यहां पर आपको किसी भी selector को target करने की जोत नहीं है अब आपको directly लिखनी है अपनी property और value क्योंकि पहले से आपका element target है आप inline css लिख रहे हो इसका मतलब पहले से अपना element यहां पर target है बस यहां पर आपको अपनी property लिखनी है और उस property की value लिखनी है जैसे मालो मैंने क

00:19:51tag पर मैंने कौन सी css लिख दी अपनी inline css चीक है तो यह अपनी inline css होती है internal css कैसे लिखते है अपने head tag के अंदर style tag pass करके inline कैसे लिखते है अपना जो tag होता है उसी में style attribute pass करके ऐसे ही अपनी external css क्या होती है external css नाम से ही clear है external css क्या होती है

00:20:12तो external css क्या होती है अपनी मतलब external अपने को अपनी file बनानी पड़ेगी फिर उसके बाद उसको अपने को यहाँ पर उसको attach करनी पड़ेगी अपनी main file के साथ

00:20:25तो सबसे पहले मैं यहाँ पर एक file बना दे तो अपनी external मैंने css का एक folder बनाया और उसके अंदर एक file create करी जिसको मैं यहाँ पर कह देता हूँ style.css

00:20:34css extension नहीं होगा क्योंकि css file है अब जैसे मालो मैंने यहाँ पर एक और कोई भी tag ले लिया जैसे मैं यहाँ पर कहता हूँ मेरा एक pre tag है मैंने pre tag लिया और उसमें lorem करके यहाँ पर 9 का content पास कर दिया तो यहाँ पर अगर आपके चक करोगे तो lorem 9 का आपके पास यहाँ पर

00:21:04आप बोलोगे pre tag जो पना सलेक्टर है curly braces फिर उसके बाद मैंने यहाँ पर बोला color चिंके कॉन सा color करना है जैसे मालो मैं यहाँ पर बोल लहाँ कि आप इसके उपर अपना orange और ओर पर और पार कर देना इसके 2500 बहुत सारी है अब सिर्फ अपन color property के बेस प्रप्र अपन सीक �

00:21:34क्योंकि यहां पर जो आपने अपनी external CSS लिखी है सिर्फ वो यहां पर आपने लिखी ही है

00:21:39यह किस file से attach है कहां पर आपको link करा है कुछ नहीं करा

00:21:43तो इसका मतलब यह file यहां पर अभी link नहीं हुई भी

00:21:47तो सबसे पहले आपको अपनी external file को link करना पड़ेगा अपनी main file के साथ

00:21:52तो यहां पर अपने head tag के अंदर ही अपनी file को link करते है

00:21:58तो मैं यहां पर लिखूँगा link colon कौनसी file आपकी CSS की

00:22:02तो मैंने लिखा link colon CSS

00:22:03तो यहां पर अपने पास अपना link tag जो है वो create होगा गया

00:22:08इसके अंदर rel आ रहा है जो बता रहा है style sheet इसमें आने वाली है

00:22:11और href के अंदर आपको अपनी external file की location पास करनी है

00:22:15कि कहां पर वो file रखी भी है

00:22:16तो मैं करूँगा .slash same directory के लिए

00:22:19CSS के folder में style.css मेरी file है

00:22:22तो अब भी अगर आप आके चेक करोगी तो आपका pre tag यहां पर apply हो रहा है

00:22:27ठीक है इस पर क्या हो रहा है अपना pre tag अपना apply हो रहा है

00:22:31क्योंकि अपर ने अपनी external file यहां पर attach कर दी

00:22:34तो यह आपकी external css है

00:22:37तो यहां पर तीन टाइप होते हैं अपने css के अंदर जो मैं आपको बताया

00:22:40external css internal css और inline css

00:22:44external css कैसे लिखते है

00:22:47action css अपने को यहां पर अपनी external क्या बनानी पड़ती है

00:22:51file बनानी पड़ती है

00:22:53अगर अपन यहां पर बात करें अपनी internal CSS की तो जो अपना tag होता है उसी के अंदर अपने को यहां पर क्या लेना पड़ता है अपना style tag लेना पड़ता है

00:23:03style tag लेना पड़ता है

00:23:05और ऐसे ही अगर मैं यहाँ पर

00:23:07inline css की बात करूँ

00:23:09तो जो tag होता है उसी के अंदर

00:23:11अपने को यहाँ पर क्या लेना पड़ता है

00:23:12अपना attribute लेना पड़ता है

00:23:15और कौन सा attribute लेना पड़ता है

00:23:17style वाला

00:23:18ठीक है style attribute अपने को यहाँ पर लेना पड़ता है

00:23:21तो यह अपने पास तीन टाइप होते हैं अपने CSS के

00:23:24external CSS, external file create करो और उसके बाद उसको यहाँ पर क्या कर लो

00:23:29उसके बाद उसको यहाँ पर link कर लो अपनी main file के अंदर

00:23:32internal CSS, head tag के अंदर आपको style tag लेना है

00:23:36फिर उसके अंदर आपको वही syntax यह use करना है पूरा CSS का

00:23:39और inline CSS जो भी tag है उसके उपर आपको अपना style attribute लगाना है

00:23:44दैन उसके बाद property और value pass करनी क्योंकि किसी भी element को

00:23:47आपको target करने की ज़रुत नहीं है कोई भी selector की requirement नहीं है

00:23:52यहां पर ठीक है तो यह बात होगे अपने पास किस चीज़ की है अपने types of CSS की

00:23:57तो तीन type होते हैं अपने CSS के अंदर

00:23:59internal, external और अपने inline CSS

00:24:03यहां तक की चीज़ के लिए रहे तो एक बार comment करके बताओ

00:24:06यहां तक की चीज़ के लिए रहे इसमें कोई doubt नहीं है किसी को

00:24:28तो CSS का topic आपको interesting लग रहा है या नहीं लग रहा और कई लोग कितने लोग है जिनको पहले से CSS आती है

00:24:34और कितने लोग है जो पहली बार CSS पढ़ रहे एक बार बता दो दो comment करके

00:24:39जैसे comment कर दो कि मैं pressure हूं सर में को नहीं आती कि किसी को आती होगी

00:24:49चीक है गैस करे मुझे आता है सूरज कहरे कि सुपर excited to learn CSS

00:24:58सर डीपी का करें ये सर क्लियर है तीज़ करें इन्हों पहले से जानते सिभू करें थोड़ा सा आती है

00:25:05लक्ष करें कि आती है CSS चोड़ बहुत अच्छी बात है तो क्याश करें सर एक क्यूशन है मेरे अगर हम लोग

00:25:11अगर आउट्पूट पर देख रहे हो लोकल होस्ट वाला आउट्पूट आगर आप देखोगे

00:25:29पर वो अगर मोबाइल में चलाए तो CSS के बिना ओनली एस्टीमल चलता है देखो आप जो अब भी अपना आउट्पूट देख रहे हो लोकल होस्ट वाला आउट्पूट आगर आप देखोगे तो उसमें

00:25:42अग्सराइल नहीं आ दी डिपलोई करने के बाद पूरी फाइल आती है गिटब के उपर अप्लोड करके डिपलोई करते तब दिवीशा कहरे है कि थोड़ी थोड़ी आती है CSS कोई बात नी पूरी हम सिखा देंगे आदश्ट करे मुझे आती है दिपिका करे है थोड़ा थ

00:26:12करें सर प्लीज रिपीट माय लैप्टोप शट्डाउन पावर ओफ प्रॉब्लम सॉरी सर ठीक है अब यह आगे बढ़ रहे तब आपको रिपीट हो जाएगी चीजिए रवी करें I know CSS थोड़ा वोट आता है इस रिस्टी को अन्मूल करें 5 पार पढ़ राओं सर ये तो ब

00:26:42आती है basic guest करें कि I am beginner कोई बात नहीं आपको प्रो हम बना देंगे हाशिश करें आती है थोड़ा थोड़ा बर पूरा नहीं आती पूरा मैं सिखा दूंगा tension क्यों ले रो किसी चीज़ की क्या हां मिलना है CSS section CSS को override कर सकते हैं इस चीज़ पर मैं भी discuss करता हूँ अज्य करें CSS

00:27:12internal CSS link tag नहीं होता internal CSS में internal के लिए अपन style tag यूज लेते है external CSS के लिए अपन यहाँ पर अपना link tag यूज लेते

00:27:21link colon CSS करके गर्वित करें नहीं आती सर आप सिखा देंगे आप सिखा देना येस बिल्कुल मैं आपको बिल्कुल अच्छे तरीके से सिखाऊंगा कोई भी दिक्कत होगी तो आप मेरे से पूछ सकते हो जहाँ पर भी दिक्कत आए वहाँ पर आप पूछ सकते हो ठीक है तो श

00:27:51है और अब इसके अंदर अपन यह देखते कि सबसे फर्स्ट प्रियोटी किसकी होती है मतलब अगर मैं किसी एक एलिमेंट की उपर अपनी inline CSS भी लगा दूँ अपनी internal भी लगा दूँ और अपनी external भी लगा दूँ तो सबसे पहले कौन सी CSS अपलाई होगी जैसे अगर आ�

00:28:21यहां पर अपनी internal CSS के अंदर भी बूलू कि मेरे पास जो paragraph tag है स्लेक्टर हो गया curly braces और मैंने यहां पर बोला कि उसका जो color है ठीक है वो आप यहां पर कर देना कौन सा वाला चौकलेट यह चौकलेट कलर कर देना यह मैंने यहां पर instruction दिये पहला तो आपने लगा रखी inline CSS

00:28:51या फिर यह चौकलेट वाला color होने वाला है यह जल्दी से एक बार comment करके बताओ कितनों को आती है भी पता जल जाएगा मैंने यहां पर एक element के उपर दो CSS लगाई पहली तो inline जिसमें मैंने blue color लगाया और दूसरी मैंने यहां पर लगाई अपनी internal जिसमें मैंने चौकले�

00:29:21पढ़िया है concept clear करने जब भी करें blue तेजस करें चौकलेट चौकलेट में भी क्योंकि फिर उसको पीछे वापिस चेक करने नहीं जाना पड़ेगा ओके चौकलेट सर फ्लैक्स बोक्स में बहुत प्रॉब्लम आती है फ्लैक्स बोक्स में नहीं आएगी फ्लैक्स बोक्स और

00:29:51लेकिन इसका answer आएगा blue अगर आप यहां पर देखो कि तो इस पर blue color ही है ठीक है तो यहां पर यह blue color क्यों apply हो रहा है और यह वाला apply क्यों नहीं हो रहा आप बोलोगी कि sir compiler top to bottom चलता है compiler जो आपके code को read करता वो top to bottom चलता है तो यहां पर देखेगा उसने देखा कि यह color तो

00:30:21compiler आगे भड़ेगा तब वो देखेगा कि paragraph टेक के उपर यहां पर inline लिखी विए तो यह value उसके उपर apply होगी ठीक है लेकिन यहां पर compiler वाला रूल नहीं होता यहां पर priority होती है first priority किसकी होती है second किसकी होती है जैसे मालों आपने एक element पर तीन CSS लगा दी तो first priority किसकी होगी

00:30:51सबसे नजदीक को ने आपका inline CSS तो यह खास है इसी की बात माने गए तो इसने color इस पर क्या कर दिया blue कर दिया ठीक है अगर आप यहां पर जैसे मालों मैं इस blue color को हटा देता हूं ठीक है तो अब इस पर कौन सा color रहेगा chocolate color उस पर apply हो जाएगा ठीक है और अगर मैं यहां

00:31:21तो अभी के लिए आपको यह वाला color तो हटाना पड़ेगा क्योंकि यह internal apply होगा अब अगर आप देखोगे तो आपका external CSS यहां पर apply रहेगी तो यह अपने पास तीनों CSS की priority होती है

00:31:35first होती है आपकी inline second होती है अपने पास internal फिर होती है external ठीक है अब आप एक किशिन यह भी रहेगा आपको कि सर्थ 3 CSS है यूज कौन सी करे

00:31:45internal करे या फिर inline करे या फिर external करे और कौन सी use करनी चीए तो अपन जो use करते है वो अपन करते है अपनी external CSS ना अपन use करते है अपनी inline ना use करते है अपन internal अपन use करते है अपनी external CSS ऐसा क्यों है

00:32:03क्योंकि देखो अगर आप अपनी file के अंदर अपनी inline css लिखोगे inline क्या अपनी internal css

00:32:09तो यहाँ पर पहला तो file आपकी बहुत बड़ी हो जाएगी क्योंकि यह तो सिर्फ अपने achievement tag पे color लगाया है

00:32:15लेकिन जब css लिखेंगे तो एक पूरी बड़ी file बनने वाल यह इसके अंदर यह आपको आगे बता चलेगा

00:32:21तो यहाँ पर internal css अपन कभी भी नहीं लिखते हैं टेस्टिंग कर सकते हैं जैसे अपने internal css लिखे चेक करा किया और यह कैसा दिखेगा क्या साथी चीज़े अपन चेक करीगा

00:32:31ठीक है उसके अलावा inline css तो अपन हमेशा ignore करते हैं कभी भी inline css नहीं लिखते हैं अब आप बोलोगे कि जब लिखते ही नहीं है तो क्यों use करते हैं जब अगे बढ़ेंगे तब अपन conditional basis बहुत सारे काम करने वाले हैं और वो काम होगा आपका inline basis पे वहाँ पर आपके

00:33:01css लिखी है तो इसको convert कर दो किसमें external में यहां से cut करो और यहां पर लिख रखी है मैंने cut करा और यहां पर इसको paste कर दिया ठीक है और यहां से मैं इस style tag को हटा देता हूं ठीक है तो अब सिर्फ अपने पूरे इसके उपर जो css लगी वी आपकी action लगी वी ना तो मैंने क

00:33:31ठीक है अगर आप future में कोई projects भी बनाते हो front end के उपर तो उसमें अपन यहां पर अपनी external css यूज़ करके ही projects बनाने वाले हैं ठीक है तो यह तो बात हो गई अपने external css की ठीक है क्योंकि यहां पर पूरा code pretty code रहेगा developer आके check कर सकता कि क्या क्या changes करने है जैसे माल लोग आ

00:34:01और इसको क्या करना है जो भी इसमें changes करने है वो changes कर तो यह आपको HTML tag find हो गया इसके उपर color कर तो अभी तो सिर्फ छोटा सा code है जब find करने की बात आईगी ज्यादा code के अंदर तो यह बात होगी अपने पास कि अपन कौन सी css use करेंगे अभी अपन यहां पर files बनाएंगे

00:34:31जो भी css use करेंगे अपनी internal css रहने वाली है तो यह तो बात होगी अपने पास अपने guides of css की अब अपन आगे बढ़ते हैं इसके अंदर थोड़ा सा और आगे बढ़ते हैं ठीक है

00:34:46अब देखो यहां पर अपन discuss करेंगे कि अपने पास कौन कौन से selectors होते हैं अभी तो सिर्फ आपने एक ही selectors देखा कि आपने जो tag का name दिया था उसके basis पर target कर लिया लेकिन सिर्फ tag name के basis पर target नहीं करते हैं अपन अपन target करते हैं इसको multiple selectors अपने पास बहुत सारे selectors आते ह

00:35:16अब देखो यहां पर अपने पास कौन कौन से selectors आते हैं यहीं से कर लो इसको ठीक हैं अब देखो CSS में अपने पास यहां पर कौन कौन से selectors आते हैं एक अपने पास आता है अपना simple selectors

00:35:37एक अपने पास आता है universal selector

00:35:43एक अपने पास आता है अपना group selector

00:35:54ठीक है एक अपने पास आता है अपना combinator selector

00:35:57यह सिर्फ आपके tag को target करने की तरीके है कि किस किस तरीके से आप target कर सकते हो

00:36:05एक अपने पास आता है अपना pseudo class selector

00:36:10ठीक है एक अपने पास आता है अपना pseudo element selector

00:36:20ठीक है एक अपने पास आता है अपना attribute selector

00:36:34तो ये अपने पास selectors है अपने कि अपने पास कौन-कौन से अपने selectors आते है

00:36:45तो ये अपने पास selectors आते है

00:36:47simple selector, universal selector, group selector, combinator selector, pseudo class selector, pseudo element selector, attribute selector

00:36:55simple selector के अपने पास आता है तीन type होते हैं अपने इसके अदर

00:37:00एक तो element based

00:37:02ठीक है एक तो अपने पास क्या होता है अपना element based होता है

00:37:11कि आप element based भी target कर सकते हो

00:37:13एक अपने पास होता है id की basis पे और एक होता है class के basis पे

00:37:19यह अपने पास तीन तरीके होते simple selector में

00:37:25element based, id based और class based

00:37:27universal selector, group selector सबको आप group के अंदर भी target कर सकते हो

00:37:32combinator selector, pseudo class selector, pseudo element selector और attribute selector

00:37:37अब भी अपन डिसकस करेंगे सिर्फ simple selector के उपर

00:37:41और अपने universal selector के उपर

00:37:45simple selector, universal selector और group selector

00:37:47अब आप बोलोगे सर, combinator selector, pseudo class, pseudo element और attribute selector

00:37:52तो यह कब पढ़ेंगे, यह पढ़ेंगे अपन आगे वाली classes के अंदर,

00:37:55क्योंकि अब भी अगर मैं बताऊँगा, तो बहुत confusion होने वाला है,

00:37:58ठीक है, क्योंकि इतने सारे नाम सुन के आपको लगा कि यह क्या है,

00:38:01तो अपन सिर्फ अभी तीन ही selector पे discuss कर रहे हैं,

00:38:04आगे वाली जो class होगी, उसमें अपन इन सारे selectors पे भी discuss करेंगे,

00:38:08तो अभी के लिए सिर्फ तीन ही हैं अपने, ठीक है,

00:38:12अब देखों, simple selector के अंदर अपने पास तीन तरीके होते हैं,

00:38:14element based, id के basis पे और class के basis पे,

00:38:17अब element के basis पे कैसे target करते हैं,

00:38:20id के basis पे कैसे target करते हैं,

00:38:21और class के basis पे कैसे target करते हैं,

00:38:23आपको दो चीज़ तो clear है,

00:38:25कि जितने भी अपने पास tag है,

00:38:27उनके उपर सब पे दो attribute अपलाई होता है,

00:38:29id और class, जितने भी tag है अपने पास,

00:38:32अपने h1 tag पढ़ा,

00:38:33अपने heading tags पढ़े, अपने paragraph tag पढ़ा, अपने pre tag पढ़ा

00:38:36सब tag के उपड़, id और class attribute हर एक के उपड़ा ही होता है

00:38:41चीक है, तो यहाँ पर आपने एक चीज़ तो देख लिए simple में

00:38:45element based, अभी आपने element based ही काम किया था

00:38:49आपके पास आपका h1 tag था, आपने बोला h1 tag को यहाँ पर क्या कर दो

00:38:52h1 tag को directly target कर लिया, तो यह tag name की basis पर आपने target कर लिया

00:38:57paragraph tag को भी आपने tag name की basis पर target कर लिया

00:39:00आपने यहाँ पर pre tag को भी tag name की basis पर target कर लिया

00:39:04ठीक है, तो यहाँ पर अब अपन discuss करने वाले है

00:39:08ID के basis पर अपन कैसे target करते हैं ठीक है जैसे मालो मेरे पास यहाँ पर एक S2 tag है और उसके अंदर देवानशूसर लिखावा है ठीक है क्या लिखावा है यहाँ पर अपने को देवानशूसर दिखाई भी दे रहा है ठीक है अब मैं यहाँ पर अपनी internal CSS लिखता हूं और कैसे ल

00:39:38करूँगा मैंने ID देदी ID attribute पास करके और यहाँ पर कुछ भी ID इसको assign कर दो कुछ भी name आप दे सकते हो लेकिन यहाँ पर हमेशा गोई name दो जो आपको लगता है कि understanding हो ठीक है तो मैंने बोल दिया heading मैंने यहाँ पर बोल दिया और मैंने इसको यहाँ पर target कर लिया कैसे target कर

00:40:08जिसकी ID यहाँ पर क्या है heading, आप देखूगे नहीं हो रहा, क्यों नहीं हो रहा क्योंकि यहाँ पर यह चेक कर रहा है कि heading नाम का tag कौन सा है क्योंकि tag को आप कैसे target करते हो डाइरेक्ली name के basis पर, यहाँ पर मैंने directly name ही लिखा है heading और heading नाम का कोई tag ही नहीं यहाँ पर heading ना

00:40:38आईडी का tag है उसके उपर ये color आप apply कर देना ठीक है तो अगर आप यहाँ पर चेक करोगे तो वह color यहाँ पर apply हो चुका है ठीक है तो id के basis पर कैसे करते हैं कि जिसकी भी id यहाँ पर अपने क्या लगाते है अपना hash ठीक है मैंने बोला hash फिर उसके बाद मैंने बोला heading जिसक

00:41:08और उसके अंदर अपन लॉरेम करके 5 का content दे दिया यह अपना s2 था यह s3 tag ता और मैंने यहाँ पर यही same id जो heading id थी वही same id मैंने किसको assign कर दी इस s3 tag को

00:41:24s2 tag को भी मैंने heading id sign कर रखी है s3 को भी heading कर रखी है और heading के उपर मैंने color कर रखा है aqua marine क्या यह इन दोनों पर apply होगा हाँ बिल्कुल होगा दोनों पर apply हो रहा है यह देखूं लेकिन यह तरीका है गलत यह अभी तो कुछ भी आपको लग रहा है कि बिल्कुल सही है दोनों

00:41:54elements को assign नहीं कर सकते हैं जैसे आपका आधार कार्ड है तो आधार कार्ड के अंदर जो आपके आधार कार्ड नंबर है वो सिर्फ आपकी ही है वो किसी और के पास नहीं है क्योंकि वो आपका id proof है तो same यहाँ पर आपने जो heading लिख दिया है यह heading एक fixed id हो चुकी है अब यह आ�

00:42:24पहली बात तो यह हो गई अब अगर अपने बात करते हैं class के basis पे मैंने यहाँ पर एक ओ टैग ले लेते हैं अपने यहाँ पर वही एच्फू टैग ले लेते हैं और उसके अंदर अपने लॉरेम करके मैंने content लिखा 10 का ठीक है एच्फू टैग के अंदर content अपने को यहा�

00:42:54कि paragraph है तो मैंने यहाँ पर इसको P1 class देती हैं चीक है P1 क्या देती है class देती कुछ भी दे सकते हैं तो मैंने बोला कि जिसकी भी class यहाँ पर P1 है उसको target करो और उसका color यहाँ पर change कर देना और color यहाँ पर आप क्या कर देना उसका color आप कर देना green चीक है जिसकी भी class P1 है �

00:43:24P1 जो आपने दिया है यह आपकी class है और जब भी class के basis पर target करते हो तो उससे पहले लगाते हो dot

00:43:30इसका मतलब कि जिसकी भी class P1 है उसके उपर जाके आप यह green color apply कर देना

00:43:37तो यहाँ पर अगर आप देखोगे तो इस P1 tag के उपर यह green color अपना apply हो चुका है

00:43:43तो यह बात होगे अपने पास किसीच की class की तो तीन तरीके के simple selector के अंदर तीन तरीके कौन-कौन से

00:43:51element based, id based और class based element के base पे directly tag name के basis पे target कर सकते हो आप इस तरीके से

00:43:59जैसे यहाँ पर मैंने करा है 21P और pre-tag को id के basis पे कैसे target करते हैं? hash करके

00:44:05मैंने hash करा फिर उसके बाद जो भी id आपने assign करें वो assign कर दो और उसको target कर लो तो यहाँ पर यह चक करेगा कि जिसकी भी id यहाँ पर heading है उसके उपर यह वाला color अपने को apply करना है

00:44:17फिर उसके बाद dot p1 यहाँ पर क्या है जिसकी भी class यहाँ पर p1 है और यहाँ पर जैसे मालो मैंने

00:44:27echo tag लिया h5 tag ले लिया और उसके अंदर अपने lorem करके time का content भी दे दिया और इस h5 tag को मैंने same class assign कर दी p1

00:44:37यह same class p1 assign कर दो क्या इसके उपर भी दोनों पर green color रहेगा यह पिल्कुल दोनों पर green color रहेगा

00:44:43idea आप same multiple tag को assign नहीं कर सकते लेकिन class तो same कर सकते हो जैसे मालों अपन एक class की बात करते हो तो उसमें

00:44:52student हो सकते 20 भी हो सकते 25 भी हो सकते लेकिन उनकी सब के role number अलग होंगे ठीक है तो यहां पर अपने पास यह जो दोनों tag है

00:45:01मतलब दोनों के अंदर अपन same class assign कर सकते है इसमें को issue नहीं है क्योंकि एक class आप multiple tag को दे सकते हो लेकिन एक id जो आपने बनाई हूँ आप multiple tag को नहीं दे सकते क्योंकि id unique होती है तो यह बात होगे अपने पास तीन तरीके अपने selector के अंदर element based, id based और class based

00:45:22element based, directly tag name के basis पे target करो, id based hash करके target करते है, id based की बात करें तो यहाँ पर कैसा करते है, hash करके

00:45:31और अगर class की बात करें तो dot करके अपन यहाँ पर target करते हैं और attribute उसके अंदर pass करते हैं, तो यह बात होगे अपने पास अपने simple selector की, अगर यहाँ तक की चीज के लिए रहे तो एक बार comment करके बताओ, yes sir, यहाँ तक की चीज के लिए रहे, आगे बढ़ सकते हैं अपन इस

00:46:01good evening sir, आज का exam था और मैं late हो गया sir, कोई बात नहीं, आप recorded class देख लेना, तेजस करें sir, we can use class attribute also right instead of id attribute, yes, अपन class use करते हैं, लेकिन id, जहाँ पर आपको एक unique बनाना है, जैसे अपन, मैंने आपको बता था, अपन semantic tag use करते हैं, जैसे अपन sections में divide कर देते हैं, हर एक section को आप

00:46:31के अंदर, जितने भी आप div लोगे, जितने भी tag लोगे, सब को आप class के basis पर target करो, लेकिन उस एक को unique बनाने के लिए अपने ये काम करेंगे, यह आपको आगे और clarity मिलेगे, भी देखना, अपन जब cool लिखेंगे, तब आपको automatically clarity मिलने वाली है, so what is root and keyframe in CSS, keyframes and root यहाँ प

00:47:01साइन आत करें सर, element-based वाले में multiple tags रहे, same वाले तो उसमें भी दोनों elements पे apply होगा क्या, क्या, सर, element-based वाले में multiple tag रहे, same वाले तो, हाँ, बिलकुल, अगर आपने h1 tag 4-5 ले रखेंगे, तो सब क्यूपर apply हुए, कि h1 tag जितने भी है, सब क्यूपर apply होने वाला है, इसलिए

00:47:31उसके अंदर जितने भी nested tag आने वाले साबको class के basis पर पन target करते हैं, अगर सिर्फ एक single tag है, जैसे मालो मैंने बोला, कि यहाँ पर मेरे पास एक section है, यहाँ पर मेरे पास क्या है, एक section है, ठीक है, एक section है, इस section के अंदर मैंने बोल दिया, कि मेरे पास एक h1 tag, सिर्फ इसक

00:48:01तो इसकी idea आपनी hero दे दी, अब इसके अंदर h1 tag को मेरे को यहाँ पर target करना है, ठीक है, अब देखो मैं आपको यह थोड़ा सा difference अभी बताई देता हूँ, मैंने आप पर लिका देवांच्यू, ठीक है, आप यहाँ पर आके check करोगे देवांच्यू, और skill वाला, दोनों �

00:48:31मैं बोलना चाता हूँ कि इस section के अंदर जो h1 tag है, उसके उपर color दूसरा दे, तो मैं क्या बोलूँगा, मैं बोलूँगा कि जिसकी id यहाँ पर क्या है, hero है, जिसकी id यहाँ पर क्या है, hero है, उसके अंदर मैं किसको target करना चाता हूँ, अपने h1 tag को, तो मैं यहाँ पर h1 tag

00:49:01यहां पर कर देना येलो ठीक है तो अब अगर आप आके चेक करोगे इस देवाशु का कलर येलो है और इस स्किल वाला का कलर क्या है ब्राउन है क्योंकि तो है तो दूना है कि लेकिन मैंने यहां पर एक यह कंडिशन लगा दी कि हीरो जो अपने पास आईडी है उसके अंदर

00:49:31कंफ्यूज मत होना ये डाइरेक्शन देना है और ऐसे ग्रूप में अगर अपन टार्गेट करते हैं तो वहां पर फिर अपन कॉमा से सेपरेट करते हैं ग्रूप सेलेक्टर आगे अपन पढ़ने वाले है अब भी तो सिर्फ अपन यही देखा है ठीक है सिंपल सेलेक्टर

00:50:01आशीश कह रहे है कि सर आईडी हम क्यों नहीं लगा सकते कुस तो डिफरेंट होगा अभी तो मैंने समझा है आपको आईडी अपन सिर्फ अपन एक ही एलिमेंट को अपन असाइन करते हैं जिसको यूनिक रखना हो क्योंकि आईडी यूनिक होती है

00:50:26class जैसे मालो आप एक card बना रहे हो ठीक है एक card बनाना चाते हो

00:50:34और उस card की class आप सबको अउपर लगाना चाते हो ठीक है जैसे मालो आपने ये सरच बार बना दी और इसकी class रखी .cizer

00:50:44यह जो सर्जबार है आपके पास कम से कम सेम ऐसी आपको 20-25 सर्जबार बनानी है तो सेम क्लास आप 20-25 को असाइन कर सकते हो लेकिन अगर इसी सर्जबार को आप ID देके

00:50:54क्रियेट करोगे तो 20-25 को असाइन तो कर दोगे और हो भी जाएगा वह काम फ्रेंट पर लेकिन जब आप आगे जाओगे तो वह काम आपर एरर देने वाला क्योंकि ID सिर्फ एक ही अलिमेंट को दे सकते हैं

00:51:04क्लास अपन मल्टिपल को दे सकते हैं ठीक है अगर आपको अभी भी कंफ्यूजन है तो कोई बात नहीं इस कंफ्यूजन को अभी के लिए माइन में रख लो बस इतना ही याद रखो कि सिंपल सेलेक्टर के अंदर अपने पास यहां पर तीन तरीके होते हैं

00:51:26कंफ्यूजन है क्यों यूज़ नहीं कर रहें कैसे यूज़ नहीं कर रहें आगे जब अपन काम करेंगे प्रोज्जेक्ट बनाएंगे अटोमेटिकली केलिर्टी मिलेगी अभी अपनी CSS की फर्स्ट क्लास यह है

00:51:34दो तीन क्लास में आपको अटोमेटिकली पता चल जाएगा कि CSS है क्या ठीक है

00:51:39और ID क्लास कैसे यूज करते हैं कैसे क्या सारे चीज़े होती है

00:51:43इशा करें सारे इसमें डाइरेक्शन क्या है अभी के लिए डाइरेक्शन वाले को भी रहने दो आप

00:51:48क्योंकि चीज़े ओवर होगी फिर

00:51:52अभी के लिए डाइरेक्शन वाले को भी रहने दो अगर समझ में नहीं आया तो

00:52:01आपको अटोमेटिकली क्लियरिटी मिलते जाएगे आगे आगे जैसे पन बढ़ते जाएगे

00:52:05क्योंकि मैंने जो फ्लोव बना रएक है मैं उसी फ्लोव से आपको समझा रहा हूँ

00:52:09लेकिन बीच में कोई नहीं चीज़ा जाती तो मैं आपको बता देता हूँ फिर आपको लगता कि ये क्या हो गया

00:52:14और मैं नहीं चाहता कि ये क्या हो गया

00:52:16ठीक है

00:52:19सर आइदी एन क्लास को हम सिर्फ CSS के लिए ही यूज करते हैंya

00:52:27JavaScript के लिए भी यूज करते हैं

00:52:30CSS और JavaScript दोनों के लिए यूज करते हैं

00:52:33ID और क्लास को

00:52:34Dom के अंदर अपना ID और क्लास वहाँ भी काम आएगा

00:52:37ठीक है

00:52:38वहाँ पर भी पन यूज़ करते हैं

00:52:40हर एक चीज ओटोमेटिकली क्लियर होती जाएगी जैसे जैसे से आगे बढ़ने वाला है।

00:52:44सिबूल करें सर असाइमेंट देने वाले थे ना HTML के, नहीं आज कोई असाइमेंट नहीं दे रहांगा आपको।

00:52:48ठीक है। तो यह बात होगे अपने पास किस चीज की अपने सिंपल सेलेक्टर की। चलो आगे दोनों वह भी देख लेते हैं इसको कंप्लीट ही करते हैं फिर अपन प्रोपर्टीज पर आ जाएंगे कलवाली क्लास के अंदर ठीक है।

00:53:12क्योंकि CSS जितना जल्दी हो जाएगा उतना ही आपको समझ में भी आएगा और साथ के साथ फिर अपन प्रोजेक्ट बनाएंगे तो आपको और ज्यादा क्लीरिटी मिलेगी हर एक चीज का रिवीजन भी हो जाएगा।

00:53:21अगर ज्यादा लेंदी की चाहिए तो फिर प्रोजेक्ट आने तक आप बोलोगी सर पुरानी चीज तो मैं भूल चुका हूँ तो ऐसा होना नहीं चीए इसलिए अपना आगे देख लेते हैं।

00:53:32अब देखो यूनिवर्सल सलेक्टर क्या होता है। यूनिवर्सल सलेक्टर काम आता है आपको अपने बॉड़ी टैग के अंदर जिदिने भी एलिमेंट्स हैं उन पे सब पे कुई भी सेम प्रोपर्टी लगानी है उसके लिए आप यूज देते हो उपना यूनिवर्सल सल

00:54:02एक paragraph टैग ले लेता हूं और उसमें अपन लॉरेम करके 10 का content भी pass कर देता हूं ठीक है यह कुछ इस तरीके से अपने लिया फिर उसके बाद अपन यहां पर एक अपना स्थी टैग ले लेता है और उसमें भी अपन लॉरेम करके 5 का content पास कर देता है और मैं इस file को run कर लेता ह

00:54:32लेते हैं आगे मैं इसको use लेंगा जब भी मैं कोई भी प्रोजेक्ट बनाऊँगा उसमें सबसे पहले universal selector लागा के लग दूँगा और उसमें कई चीजे जो मैं यहां पर set कर दूँगा शुरू में तो यह आपको अभी तो सिर्फ इतना ही जाना है कि universal selector body के अंदर जित

00:55:02basis then उसके बाद property और value जो भी आप लगाना चाते हो इसका मतलब यह हो गया कि आपके body के अंदर जितने भी टैग है सब target हो चुके है ठीक है फिर उसके बाद आप यहां पर जो भी प्रोपर्टी लगाना चाते हो जैसे मालो मैंने लिखा color color आप यहां पर कर देना green तो इसका

00:55:32आपने universal selector यहां पर create कर रहा है ठीक है तो यह अपने पास होता है अपना universal selector ऐसे ही next अपन आगे चलते है अपने group selector के उपर group.html ठीक है तो अब देखो group selector क्या काम आता है group selector का मतलब है अगर आपको group के अंदर target करना है elements को

00:55:53जैसे मैंने catch 1 tag लिया और उसके अंदर मैंने आपने लिख दिया देवानचू ठीक है फिर उसके बाद मैंने पर paragraph tag लिया और paragraph tag के अंदर lorem करके अपने, nine का content लिख दो

00:56:19तो फिर उसके बाद मैंने यहाँ पर echo tag ले लिया

00:56:23S3 tag ले लो और उसके अंदर अपन यहाँ पर कह देते हैं

00:56:26जैसे कुछ भी कह दो जो हो कह देते हैं ठीक है

00:56:30फिर उसके बाद अपन यहाँ पर echo tag ले लेते हैं

00:56:34H5 जिसके अंदर मैं यहाँ पर कह देता हूं

00:56:35meeting

00:56:37परफेक्ट अब देखो यहाँ पर

00:56:40h1 टेग है यह अपना paragraph टेग है

00:56:42इस s2 टेग को मैंने एक id असाइन कर दी

00:56:44और id मैंने असाइन कर दी

00:56:46यहाँ पर इसकी ठीक है

00:56:48यह जो अपना s3 टेग है

00:56:49इसको मैंने यहाँ पर एक class असाइन कर दी

00:56:51अब यहां पर अगर आप इसको रन करोगे तो अभी तो बेसिकली इस्ट्रक्चरी दिखने माला है

00:57:01यह आपका heading टैग है यह paragraph टैग है यह आपका heading टैग है यह आपका pre-tag है फिर heading फिर heading यह सिर्फ समझाने के लिए बता रहा हूं

00:57:13आपको बने स्वाहनं सेपरेंड करते वे चलो और next अलिमेंट को टारोगेट करते लिए पर छारो चलो

00:57:41एलिमेंट को टारगेट करो, सेकंड मैं यहाँ पर S2 को टारगेट करना चाहता हूँ, किसके बेसिस पर?

00:57:46ID की बेसिस पर, तो मैं यहाँ पर ID लगा दो, ID जिसकी भी क्या है, इसको भी टारगेट कर लेना,

00:57:51कॉमा लगाते पर चलो, फिर उसके बाद मैं बोल रहा हूँ, जिसकी क्लास यहाँ पर जो है, उसको भी टारगेट कर लेना,

00:57:58उसके अलावा मैंने बोला, जो H5 टारगेट करो, बस, और फिर उसके बाद इसके उपर लगा दो अपनी कलर प्रोपर्टी, और कलर क्या कर दो इसके उपर?

00:58:08ब्लू कलर आप इसके उपर अपलाई कर दो, ठीक है? तो यहाँ पर आप देखोगे, तो जिन-जिन को मैंने यहाँ पर टारगेट करा है, उन-उनके उपर यहाँ पर कलर क्या हो गया? ब्लू कलर अपना अपलाई हो गया, यह ग्रूप के अंदर टारगेट होता है, ग्रू

00:58:38then ऊसके बाद मैंने इसका color यहां पर क्या कर दिया

00:58:41new color कर दिया तो जो जो tag मैंने यह आपरbnop

00:58:58दूसरा सलेक्टर अपने पास था अपना universal स्लेक्टर और तीसरा अपने पास

00:59:03पर फेक्ट यहां तक के चीज के लिए तो एक बार comment कर के बताओ यहां तक की चीज

00:59:13के लिए रहे हैं नहीं है किसी को चलो बहूं आज की class का इक बार मैं revision कर देथे

00:59:21तो किया क्या चीज अपने देखी थी पहली चीज अपतर ने देखी CS के उपर अपने discussion किया था फिर

00:59:26उसके बाद syntax देखा, बड़ा easy syntax था, क्या था, selector, curly braces, property और value, बस, फिर उसके बाद अपने बात करें types of CSS की तीन types अपने पास यहां पर आ रहे थे, पहला अपने पास था, internal, दूसरा external और तीसरा inline, internal कैसे लिखते है, अपने head tag के अंदर ही style tag पास करके internal CSS लिखते है, external कैसे �

00:59:56और href के अंदर अपनी external file की location पास करते है, inline CSS, inline CSS भी easy है, जो अपने पास अपना tag होते है, उसी में अपन as a attribute style को पास करते है, then उसके बाद property और value, यह बात होगे types of CSS की, priority किसकी first होती है, inline की, फिर internal की, फिर external की, फिर उसके बाद अपने देखा, अपने selectors, तीन type अपन

01:00:26simple selector, universal selector, और अपने पास अपना, तीसरा selector कोन सा था, group selector, तो तीनों selector अपने देखे, simple में अपने देखा, tag name के basis पे, id के basis पे, और class के basis पे, universal में star करके अपने यूज लेते है, body के अंदर जितने भी tag है, सब पे same property अप्लाई करने के लिए, और group selector, comma से separate करते वे चलो,

01:00:56तो ये बात होगी अपने पास अपनी CSS के आज के topic के अपर, और मैं आपको बता दू, जितनी भी चीज़े अब अपन देखरे, इसकी कुछ से practice करना, सिर्फ class लेने से चीज़े समझ में नहीं आएगी अब, ठीक है, HTML तक अगर आप class लेके काम चला रहते हैं, तो कोई दिक

01:01:26CSS के topic के उपर, अरे विश्वात सर, क्या बढ़ हो याँ, आपके student भी होंगे या, कोई नो कोई तो, ठीक है, यहाँ तक की चीज़ के लिए रहे, तो एक बार comment करके बताओ, यहाँ तक की चीज़ के लिए रहे, इसमें कोई भी route नहीं है,

01:01:56clear everything, clear है sir, ठीक है, तो अब अपने duration को थोड़ा सा increase कर लो, practice वाले duration को, ठीक है, जैसे जैसे अपन आगे बढ़ते जाए, वैसे वैसे ही समलो की duration आपको increase करते जाना है, एक गंटा, फिर उसके बाद एक गंटा, एक गंटा 15 मिनट, 20 मिनट, 25 मिनट,

01:02:26ठीक है?

01:02:56ठीक है, चलो मैं आपको attendance के points बता देता हूँ, आज की attendance के point क्या है?

01:03:23attendance के point one के अंदर आपको mention करना है यहाँ पर CSS,

01:03:33इसी के साथ attendance का point two भी आपको बताता हूँ, attendance के point two के अंदर आपको mention करना है,

01:03:45क्या mention करना है style, ठीक है, यह attendance के 0.1 and 0.2 है, जो आपको fill करने है, css and style यह attendance के 0.1 and 0.2 है, ठीक है, अगर किसी को कोई भी doubt है, तो आप doubt अपने पूछ सकते हो, नहीं तो आज की class अपने इतनी रखते हैं, बाद की discuss करेंगे अपनी next class के अंदर,

01:04:15सब good night बोल रहे हैं, ठीक है, अगर कोई भी doubt नहीं है, तो आज की class सर्फ इतनी ही, मिलते हैं फिर अपने next class के अंदर,

01:04:30thank you so much guys, सभी अपना ध्यान रखो, family का भी ध्यान रखो, मिलते हैं फिर अपने next class के अंदर, bye bye everyone, take care all, love you all, good night.

Be the first to comment

Add your comment

🔥 CSS Introduction + CSS Types + Selectors

Category

Transcript

Be the first to comment

Recommended