आज के इस video में देखेंगे fonts and color sizes में किस तरह से काम करते हैं
इस video में मैं आप लोगों को ये भी बताऊंगा कि external fonts को
अपनी website में आप लोग किस तरह से use कर सकते हैं। हम लोग जानेंगे कि font
sizes किस तरह से change किए जा सकते हैं। fallback font का क्या concept
है और ये सब आप लोगों को examples के साथ मैं बताऊंगा। चलते
हैं computer screen में let's roll the intro। तो
guys आज का video मैं दोबारा से बोलूंगा की एक बहुत important video होने वाला है
क्योंकि इसमें मैं आप लोगों को एक तो font बताऊंगा और color बताऊंगा और कोई
भी website आप बनाओगे अपनी जिंदगी में fonts and colors definitely आप
लोगों को use होते हुए वहां पर दिखेंगे। तो हमेशा की तरह मैं क्या करूँगा
यहाँ पर shift right click करके infact यहाँ click करके एक नया folder बनाऊंगा
जिसमें मैं। video nineteen के नाम से एक folder बनाऊंगा। shift right
click करके इसको open with code करूँगा। और जैसे ही मैं इसको open with code
करूंगा आप लोग यहां पर देख सकते हो। ये एक index dot HTML नाम से file
मैंने। यहां पर बना ली है और मैं यहां पर जो है internal
CSS लिखने वाला हूं क्योंकि मैं नहीं चाहता style sheet बनाऊं ताकि आप लोग का
सब कुछ एक ही page पर रहे ठीक है। so यहां पर सबसे पहले मैं एक div बनाऊंगा
ठीक है और इस div के अंदर मैं H one लिखूंगा और H one के अंदर लिखूंगा fonts
और इसके अंदर मैं डालूंगा paragraph this is a video on fonts
मान लो मैं लिखता हूँ। ठीक है? अब मैं यहां पर आप लोगों को। बताना चाहता हूँ कि अगर आप लोगों ने ये playlist
access नहीं करी तो यहां पर click करके bookmark जो आप करते नहीं हो कर लेना यहाँ
पर click करके save भी कर लेना और उसी के साथ साथ source code update हो
रहा है ये भी आप देख लेना सारे videos का source code update कर दिया है। तो source
code तो भाई time to time update कर ही देता हूँ। मैं इसको preview करके आप लोग को दिखाऊ तो no
surprises fonts and this is a video on fonts लिख कर आ गया। लेकिन मजे
की बात ये है कि आप लोग font change कर सकते हो। बहुत सारे
लोग यहां पर beginner होंगे और उन्हें पता नहीं होगा font क्या होता है। ये एक अलग
font है और ये एक अलग font है और ये एक अलग font है
यानी कि अगर आपको text different appear होता हुआ दिख रहा है तो वो font की वजह से different
appear होता हुआ दिखता है। तो किसी भी element का अगर हमको font change करना है तो हम
font family का इस्तेमाल करते हैं। तो मैं यहां पर बहुत ही आराम से एक style tag लगाकर
लिख सकता हूं कि यार paragraph है ना उसकी font family को कर
दो। क्या कर दो अब देखो यहां पर बहुत सारे options automatically
VS code दे रहा है। मान लो मैं चाहता हूं कि यहां पर C और उसी के साथ साथ
toa और इतनी सारी देखो यहां पर fts देखने को मिल रहे हैं। ये comma separated
values होती है जो कि आप लोगों को यहां पर पहला font जो है। ये
लगाने की कोशिश करेगा। अगर ये font उपलब्ध नहीं है आपके system में तो
ये वाली font लगाने की कोशिश करेगा and so on। ठीक है? तो ये जो है
fallback fonts कहलाते हैं। यानी कि main font है C O UI
और तमा, Geneva, वरना, सफ ये जो है। fallback fonts है ठीक
है तो आप यहां पर देखो कि जैसे ही मैं यहां पर दिखाऊंगा आपको तो ये सा इसकी जो
font है वो change हो गई। अगर मैं चाहता हूं कि जो मेरा H one है उसकी
font family में change कर दूं। अब मान लो मैं चाहता हूं कि times new roman यहां
पर आए तो मैं font family में times new roman कर दूंगा और I think ये by default
ही times new roman है तो यहां पर कुछ भी फर्क नहीं but let's try something
else और यहां पर जैसे ही मैं आह font family लिख के
इस तरह से लिखूंगा। तो let's do lucid sense और ये वाली
जो font family की पूरी एक set है तो यहां पर देखो
कि मैंने font जो है change कर दिया है। ये सा better दिख रहा है font अभी compared
to अगर मैं कहूँ जो पहले यहां पर font लगा हुआ था। तो font family
से आप लोग जो है font को change कर सकते हैं। अब जब भी हम लोग font family डालते
हैं तो ऐसा कहा जाता है कि आप लोग जब भी font family डाल रहे हैं तो
कम से कम एक ऐसी generic font family डाले ताकि अगर user के
computer में font नहीं है तो दिक्कत ना हो। ऐसे में ऐसा suggest
किया जाता है कि times new roman जैसी जैसी जैसी एक font
family डालना जरूरी है आपकी fts में जब भी आप websites बना रहे हैं। तो
इस तरह से आप लोग जो है यहां पर fonts दे सकते हैं। अब font से related
और भी बहुत सारे हमारे पास कहूंगा मैं properties होती है जैसे
कि अगर मैं paragraph में चाहता हूं कि जो font start। है
उसको मैं italic करना चाहूं तो मैं bold italic कर सकता हूं अपने font style
को मैंने यहां पर font style को italic किया तो मैं इस तरह से कर
सकता हूं। font style में हमारे पास आता है एक तो italic
है और एक है हमारे पास normal एक है oblique bold नहीं
होता है bold के लिए हमें font weight का इस्तेमाल करना होता है। तो मैं अगर यहां पर इसको oblique कर दूँ
तो ये जिस तरह से दिखेगा और उसी के साथ साथ अगर मैं इसको underline
भी नहीं कर सकता actually underline के लिए भी मुझे। use करना
text decoration का तो यहां पर ये values होती है अब यहां पर
usually italic के लिए इसको इस्तेमाल किया जाता है तो आप लोग अगर italic करना
चाहते हैं तो आप font style का इस्तेमाल करेंगे। जैसे ही आप यहां पर font लिखेंगे देखो font से
related बहुत सारी properties आ गयी और मैं यहां पर font weight आप लोगों को बताना चाहता हूं। ये
सारी values हैं। bold bolder, lighter और आप इस तरह से values
भी डाल सकते हो तो देखो ये सा हो गया यानी कि bold हो गया तो कभी भी आप bold करना
चाहते हो तो इसका इस्तेमाल करके आप लोग जो है bold कर सकते हो
तो oblique आप कर सकते हो font style से italic कर सकते हो, आप normal
कर सकते हो और अगर आप लोगों को। यहां पर underline करना
है तो आप लोग text decoration का इस्तेमाल कर सकते हो ठीक है तो text decoration एक property
है जिससे कि आप लोग underline कर सकते हो। तो ये मैं आप लोगों को बताना चाहता हूं और
overline भी आप लोग कर सकते हो तो overline को जिस तरह से देखते है ऊपर line आ जाती है
but ये सब properties मैं आप लोगों को बता रहा हूं ईमानदारी से उतनी ज्यादा use में नहीं आती
है जितनी ज्यादा आपको italic आएगी या फिर font me आएगी। तो ये यहां
पर एक code pen है जिसका link में यहां पर डाल देता हूं इससे पहले कि मैं भूल जाऊं
मैं इसका यहां पर link डाल देता हूं code pen का और ये code
pen का link आप लोगों को बताएगा कौन कौन सी font families किस
किस तरह से दिखती है। तो ये देखो यहां पर serif ऐसे दिखती है serif ऐसे
दिखेगी monospace ऐसी दिखेगी और cursive ऐसे दिखेगी और आप देख सकते
हो यहां पर कि ये code pen बहुत अच्छी तरह से दर्शा रहा है कि किस तरह
से आपकी families दिखती है ठीक है। अब क्या होता है की usually जब आप web development
करते हो तो आप लोग ऐसा चाहोगे कि आप कुछ special fonts का इस्तेमाल करो
जैसे कि मैं बल्लू भाई का इस्तेमाल करता हूं। बल्लू भाई एक font है जो कि मैं बहुत
ज्यादा पसंद करता हूं। हां बल्लू भाई और बल्लू बहना ये दोनों font
के नाम है अभी आपको दिखाऊंगा। और ऐसे में आप लोग google font जैसी service का
इस्तेमाल करते हो तो मैं यहां पर आप लोगों को google font का इस्तेमाल करना दिखाता हूं
तो आप लोग अगर यहां पर देखो मैं नई tab में google font लिखूंगा
और जैसे ही मैं google font पर यहां पर आऊंगा मैं actually में एक font का इस्तेमाल कर सकता हूं। अगर
मैं यहां पर बल्लू भाई लिखूं बल्लू भाई I hope I am
spelling it correct बल्लू भाई बल्लू दा भी है बल्लू बहना भी
है और यहां पर मुझे बल्लू भाई font क्यों नहीं मिल रहा
है ये Arabic font मुझे क्यों दिखा रहा है। मैं यहां पर home पर आऊंगा
और मैं यहां पर लिखूंगा hey I am good। और यहां पर आप देखो
बल्लू भाई, बल्लू बहना, बल्लू भाई two ये सारे fonts मुझे देखने को मिल रहे
हैं। ठीक है? अब मैं यहां पर click करूं तो आप लोग यहां पर देखो बल्लू भाई two english
में कुछ ऐसा दिखेगा। अब मान लो मैं इस font को इस्तेमाल करना चाहता हूं मैं
reset कर देता हूं। अगर मैं इसको इस्तेमाल करना चाहता हूं तो मैं simply क्या करूंगा कि
यहां पर click करूंगा। ठीक है मान लो मैं medium five hundred नहीं मैं चाहता हूं कि मेरा font ऐसा दिखे
या फिर मैं चाहता हूं ऐसा दिखे normal तो मैं plus पर click कर दूंगा और ये मुझे
यहां पर जो है font दे देगा। अब font को include करने के दो तरीके होते हैं
या तो आप link के through करें या import के through करें import के through अगर आप लोग
कर रहे हैं तो आप style tag के अंदर डाल दें import statement जो कि मैं आपको अभी करके दिखाता हूं
और I hope I am not going fast, I am just trying कि मैं repetitive ना हूं और
आपका कम से कम time लेके मैं आप लोगों को ज्यादा से ज्यादा चीजें सिखा सकूं। तो
यहां पर आप देख सकते हो मैंने import URL ऐसे किया अब मैं यहां पर अगर चाहता हूं मैं
इसको comment out करूंगा और मैं यहां पर लिखूंगा font family। और
in fact मैं क्या करूंगा यहां से copy कर लूंगा क्योंकि यहां पर font family का दिया
होता है कि किस तरह से apply करनी है। तो सा convenient हो जाता है copy
paste करना और यहां पर देखो बल्लू भाई के पास sense serif दिया हुआ है कि by chance
आपके पास बल्लू भाई two font नहीं है तो s serif आपको मिलेगा। अब आप देख सकते हो यहां पर
ये font बिल्कुल इस तरह से दिख रही है। जैसे लिखा था यहां दिख रही है
और मैं इसमें से जरा ये italic हटा देता हूं और मैं font weight भी हटा देता हूं क्योंकि ये
दोनों चीजें तो मैंने आप लोगों को सिखाने के लिए बताई थी ठीक है। आप
exactly चाहोगे font आपका दिखे वैसा जैसा आपने download किया है और वैसा ही मुझे दिख
रहा है क्योंकि मैंने ये जो बल्लू white है वो ऐसे ही download किया हुआ है यहां से
ठीक है आप देख सकते हो यहां पर कि ये font मुझे मिल गया है। अब
अगर मैं चाहता हूं कि link का इस्तेमाल करूं तो मैं actually ये link को भी copy
करके। फिर मैं यहां से ये import वाला हटाऊंगा और अब मैं इसको डालूंगा अपने
head tag में right click format document कर लेता हूँ ताकि unnecessary spaces
चली जाए और आप यहां पर देख सकते हो कि मैंने link के through इस font को जो है
include कर दिया है अपने web page में। तो मेरे web page में HTML के through
भी include कर सकता हूँ fts को और मैं चाहूं तो मैं style tag
के through भी include कर सकता हूँ font को जैसे कि आपने यहां पर देखा और आप
यहां पर देखो कि मेरा जो बल्लू भाई है वो intact है मेरी बल्लू भाई
font यहां पर मुझे। दिख रही है which is a good thing आप इसी तरह से बहुत सारे
fonts जैसे कि poppins जो कि मैं इस्तेमाल करता हूँ to be honest
poppins is one of my favourite fonts तो मुझे मान लो poppin भी include
करना है तो its always recommended की आप जितनी fonts आपको include
करना है ना वो आप एक बार में include कर लो जैसे मैंने poppins मुझको ये वाली चाहिए मान लो
मैंने ये include कर ली। तो मैं ये जो link और imports है न मेरे मैं इनको
एक बार में यहां पर देखो एक ही request में ये दोनों font ले आएगा। तो
its always recommended की आप। मैं जरा ये हटा देता हूं यहां से link
tag क्योंकि मैं भी import लगा रहा हूं। इन दोनों में से एक ही लगाना होता है आपको। तो देखो
यहां पर एक ही import statement से बल्लू भाई भी आ रहे हैं
और एक ही import statement से यहां पर poppins pont भी आ
रही है। तो एक तीर दो निशाने आप एक तीर पचास निशाने भी
कर सकते हो। पर मुझे नहीं लगता आपको एक web page में पचास ponds की जरूरत अब
यहां पर देखो मैं अगर चाहता हूं कि मेरी जो heading है वो poppins हो
जाए तो मैं simply क्या करूंगा जैसे कि यहां पर लिखा हुआ है poppins sense तो मैं poppins
है उसको पहले ही यहां पर बना दूंगा font poppins उपलब्ध है अभी तो
क्या होगा कि poppins लग जाएगी तो देखो जो H one है मेरा उसमें poppins लग गयी है
यहां पर आप देख सकते हो poppins font का मैं काफी इस्तेमाल करता हूं मेरी one of the favourite fonts
है। but आप लोग google fonts पर जाकर बहुत सारी fonts है उनको explore करें
तो आपको आने वाला है। मैं आप लोगों को इस बात की guarantee दे सकता हूं। तो this
was about font in CSS और font की कुछ और properties के बारे
में मैं आप लोगों को बताना चाहता हूं। एक और जो property property है वो है font size
जिससे कि आप font का size change कर सकते हो। अगर मैं font size की बात करूं
तो मैं यहां पर large large medium ये इस्तेमाल कर सकता हूं x small
double x large लेकिन मैं आप लोगों को अभी pixel units recommend
करूंगा फिर आगे हम और भी unit की बात करेंगे। तो अगर मैं यहां पर twenty pixels
करता हूं तो आप यहां पर देख सकते हो कि ये font सी हो जाएगी। अब मैं
यहां पर आप लोगों को एक दिखाना चाहता हूं। अगर मैं यहां पर कोई भी font size नहीं डालूं
यानी कि मैंने कुछ डाला ही नहीं है font size तो by default
एक size यहां पर H one का होगा एक size यहां पर paragraph का
होगा और ये जो styling होगी वो default browser की styling होगी और
इसको देखने के लिए मैं जरा अपना यहां पर गायब कर देता हूं। अब यहां पर देखो
H one जो है वो यहां पर आपको दिख रहा है इसको मैं select
करूंगा computer पर जाऊंगा और यहां पर देखो font size thirty two pixels
तो मैं यहां पर। एक काम करता हूँ reset कर देता हूँ just in case zoom
के through कोई value खराब ना हो, font size अगर मैं यहां
पर लिखूं तो देखो thirty two pixels h one का है और जो paragraph है उसका default font size
कितना है sixteen pixels आप यहां पर देख सकते हो sixteen pixels का default font size
है। तो अगर मैं चाहता हूं कि मेरा font size सा हो जाए twenty pixels हो जाए
तो मैं इसको twenty pixels कर दूंगा और अभी आप यहां पर देख सकते हो कि twenty
pixels का font size यहां पर आप लोगों को देखने को मिल रहा है। this is a video on
fonts अब आप यहीं पर इसको select करके arrow keys के through font
सकते हैं। तो मैं up arrow key का इस्तेमाल कर रहा हूं font को के लिए ठीक है और down
arrow key का मैं इस्तेमाल कर सकता हूं अपनी font को और छोटा करने के लिए
ठीक है तो यहां पर आप देखो ये मेरा font मैं छोटा कर सकता हूं up arrow key
दबाए रहा down arrow key दबाए रहा तो ऐसे आप लोग जो है यहां पर adjust
कर सकते हो CSS ऐसे मान लो मैं चाहता हूं कि यार forty nine pixels मैंने कर दी
और मैं चाहता हूं कि यार font weight को कर देते हैं, नौ सौ करके
देखते हैं नहीं नौ सौ ज्यादा हो गया। मान लो सात सौ करके देखते हैं, छह
सौ करके देखते हैं, हाँ छः सौ ठीक है। फिर let us say मैं चाहता हूं। पर
इसका colour set करना मान लो red और अगर ये styles मुझे अच्छे लग रहे
हैं तो मैं इनको copy कर लूंगा कुछ इस प्रकार से मेरी बात को समझना मैं
क्या कहने की कोशिश कर रहा हूं। अब अगर मैं इसको reload करूंगा तो ये सारे styles चले जाएंगे क्योंकि
जो भी styles आप यहां से लगाते हो वो temporary होते हैं। but अगर आप चाहते हो
इन styles को permanently लगाना तो आपने जिस भी element पर लगाया था जैसे मैंने paragraph
पे लगाया था अब ये styles मैं यहां पर paste कर सकता हूं और ये forever यहां पर
आ गए हैं आप देख सकते हो मैं reload भी करूंगा तब भी ये यहां पर आ गए हैं क्योंकि मैंने अपने code
में paste कर दिया है but for now मैं नहीं use करूंगा इन styles को तो I hope
आप समझ गए कि font size किस तरह से काम करता है। अब इसके बाद एक line height का
concept होता है और मान लो कि मैं line height को कर देता हूँ
let us say four ठीक है मैंने line height को four किया paragraph की और
उसके लिए मुझे यहां पर paragraph में सा content डालना let us say मैं एक और
paragraph लिखता हूं और यहां पर Lam forty five लिखता हूं और
मैंने Lem forty five ही क्यों लिखा है ये आप मुझे comment section में बताओगे। ठीक है कि forty
five ही क्यों लिखा मैंने या मैं twenty three ही क्यों लिखता हूं। तो आप देखो यहां पर line
height से क्या होगा कि यहां पर space जो है वो आ जाएगी। ठीक है। और
यहां पर space आ गयी है क्योंकि ये यहां पर line height four दे रखी है। अब मैं इसको कम करूंगा
तो आप देखो ये जैसे जैसे मैं कम करूंगा जैसे मान लो मैंने one point four कर दिया
या one point eight कर दिया तो आप समझ गए कि ये जो spacing है ना ये
है line height control करता है basically कि अगर आप चाहते हो कि आपकी
lines की space जाए line height को आप दो। अगर मुझे जानना
है कि default value क्या होगी line height की तो मैं यहां से line height को हटाऊंगा और
मैं यहां पर computer में जाकर line height search करूंगा। line height
ठीक है अब यहां पर line height मुझे देखने को नहीं मिल रही है इस element में तो
इस element में कोई भी line height compute i guess नहीं हुई है तो मैं एक काम करूंगा google पर
search करूंगा। default line height ठीक है तो जो default line height
होती है वो about one one zero one two zero percent होती है तो आप
अगर चाहे line height को change करना तो आप one point two
से ज्यादा करें अगर आपको ज्यादा करनी है या फिर आप one point two से कम करें और
line height आप लोगों को जो है basically। इसकी spacing में help करेगी। इसके
बाद एक और property होती है letter spacing ठीक है और मैं बता रहा हूं कि ये इतनी ज्यादा
इस्तेमाल नहीं होती है ठीक है और मैं letter spacing को तो देखो ये
क्या हो रहा है यहां पर ऊपर ये letters की spacing को देती है basically जो ये कह रही
है। तो कभी आपको letter spacing हो तो आप इसको इस्तेमाल कर सकते हैं
letter spacing को ठीक है। मैं personally इतना इसको use नहीं करता हूं जो भी websites
बनाता हूँ। लेकिन ये सब ऐसी चीजें हैं जो कि आप लोग
को मालूम होनी चाहिए। इस video के माध्यम से मैं ये चाहता हूँ कि आप लोग
को उन सब चीजों का पता चले जो कि आप लोगों को शायद कभी
अगर आप करना चाहते हो letter से आप लोग पहले word letter को capitalize
करना चाहते हो तो आपको पता होना चाहिए basically कैसे करना है। कुछ चीजें होती है
वो आप लोगों को पता ही नहीं होंगी अगर कैसे करनी है तो दिक्कत हो जाएगी
तो मैं आप लोगों को यहां पर ये दिखाता हूं कि अगर आप लोगों को capitalize करना है
किसी भी first letter को या फिर किसी भी word को जैसे
मान लो H one है ठीक है या फिर एक काम करता हूँ मैं यहां पर H two डालता हूँ। ठीक है। और
मैं यहां पर लिखता हूं about fonts अब मैं यहां पर H two लिखूंगा I hope
आप लोगों को दिख रहा है zoom कर देता हूं अगर मैं यहां पर H two लिखूंगा मान लो
मैं यहां पर लिखूं text transform और मान लो मैं यहां पर capitalize
लिख दूं तो मैंने यहां पर देखो about fonts का अगर f को about fonts
के A को अगर मैंने small कर दिया है। तो आप यहां पर देखो about fonts
के को capital कर दिया जाएगा first letter को ठीक है। अब अगर मैं text transform
में यहां पर letter से लिख दूं colon लगा के lower case
तो आप यहां पर देखो जैसे मैंने lower case किया है ये पूरा lower case हो जाएगा। upper
case करूंगा तो upper case हो जाएगा ठीक है upper case और ये काम में
आ जाता है पता है ऐसी नहीं है कि ये काम में ही नहीं आएगी कभी हर को ये नहीं बोलना चाहिए
कि यार ये काम में नहीं आएगी। ये actual में आपके काम में आने वाला है ठीक है तो ये
property जो है I hope कि आप लोग जो है अपनी tool belt में बांध लो
फिर होता है यहां पर मैंने देखो text decoration तो आपको बता दिया था कि अगर आपको underline
करना है तो text decoration underline कर लो underline हो जाएगा। लेकिन मैं आप लोगों को एक text
decoration colour के बारे में बताता हूं। text decoration colour ठीक है
तो यहां पर आप देख सकते हो text decoration colour aqua आप करोगे तो यहां पर देखो aqua
colour से underline हो गया तो text decoration colour भी आप लोग change कर सकते हो। और ये
helpful होता है जब आप navigation bars वगैरह बनाते हो और navigation
bars में ऐसा कई बार ऐसा होता है कि आप जब hover करो उन पर तो उनका colour change हो जाए
या line को जिस प्रकार से appear हो तो वो सारी आप CSS के through
कर सकते हो। so I hope की समझ में आ रही है आप लोगों को comment section
में sigma batch ही लिख देना अगर समझ में आ रही है आप लोग को तो फिर बहुत quickly
दो properties के बारे में बताता हूँ। text decoration style जैसे मान लो मैं यहाँ पर
अगर इस element पर add करूँ text decoration style और मैं यहीं
पर add कर देता हूँ ताकि आप लोगों के reference के लिए रहे code आपके पास। text
decoration style और यहां पर अगर मैं चाहता हूं dotted dotted यहां
पर हो तो dotted हो जाएगा कहां गया preview ये रहा तो देखो ये dotted हो गया अगर आपको
नहीं दिख रहा हो तो I hope अभी दिख रहा होगा। तो dotted अगर मैं चाहता हूं तो मेरा
जो underlining है वो dotted हो जाएगी। और भी बहुत सारी values होती है जैसे
कि आप देखो यहां पर dotted है ये double है, ये inherit है inherit
मतलब कि जो अपने parents है उससे inherit करेगा। अगर मैं solid करूंगा तो
ऐसे होगी, wey करूंगा तो देखो ऐसी हो जाएगी ठीक है। तो ये सारी चीजें
अगर आप dash चाहते हो, dotted चाहते हो तो आप कर सकते हो ठीक है आप देखो
dash ऐसा है dotted ऐसा है फिर wa ऐसा है ठीक है। but मैं बताऊंगा अपने
personal experience से इतना web development किया है जिंदगी में शायद ही
कभी आप लोगों को ये wa dotted वाली lines जो है ये काम आने वाली
है but देखो पता होनी चाहिए मैं फिर से कहूँगा पता होनी चाहिए ये सब ऐसी है
कि यार पता नहीं है आप लोगों को तो फिर दिक्कत होगी यार कभी आपने
आपको किसी ने बोल दिया मुझे dash चाहिए dotted चाहिए तो आपको पता होना
चाहिए कि किस तरह से बनाना है। तो ये कुछ properties है जो कि आप लोगों को पता होनी चाहिए
thickness भी होती है। मैं यहां पर आपको thickness भी बता देता हूँ और
होती तो और भी बहुत सारी चीजें है but देखो आपको thickness करना है तो आप text
deco लिखोगे ना तो देखो ये suggest करेगा thickness कभी भी आप लोगों को ये पूरा
type करने का मन नहीं है ना text decoration colour या किसी भी property को type करने
का मन नहीं है तो आप क्या करो t लिखो d लिखो और C लिखो ये आ जाएगा मैं आपको दिखाता
हूं जैसे मुझे ये type करने का मन नहीं है और मैं चाहता हूं कि मुझे
जल्दी से suggest हो जाइये तो मैं लिखूंगा T d और T है आपको
दिखाता हूं मतलब इसका इसका सा इसका सा और इसका सा और
ये मुझे suggest हो जाएगी। text decoration thickness चाहता हूं, देखो ये important है यार
आप लोगों की productivity इससे text decoration D और TH से thickness
देखो आ गया पहले ही और ये दिखा भी रहा है कि
क्यों suggest हो रहा है क्योंकि आपने इसने यहां से ले लिया यहां से ले लिया यहां से ले लिया enter मारोगे सीधा ही आ
जाएगा और फिर इसके बाद आपको simply arrow key use करके यहां पर क्या करना है
या फिर आप इस तरह से colon करोगे तो ये देखो यहां पर आप लोगों को ये दिखा रहा है। अब
क्या चाहते हो आप कितनी thickness चाहते हो तो आप thickness की जो है value को adjust
कर सकते हो ठीक है मान लो मैं इसको करता हूँ। forty five pixels
I hope कि मैंने बहुत ज्यादा नहीं कर दी I guess मैंने बहुत ज्यादा कर दी है तो dotted
ना करके मैं इसको हटा दूंगा यार इसको solid ही रखूंगा, इसको मैं solid
ही रखूंगा। और आप यहां पर देखो कि ये कुछ ज्यादा ही मोटी मैंने कर दी है देखो
इसकी value को मुझे कम करना होगा और देखो मैं इसकी value को कम करूंगा तो ये
कम हो गया i think seven pixel is more than enough यार seven pixel is way
more than enough तो seven pixel इसको करते हैं और ये देखो ये मोटी हो गयी तो कभी
आपको मोटी करनी है क्या मोटी करनी है आप लोगों को अगर
जो आपकी underline है text decoration को मोटा करना है तो आप कुछ इस तरह से कर सकते हैं
तो तो आप लोग text decoration thickness का इस्तेमाल करो मोटा करने के लिए ठीक है
फिर इसके बाद एक text indent property के बारे में भी आप लोगों को बताना चाहूंगा। जो
text indent property होता है जैसे मान लो मैं forty five pixel कर दूँ, text
को तो देखो यहां से एक indent आ जाता है ठीक है तो आप indent add कर सकते हो और मैं
यहां पर आप लोगों को दिखाना चाहूंगा कि जो मेरा h two है इसमें text indent की value
को अगर मैं कम करूंगा arrow किससे कर रहा हूं। तो ये देखो ये कुछ इस तरह से
indent आप कर सकते हो इसको फिर इसके बाद blogs बनाने के लिए बहुत ज्यादा इस्तेमाल
में आने वाली होती है text overflow, text overflow property का मतलब ये
होता है कि आप क्या चाहते हो अगर आपका जो text है वो आपके box से overflow
हो रहा है तब क्या होना चाहिए। जैसे कि मान लो यहां पर ये है मैं कुछ properties को
यहां पर comment out करता हूं जैसे कि मुझे dotted नहीं चाहिए इसको
मैं black कर देता हूं यार aqua नहीं करना चाहूंगा text decoration को या फिर
blue कर देता हूं। क्योंकि black I guess by default होता है। अब मैं
यहां पर मान लो चाहता हूं कि जो मेरा text overflow है इसकी मैं width एक
set कर दूंगा, मान लो मैं इसकी width कर देता हूँ। forty five pixels ठीक
है और forty five pixels जैसे ही मैंने किया तो ये कुछ इस तरह
से हो गया। अब मैं text overflow में ellipsis करूँ या फिर let us say
मैं clip करूँ ठीक है, तो क्या होगा ellipsis और clip में क्या difference है मैं आप
लोगों को बताता हूं। इसकी width को अगर मैं दूँ तो ये कुछ इस तरह से
हो जाएगा। और let's do the same for paragraph I think paragraph में हम
ये ज्यादा अच्छे से समझ सकते हैं। तो यहां पर एक class दूंगा
और class में Lem कर दूंगा और dot Lem करके एक style लगाऊंगा यहां पर
dot lorem ठीक है और same मैं यहां पर आप लोगों को करके
दिखाता हूँ एक तो text overflow एक तो इसकी width मैं दे दूंगा। एक तो सबसे
पहले इसमें border दे दूंगा two pixel solid red और इसके बाद
मैं इसकी width दे दूंगा forty five pixels and let's see कि ये कैसा दिख
रहा है तो ये कुछ इस तरह से दिख रहा है ठीक है। अब यहां पर मैं क्या कहूँगा इस paragraph को
कि यार अगर इसमें text overflow होता है तो ellipsis कर दो। अब यहां
पर एक और important ये है कि आप लोग को overflow hidden करना जो कि ये कहता है
कि अगर box से overflow कर रहा है आपका element तो आप क्या चाहते
हो scroll चाहते हो, hidden चाहते हो तो आप देखो मैंने overflow को hidden कर दिया। ellipsis
से ये हो रहा है और अगर मैं इसको click कर दूँ आपको दिखाता हूँ इसकी value को clip में
change करके तो यहां पर जो है बिल्कुल ही click कर दिया है इसने hide कर दिया है इसको
ठीक है। तो इस तरह की और भी properties होती है, एक और property आपको बताना चाहूंगा
इस तरह की और वो है word break तो मैं एक काम करूँगा इसको one forty five
कर दूंगा इन दोनों को मैं कुछ इस तरह से करूंगा और यहां पर मैं लिखूंगा word
break और word break में अगर मैं break all करूँगा तो आप लोग देखो यहां पर
कि अगर यहां पर मैं break नहीं करूँगा तो क्या हो रहा है तो देखो यहाँ पर dollar
नीचे चला गया अगर मैं break all करूंगा तो क्या होगा कि यहां पर word को break कर देगा ये
d कर दिया इसने और यहां पर कर दिया। तो अगर आप चाहते हो आपके words break हो तो आप
इस property का इस्तेमाल कर सकते हो break break all फिर इसके बाद एक text line
property होती है let us say मैं इसको center करना चाहता हूं। तो मैं यहां पर text line center
डाल दूंगा। text line center और अब देखो ये center हो गया अगर मैं इसको reload
करूंगा तो ये चला जाएगा for sure तो मैं जो H two है इसके अंदर
इसको डालूंगा और मैं कहूंगा text line। center ठीक है, तो यहां
पर ये automatically मुझे suggest कर रहा है और मैं इसको अपना ले रहा हूँ
property को जो कि मेरे लिए बहुत ज्यादा important है अगर मैं
coding कर रहा हूँ तो आप देखो यहां पर font center हो गया ठीक है। I hope कि
ये आप लोगों को समझ में आ गयी तो ये थी सारी text की properties
अब यहां पर text की properties बहुत ज्यादा important है क्योंकि अगर आप लोग चाहते हो अच्छी website
बनाना तो text के बारे में सब कुछ आपको पता होना चाहिए तभी आप लोग अपने text को जो है
control कर पाओगे। तो यार ये थी text की कुछ properties मैं description
में एक link आप लोगों को दूंगा जहाँ पर आप लोगों को additionally सीखने को मिलेगा इन सब
चीजों के बारे में और ये सब जितना मैंने है इस video में उसके बाद
बहुत ज्यादा intuitive होंगी आप लोगों के लिए। तो मैं क्या करूंगा कि अब colors
की तरफ move करूंगा और आप लोगों को बताऊंगा colors किस तरह से काम करते
हैं। तो let's do one thing यार एक colors dot HTML के नाम से एक
और HTML file बनाते हैं। क्योंकि यार वहां पर हमने बहुत ज्यादा
कहूंगा रायता फैला दिया है ठीक है font समझते वक्त क्योंकि obviously
this is not a good website just आप लोगों को concept सिखाने के लिए मैंने ये बनाई है and
हम बनाएंगे यार अच्छी website भी बनाएंगे रुक जाओ ठीक है तो आ जाओ
यार अब colors की बात करते हैं तो यहां पर मैं इसकी heading डालूंगा colours
और यार इसकी भी heading डाल देता हूं fonts मुझे पता है ये अच्छा तो नहीं लग रहा है तो बहुत
खूबसूरती तो दे सकता हूं इसको title डाल कर। अब इसके बाद मैं यहां पर डालूंगा
style oops मैं style क्या इसको capital पता नहीं क्यों कर देता हूं और मैं यहां पर
क्या करूंगा लिखूंगा h one let's learn learn about cols अब मान
लो मुझे H one का colour change करना है। ठीक है। तो मैं कहूंगा H one मैंने यहां पर
element selector का इस्तेमाल किया format document कर लेता हूं। element selector का
इस्तेमाल करके मैं colour red कर दूंगा ठीक है C L O R और
red and obviously you guess it right। यहां पर जो। colour है
मैं colour HTML को preview करना चाहता हूं। हाँ हो गया। let's
run about cols जो है यहां पर आप लोगों को दिख रहा है कि ये red colour से आ
गया no surprise is there। अब क्या मैं इसको orange कर सकता हूं, हाँ
कर सकता हूं orange और आप यहां पर देखो इसका colour orange हो गया। ऐसे
कौन कौन से colour keywords है जिसका इस्तेमाल किया जा सकता है। अब देखो ये colour keywords
होते हैं। हो सकता है कि जो colour आपके दिमाग में हो वो colour keyword
हो ही ना CSS में ऐसा भी होता है। और मैं फंसा हूँ मैं personally बता रहा हूँ
इतना फसा हूँ ना इन चीजों में कि यार मेरे दिमाग में कोई colour चल रहा है ठीक है जैसे
कि light blue चल रहा है मैंने light blue लिख दिया यहां पर तो मैं आप लोगों को ये दिखाता हूं कि
कैसे पता चलेगा अब देखो यहां पर मैं अगर लिखता हूँ dark
yellow मैंने यहां पर dark yellow लिखा है और आप देखो ये नहीं आ रहा है मुझे कैसे
पता चलेगा dark yellow है ही नहीं क्योंकि आप लोगों को अगर मैं दिखाऊं यहां पर तो dark
red होता है क्या? हाँ dark red होता है क्या dark grey
होता है dark grey भी होता है। dark green भी होता है तो dark yellow क्यों नहीं होता है भाई ये
क्या ना इंसाफी है तो क्या होता है कि CSS के अंदर कुछ colour keywords होते
हैं और मैं यहां पर क्या करूँगा ये code pen आप लोगों को दिखाता हूँ, वो
code pen आपको retten ही नहीं है मतलब ये तो बहुत ही ज्यादा
कहूँगा common sense वाली बात है कि आपको retten ही नहीं है but
यहाँ पर आप देख सकते हो कि all is blue, antique white, aqua
aquamarine azure, blue और ये सारे colors जो है जो जो color
होते हैं CSS में उसकी comprehensive list है। तो एक काम करते हैं
आप लोगों को आप लोगों को देखने के लिए मैं यहां पर डाल रहा हूँ। ऐसा
नहीं है कि आपको रटना है इसको ये मत सोचना है कि अब याद करने बैठ जाऊँ इसको नहीं
मुझे पता है आप समझदार हो और आप ऐसा करोगे भी नहीं। तो ये होते हैं हमारे पास color keywords
तो एक तो सबसे ज्यादा आसान हो गया है हमारे लिए, मैं इसका
एक अच्छा colour डाल देता हूँ dark rate एक तो सबसे easy तरीका है यहां
पर इसको भी बंद करता हूं, इसको भी बंद करता हूं, इसको भी बंद करता हूं इसको भी। यहां
पर colour keyword का इस्तेमाल करना लेकिन कभी कभी क्या होता है देखो colours तो
millions of colors होते हैं ठीक है अगर आपको एक particular colour आपको
किसी ने देना है मान लो उसने आपको hex color code दे दिया अब hex color
code क्या होता है? hex color code code को represent करने का एक तरीका होता है
अब मैं आप लोगों को तीन तरीके बताता हूँ जो कि बहुत ज्यादा commonly used होते हैं colour
को दिखाने के लिए ठीक है तो मैं एक काम करता हूं मैं यहां पर एक infact
paragraph लिखता हूँ मैं लिखूंगा col can be represented in और यहां
पर सबसे पहले मैं ordered list बनाऊंगा एक OL OL के अंदर एक
list item डालूंगा और मैं यहाँ पर लिखूंगा color codes ठीक है
sorry color keywords और यहां पर hex color codes एक list item
मेरा है hex color code और फिर इसके बाद एक और LI
मैं यहाँ पर डालूंगा RGB फिर एक और LI डालूंगा RB और
फिर एक और LI डालूंगा वो है HSL saturation और lightness ठीक
है। तो यहाँ पर आप देखो कि सबसे पहला तरीका क्या है तो colour keywords
के through अगर मुझे करना है तो आपको मैंने दिखा दिया कैसे करते हैं। अब मैं आपको दिखाता हूँ
कि किस तरह से आप लोग इसी colour को। use कर सकते हो एक hex
colour देके अगर मैं यहां पर colour लिखूं मैं यहां पर hashtag लिखूं और
मैं FFAB infact मैं random colour नहीं चुनूंगा मैं जाऊंगा hex colour
code ठीक है और यहां पर देखो बहुत सारे colours के hex colour code आ गए
आपको किसी भी colour का एक hex colour code दिया जा सकता है और
एक hex colour code को generate करने का तरीका है देखो यहां पर ये दिखाया जा रहा है। और
अगर आप मान लो आपको ये वाला colour लेना है मान लो मुझे colour पसंद आ गया wow कितना अच्छा colour है मान
लो मेरे दिमाग में ये बैठी हुई है तो मैं क्या करूंगा। copy कर लूंगा इस hex
colour code को ठीक है और exactly यही colour मुझे generate करके दे देगा तो hash
के बाद मैं ये लिख दूंगा और आप यहां पर देखो ये green colour यहां पर आ गया। तो
hex colour एक तरीका है colour को represent करने का जो कि hex
values का इस्तेमाल करता है। ठीक है। अब एक particular hex colour
का RGB equivalent भी होगा, अगर वो एक बहुत common colour है जैसे red
तो उसका colour keyword equivalent भी होगा तो किसी भी colour को अगर
आपको use करना है तो आपको उसका code दिया जाएगा। अब वो code आपको RGB
में दिया जा सकता है। वो code आपको एक colour code keyword के through
दिया जा सकता है जैसे red, blue या फिर आप लोगों को दिया जा सकता है वो RGB
RGB या HSL में तो ये तो hex color code हो गया है। अब
मैं बताऊंगा RGB किस तरह से use होता है, अगर आप लोगों को RGB इस्तेमाल
करना है तो आप लिखोगे colour और RGB और यहां पर red
की value zero से लेकर दो सौ पचपन तक जैसे मान लो मैं twenty three लिख
दूँ green की value zero से दो सौ पचपन तक और यहां पर blue
की value zero से दो सौ पचपन तक और देखो ये वाला colour बना। अब आप इस पर hover करोगे
ना अगर। तो आप लोग को एक ये दिखेगा और आप इसके through कोई भी
colour generate कर सकते हो। देखो ये RGB की values भी change हो रही है नीचे तो कोई भी colour
आप लोगों को generate करना है तो आप कर सकते हो। तो ये RGB
values से यानी कि अगर red इतना हो green इतना हो blue इतना
हो तो ये colour बनता है ठीक है अगर आपको white बनाना है तो दो सौ पचपन
दो सौ पचपन, दो सौ पचपन सारे colors डाल दो white बन जाएगा। black बनाना है तो कुछ डालो
ही मत अँधेरा zero zero zero ठीक है और बीच की values से अलग अलग colour
बनते हैं ठीक है तो RGB से एक particular colour बन जाता है। use
कर सकते हो आप ठीक है। ये एक तरीका है colors को represent करने का एक
और तरीका color को represent करने का है RGB और RGB में
same होता है RGB RGB में RGB की तरह same होता है
बस एक बदलती है वो है alpha और ये alpha value क्या होती है ये zero
से one तक vary करती है। अगर मैंने इसको zero point five कर दिया
आप लोगों को दिखाता हूँ मैं मैं इसको ऐसे करूँ तो मैं इसको देखो ऐसे
करके zero से लेके one तक इसको कर सकता हूं। अब देखो ये change हो रही है value इसकी ठीक है
और by default ये one होती है अगर मैंने one कर दी तो लिखने की जरूरत नहीं है but
आप देखो alpha को अगर मैंने इतना कर दिया ठीक है तो क्या होगा alpha क्या होती है
basically इसकी opacity opacity को कम कर दूंगा, बिल्कुल कम कर दिया तो
ये colour कुछ इस प्रकार से दिखेगा देखो बिल्कुल light हो गया एकदम light हो गया
ठीक है। इसके बाद आपका एक HSL equivalent होता है एक colour का
और मैं आपको मुझे बताना हुआ कि सबसे ज्यादा use कौन-सा होता है
देखो यार सबसे ज्यादा तो ये colour keywords इस्तेमाल होते हैं। उसके बाद जो होता है
hex colour सबसे ज्यादा इस्तेमाल होते हैं क्योंकि वो लोग जो designs बनाते हैं वो
लोग अपने designs में ज्यादातर hex color codes का इस्तेमाल करते हैं
और जब वो लोग hex color codes का इस्तेमाल करते हैं तो हम जैसे developers को exact
colour को अपने design में HTML CSS के through लाने के लिए
उनके hex color codes का इस्तेमाल करना है। ठीक है। तो यहां
पर हम लोग जो है जो value हमें मिली है बस हमें वो use कर लेनी है। अगर हमको
बोला है भाई RGB colour है हाँ ठीक है भाई दे दो values क्या है लगा देंगे
हम। अगर आपके boss ने आपको बोला भाई RGB values के through red colour use करना
हाँ भाई ठीक है ये वाला करेंगे exact वही colour बनेगा आप जहां भी बना लो। अगर
किसी developer ने android app में एक particular colour use किया है उसी developer
ने अपनी website में वही colour अगर use करना है तो exact colour
code लिया है यहां तो। hex color code या फिर वो RGB का ये लिया है values
या फिर वो RGB की values लिया है। कभी कभी HSL भी इस्तेमाल होता है
मैं आपको बता दूँ कम इस्तेमाल होता है मैं personally अपनी websites में HSL इस्तेमाल
नहीं करता हूँ ठीक है but HSL जो है वो use में आता है। अब आप
लोगों को बताना चाहूंगा HSL में h होता है hue जो की type of colour को represent
करता है। S का मतलब होता है कि कितनी intensity है purity
है और जो L होता है वो lightness को determine करता है अब आप देखो HSL
colour कुछ इस तरह से बनाया जा सकता है तो मैं यहां से copy करूँगा colour को और आप लोग
को यहां पर लगा कर दिखाऊंगा। personally I am not a big fan of HSL to be honest but
कभी कभी मुझे दिए जाते हैं colours तो भाई लगाने हैं। तो इस HSL से ये वाला
colour बना ठीक है और आप obviously यहाँ पर hover करके अगर इसको
change करोगे तो ये HSL में ही change करेगा इसको देखो अगर मुझे change करना है
यहां पर देखो ये alpha भी आप इसमें दे सकते हो तो HS भी होता है एक। लेकिन
again यार इतना ज्यादा use नहीं होता है but you should know कि HS भी होता है आप इसमें
alpha value भी दे सकते हो कुछ इस तरह से ठीक है पर मैं HS
भी add कर सकता हूँ but again यार हम alpha को hundred ही रखेंगे और
HSL ही इस्तेमाल करेंगे अभी के लिए क्योंकि अगर आप अपनी website बना
रहे हो तो you have full creative control over कौन-सा colour आप use कर
रहे हो ठीक है। so this was about colour, background में अगर
colour add करना है तो हम same use करते हैं background colour में and exactly
जिस तरह से colour मैंने दिया उस तरह से आप लोग दे सकते हो for example अगर आप लोग को
background colour में ये देना है तो आप RGB की value दे सकते हो HSL की दे सकते हो RGB
दे सकते हो आप color keywords दे सकते हो आप hex code दे सकते हो, sky
is the limit आपकी मर्जी ठीक है यहां पर your choice ठीक
है आप बोलोगे it's my choice। मैं जो भी colour use करूँ अगर आप
अपनी website बना रहे हो obviously तो अगर आप किसी और की बना रहे हो तो वो बोलेगा वो बोलेगा
it's my choice तुम developer हो चुपचाप बनाओ website ठीक है जैसे मैं बोल रहा हूँ
वैसे colour use करो। अब border colour और आपका text decoration का
colour जो जो colour जहाँ भी पूरी CSS में होता है ठीक है
border का colour होता है फिर उसके बाद और भी बहुत सारे colors होते हैं
जहाँ जहाँ हम cols को वहां वहां हम इस तरह की values का इस्तेमाल
कर सकते हैं। तो that was about colours in CSS और बहुत सारी चीजें होती हैं
जैसे की HSL को किस तरह से read करना है exactly ये values को
tweak करके एक particular colour कैसे बनाना है तो यार वो बहुत ही ज्यादा
design lessons की तरफ चली जाएँगी आप लोग को यहाँ पर जो
आपका उद्देश्य होना चाहिए होना चाहिए मैं website अच्छी कैसे बनाऊँ। तो I hope की इस video
में font of colors मैंने आप लोगों को अच्छी तरह से समझा दिया। क्योंकि बहुत सारे लोग
कह रहे थे की videos छोटे हो रहे हैं तो सोचा एक long video भी आप लोगों को दिया जाए ठीक है
तो मैंने fts and colors आज के video में एक बार आपको बताने की कोशिश करी
है। मुझे नीचे comment section में बताना है कि मजा आ रहा है कि नहीं इस course में और। आप
लोग playlist को bookmark नहीं कर रहे हो और video को like नहीं कर रहे हो आप लोग जो कि गलत
बात है। मेरे हिसाब से आप लोग इस playlist को access करो यहाँ click करके bookmark करो
इसको अभी के अभी यहाँ click करके save करो। इस video को like करो
share करो अपने दोस्तों के साथ और अपने गाँव और ताऊ दोनों की जमीन
मेरे नाम करके मुझसे अगले video में मिलने की तैयारी करो। Thank you so much guys
for watching this video and I will see you next time।