Up next in 10
Styling Lists using CSS _ Sigma Web Development Course - Tutorial #25
19 views
Mar 11, 2024
In Tutorial #25 of the Sigma Web Development Course, we explore the art of Styling Lists using CSS. This session provides a comprehensive guide on enhancing the visual appeal and organization of HTML lists through various styling techniques. Participants will learn to customize list items, adjust spacing, and create unique designs that align with the overall aesthetics of their web projects. Whether you're a beginner eager to elevate your CSS skills or an experienced developer looking to refine your list styling techniques, this tutorial offers practical insights and creative approaches. Join us as we dive into the world of list styling, unlocking new possibilities for creating well-structured and visually appealing web designs.
View Video Transcript
0:00
हमने HTML के अंदर अलग-अलग list के बारे में पढ़ा था, हमने देखा था ordered list होती है, unordered list होती है, definition list होती है, उसके अंदर list items होते हैं, आप लोग अगर एक website बना रहे हैं तो navigation bar में for example, आप लोगों को list items डालने पड़ेंगे एक unordered list के अंदर, वहाँ पर आप लोगों को बह��
0:30
जरूर लिख देना चलता है कंप्यूटर स्क्रीन में लेट्स रोल देंटर ��
0:38
अजय को इसमें आ चुका हूं अपनी कंप्यूटर स्क्रीन के अंदर सबसे पहला काम करूंगा वीडियो 25 बनाऊंगा ठीक है और यहा��
0:53
शिफ्ट राइट क्लिक करके मैं ओपन विद कोड करूंगा देखो लोग जो है वह सेंचुरी सेलिब्रेट करते है��
0:59
50 सांधा सेंचुरी सेलिब्रेट करते हैं मैं क्वार्टर सेंचुरी भी सेलिब्रेट करूंगा 25 वीडिय��
1:04
लें को रेटिवेशन लेंगे कमेंट में जल्दी से सब लोग अब यहां पर इंडिक्स और एसटीमल बनाते हुए आप लोगो��
1:10
बताऊंगा कि एक लिस्ट इस तरह से स्टाइल करना यार देखो लिस्ट की स्टाइलिंग इतनी ज्यादा इंपोर्टेंट होत��
1:16
कि अगर आप लोग एक नया बार बनाना चाहते हो तो उसमें लिस्ट आइटम का इस्तेमाल सेवन्टी टू एटी परसें��
1:22
टाइम करोगे ही करोगे अब यहां पर मैं जल्दी से वर्ड रैप को टॉप करके उसकी इंग्राट का स्मॉड ऑन कर लेत��
1:29
आपको दिखें मैं क्या कर रहा हूं और मैं आपको लिखूंगा सीएसस लिस्ट ठीक है पालों कि एक नवार बनाना है ठीक है मै��
1:34
एक टिपिकल एग्जांपल के साथ स्टार्ट करता हूं जो कि यूज करोगे आप लोग ना लिखने के बाद मैं कहूंगा यार ए��
1:40
अनॉर्डर लिस्ट बनाओ एक एलाई बनाओ वहां पर लिखो होम यह और इसी के साथ साथ और कुछ एलाई बनाओ यहां प��
1:47
लिख दो अब आउट और मान लो यहां पर लिख दो कॉन्टैक्ट तो मैंने यहां पर अब आउट लिख दिया यहां पर कॉन्टैक्��
1:53
लिख दिया अब सबसे पहले तो आप लोग यह प्लेड एक्सेस कर दो नहीं तो मैं आपके घर में आउँगा और democratic
1:58
खुद access कर लोगा, प्रेरेस और bookmark कर दूँगा आपके computer में, अच्छा लगेगा आपको
2:02
नहीं लगेगा न, तो इसलिए आप खुद ही कर दो, अब यहाँ पर आप देख सकते हो कि, github.com slash code with
2:07
there is slash sigma web dev codes में मैंने आप लोग को सारा source code दिया है, इसको भी आप लोगों को access करन��
2:11
ठीक है यह सब चीज़ा आप खुदी कर लोगे तो अच्छा रगेगा मुझे अब यहाँ पर आप देखो मैं इसको ब्राउजर में खोल के आप लोगों को दिखाता हू��
2:17
और यहाँ पर देख सकते हुआ यह इस तरह से render हुआ जो कि एक default behavior होता ह��
2:21
list styling use as a navbar by default list
2:33
इसे मैं अगर इसी list की बात करो inspect करके आपको दिखाता हूँ और अपना थोपड़ा छुपा देता हू��
2:52
display value list item होता है, जिसका मतलब यह होता है, कि इसमें एक marker होगा
2:58
और एक item होगा, ठीक है, अब अगर आप लोग चाहते हों, कि इसके display को change करो
3:03
कर सकते हो आप change, अगर मैं इसके display को block कर दू, तो इसका display block हो जाएगा
3:07
but that's not a good approach, to remove this marker, अगर आप इसके marker को remove करना चाहते हो तो कैसे करोग��
3:13
इसके marker को remove करने के लिए देखो li के अंदर एक marker होता है और एक जो इसके अंदर content है वो होता ह��
3:19
दूसरे li में जाओ एक marker होता है एक ये होता है तो ये इसको कैसे मिलता ह��
3:24
इसकी display जो होती है वो list item है इसलिए इसको यह सब मिल पारी है दो दो चीजें हैं इसमें इट कमप्राइज ऑफ मार्कर एंड लिस्ट आइटम ठीक है अब इसमें कुछ प्रॉपर्ट��
3:34
दो तीन जिनकी बात करेंगे एक सबसे इंपोर्टेंट प्रॉपर्टी जो होती है वह होती है लिस्ट स्टाइल अगर आ��
3:39
लिस्ट स्टाइल को नन कर दोगे तो आप यहां पर देखो यह गोला गायब हो जाएगा यानि कि मार्कर गायब हो जाएगा अग��
3:44
आप लोग लिस्ट स्टाइल को लेट असे इनमें से कोई भी वैल्यू रखते हो वह पर देखो कैसे चेंज हो रही है ऊपर ऊप��
3:50
देखो ऊपर सर्कल करूंगा मैं यह पर यह सारी वैल्यूज का इस्तेमाल किया जा सकता है देवनागरी भी होती ह��
3:56
लेटेज देवनागरी करोगे तो एक दो तीन चारा एक अल्लेज टाइल को आप देवनागरी भी कर सकते हो लेकिन यूजुअली हम क्य��
4:01
करते हैं कि इसको टारगेट करते हैं इसको बन दो इसको टारगेट करें लिस्ट आइटम को लेटेस्ट मैं यहां प��
4:07
देखता हूं स्टाइल और मैं को नाव के अंदर जो यूएल के अंदर एला ही है उसका आप क्या करो लिस्ट टाइल क��
4:14
बड़ दो लिस्ट स्टाइल तो अगर मैं एक नए बार बनाना जाता हूं तो मैं क्या करूंगा इस टाइल को नन कर दूंग��
4:20
लेकिन जस्ट आपको देवनागरी करके दिखाता हूँ और जैसे मैंने इसको देवनागरी किया देवनागरी आई थिंक आ देवनागर��
4:30
ओके मैंने देवनागरी की स्पेलिंग रहा थी कि माइट बैड और आप देखो यहां पर जैसे मैं इसको देवनागरी करूंग��
4:35
देवनागरी दी वी ए एनेजी आराइड देवनागरी ठीक है अब देखो आप लोग यहां पर 123 जो है आप लोगो��
4:45
देखने को मिल जाएगा ठीक है तो इस तरह से आप लोग चेंज कर सकते हैं इसकी लिस्ट टाइल प्रॉपर्टी को चें��
4:49
marker content background background yellow background color yellow
5:01
ठीक है यहाँ पर मैंने yellow कर दिया इसका background color तो आप देखो marker रह गय��
5:06
मार्कर इसका मतलब बाहर है लिस्ट आइटम के लिस्ट आइटम के अंदर नहीं ह��
5:10
लेकिन मैं चाहता हूँ कि जो मेरा मार्कर है वो लिस्ट आइटम के अंदर आ जा��
5:14
कैसे करूँगा मैं लिस्ट स्टाइल पोजिशन का इस्तेमाल करके तो मैं आप रहूंगा और मैं कहूंगा भा��
5:18
जो list style position है ना मेरी inside कर दो यानि क��
5:23
जो marker है उसको अंदर ले जाओ और अब marker मेरा अंदर आ गया ह��
5:26
यानि कि कोई भी background लगाया चाहेगा border लगाया चाहेगा वो पूरे पर लगाएगा, border भी लगागे दिखाता हूँ, और वो border भी लगागे दिखाता हूँ, ये लो border 2 pixel solid black, और यहाँ पर आप लोग देखो, जैसे ही मैंने 2 pixel solid black border लगाया, आपके markers अंदर है, क्यों, क्योंकि मैंने यहाँ पर list style position को inside कर दिया है, और जब भी मैं list style position को inside
6:00
यहाँ पर list style image property का इस्तेमाल कर सकता हूँ और यहाँ पर मैं एक image का URL लगा सकता हूँ तो URL और इसके बद यहाँ पर मैं एक image का URL लगा सकता हू��
6:10
लेट असे मैं एक इमेज का URL जो कि ये है मैं आप लोग को दिखा द��
6:15
इसको अगर मैं इस्तिमाल करना चाहता हूँ तो यहाँ पर हमारा आया क्यों नहीं ह��
6:20
let me see forbidden, okay actually वो image for some reason accessible नहीं थ��
6:25
इसलिए मैंने ये वाला image यूज़ किया आप लोग यहां पर देख सकते हो कि इस इमेज को यूज करते ही मारकर की जगह पर यह इमेज आ गया आप लोग एक ची��
6:31
और दिखाता हूं मैं इसको कमेंट करूंगा और यहां से चला जाएगा ऑबिसली मैं यहां पर क्या कर सकता हूं जो मैंन��
6:37
लिस्ट टाइल को देवनागरी किया, मैं लिस्ट टाइल टाइप को एक emoji भी सेट कर सकता हूँ, और मालों मैं ये बंदर वाली emoji सेट करता हूँ, और आप लोग देखो यहाँ पर ये बंदर आ गया, तो आप लोग अगर ये बंदर लगाना चाहते हो, तो क्यों जिस तरह से ��
7:07
एक साथ एकी बार में कर सकता हूं आप देखो यहां पर जैसे मैंने इसको यह किया और मैं इसको कमेंट आउट करूंग��
7:13
ie disk disk obviously disk URL disk inside URL disk use URL use obviously
7:32
पर मैं अभी for the syntax sake मैं इसको तीनों को ऐसे ही रख देता हूँ आपको यहां तो आप यह दोनों use करोगे एक बार में या यह दोनों use करोग��
7:39
आपको आपका इमेज दिखेगा यह डिस्क दिखेगी ठीक है सब्सक्राइब कि आप लोगों को और लिस्ट टाइल इमेज आ��
7:48
लोग जो है क्लियरली समझ गई किस तरह से शॉट एंड प्रॉपर्टी उसका नहीं मैं इसको जरा कमेंट आउट करके डिस्��
7:54
रहने दूंगा इन फैक्ट यह बंदर मुझे अच्छे लगे फिर एक स्माइल यदि अगर रखें तो कैसा रहेगा यह फायर रखें त��
7:59
कितना अच्छा रहेगा तो फायर भी मैं रख सकता हूं कुछ इस तरह से इट लोक्स प्रेडी गॉड तो लिस्ट को काफ��
8:04
यहां पर क्या करते हैं एक तो लिस्ट स्टाइल को हम करते हैं ना ठीक है एलाई में इन पर्टेल ही में करूंग��
8:24
ताकि सब में apply हो जाए, list style none, जब भी आप कोई चीज यहाँ पर लिखते हो element.style में
8:29
वो as, मैं आप लोगों को यह बंद करके दिखाता हूँ वीडियो, वो यहाँ पर as inline style add हो जाता है
8:35
यहाँ पर मैं जो चीज़ टाइप करूंगा यहाँ पर जो चीज़ में आप राज करूंगा यहाँ ठाओंगा यहां से एलिमें��
8:40
डॉट स्टाइल में जो चीज लिखी जाएगी वह यहां पर ऐड हो जाएगी आज इन लाइन सीएसस यह बात आपको पता होनी चाहि��
8:46
लिखोंगा मैं यहां लिखोंगा यहां लिखोंगा लिस्ट टाइल नन कर दूंगा और आप देख सकते हैं लिस्ट टाइल नन करने से गायब ह��
8:53
फिर यूजुअली हम डिस्प्ले फ्लेक्स करते हैं ताकि यह होरिजोंटल हो जाए ठीक है और वह इसके कंटेनर पर करत��
8:58
हैं यूएल पर ठीक है यहां पर नहीं करेंगे यूएल पर करेंगे तो डिस्प्ले फ्लेक्स करते हैं इसके कंटेनर प��
9:02
इसके सारे आइटम्स फ्लेक्स बन जाए ठीक है और जो लिस्ट आइटम होता है उस पर यूजियल यहां क्या करते हैं ज��
9:08
पाड़िंग होती है वह सेट करते हैं मालों 23 पिक्सल्स पर निकली तो देखो इस तरह से हमारा जो नहीं बार ह��
9:13
बन जाता है बट तैसा व पॉइंट अब इस वीडियो आने वाले वीडियोस में हम बनाएंगे बढ़िया-बढ़िय��
9:17
तगड़ी-तगड़ी वेबसाइड बनाएंगे टेंशन बिल्कुल मत लेना अभी लेलिस को एक्सेस करना यह लिखकर के बुकमार्��
9:23
यहाँ click करके save thank you so much guys for watching this video and I will see you next time
#Skins
# Themes & Wallpapers