Hello Friend`s इस Post में हम सीखेंगे कि CSS क्या है तथा  इसे कैसे सीखे और इससे Web Design कैसे करें. पिछले Post में हमनें HTML के बारें में विस्तार से जाना था, आपने अगर अभी तक वह Post को नहीं पढ़े है तो सबसे पहले आप उसे पढ़ें तभी आप CSS को अच्छी तरीके से समझ सकेंगे, क्योंकि HTML Language के साथ ही इसके साथ CSS से Coding किया जाता है.

यह भी पढ़ें:-

HTML सीखें सिर्फ 5 मिनट में पूरी जानकारी (How to Learn HTML Language in Hindi)


Introduction Of CSS ( Cascading Style Sheet )


यह एक Designing Language है जिसका प्रयोग Web को बहुत ही आकर्षक और सुन्दर तरीके से Design करने के लिएँ बनाया जाता है. CSS को हमेशा HTML Language के साथ ही Coding किया जाता है. CSS को Hakon Wium Lie ने 10 अक्टूबर 1994 को Develop किएँ थें.

CSS कैसे काम करती है.

जैसे कि ऊपर में बताया गया है कि इसे हमेशा CSS के साथ सी Coding किया जाता है. इसे HTML Section के अन्दर Style बना के Coding किया जाता है तथा इसे हम बना के  CSS का एक File भी बना सकते है जिससे कि हमें किसी और Web Page को Designing करने में फिर से पूरी Coding तैयार करना नहीं पड़ें. नीचे एक छोटी - सी CSS कि Coding करके बताया गया है.

CSS का प्रयोग Web Colorful, Margin Set, Border, Web को Comfortable करना आदि कामों में किया जाता है.

CSS से हमें Coding करने से क्या फायदा होता है:- 

1. CSS का Use करके किसी भी Website को Mobile Configure अर्थात Website को Mobile Friendly बनाया जाता है जिससे कि किसी भी Mobile में किसी भी Website को Open किया जाता है.
2. CSS का Use करने से हमें समय की काफी बचत होती है, क्योंकि CSS File को बनाने के बाद हम उसे किसी और भी Website में Apply कर सकते है जिससे कि हमें फिर से पूरी Coding करना नहीं पड़ें.
3. किसी भी Website में अधिक Coding हो जाने से वो Website धीरे-धीरे Page Load करती है, अगर हम इसमें CSS का इस्तेमाल करें तो Website में Code कि संख्या कम हो जाती है और Website Page Fast Load होने लगते है.
4. Web Page में CSS से Color Design किया जाएँ तो यह सभी Heading में Apply हो जाता है.
5. CSS में सभी तरह का Coding Style में किया जाता है. इससे Web दिखने में अधिक आकर्षक होता है.

अब तक हमनें सिखा CSS के बारें में विस्तार से सिख लिया है अब हम CSS की मदद से Colorful Style करना सीखेंगे 

  Inline Style Sheet

नीचे बहुत सारा CSS का Style Font Colorful Define किया गया है जो जो body tag के अन्दर किया गया है. उसके बाद Style Attribute में Property और Value Define किया गया है जिसे Inline Style Sheet कहते है.

1. HTML और CSS की मदद से ऐसा First Step का Code तैयार करके नीचे बताया गया है.


ऐसा Coding करने पर यह Display में इस तरह से दिखाई पड़ता है जैसा नीचे बताया गया है

यहाँ पर  Background Color का Coding body tag के अन्दर होता है. नीचे इसका और उदाहरण देखें.

2.

यह Display में Coding करने के बाद ऐसा दिखाई पड़ता है.

3.

यह Display में Coding करने के बाद ऐसा दिखाई पड़ता है.

4. 

यह Display में Coding करने के बाद ऐसा दिखाई पड़ता है.

तो इस तरह से हमनें HTML और CSS  कि मदद से कई Coding का Background Color Change करके देखा. अब हम इसी में Text का Color Change करके देखेंगे .

1. First Step Of Change Text Color With HTML And CSS Language 

यहाँ पर ध्यान से देखें तो Universal Selector को * से Define किया गया है. लेकिन यह तभी काम करेगा जब किसी Elements का Style अलग से Define नहीं किया गया हो  ऊपर का उदाहरण में देख सकते है इसमें अलग से Elements Style किया गया है. जब इसे Display में देखते है तो इस तरह का दिखाई पड़ता जैसे कि नीचे बताया गया है.
2. अब हम बिना अलग किए Elements को एक साथ देखेंगे 
यह Display में इस तरह से दिखाई पड़ती है.


3. अगर हम किसी Text में किसी भी Text का Color और Text को छोटा बड़ा करना चाहते है तो जैसे नीचे Coding कर के बताया गया है ठीक आप भी ऐसा ही करें.
यह Display में Coding करने के बाद ऐसा दिखाई पड़ता है.

तो हमनें ये तो जान लिया कि CSS से Web Coding कैसे किया जाता है. आपको मै बता दूँ कि आप जब तक HTML को अच्छी तरीके से नहीं सिख लेते है तब तक आपको HTML को CSS के साथ कैसे Design करते है तब तक आपको कुछ समझ नहीं आएगा. एक बात मैं और कहना चाहूँगा कि Coding कर लेना ही Important नहीं होता है उसके साथ-साथ Imagination भी होना बहुत ही जरुरी है ताकि Web को कैसे Attractive किया जाएँ.
आपको यह जानकारी अच्छी लगी तो इसे Social Media पर अवश्य शेयर करें.




Thanks to Reading This Post

Author: Rohit Kumar

Rohit is An Indian Blogger And Web Designer. It Helps People By Sharing Very Important Content Everyday On This Website. Please Help to Make This Website Popular. Read More


Let's Get Connected: Twitter | Facebook | WhatsApp | Instagram |

Post a Comment

If there is any kind of question in this post, then tell it through the comment, we will be happy to answer all your questions.

Previous Post Next Post