Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!
How to hide & show drive by Innoza IT Center
How to hide & show drive? | Innoza
August 12, 2017
विज्ञान के प्रमुख वैज्ञानिक और उनके आविष्कार by Innoza
विज्ञान के प्रमुख वैज्ञानिक और उनके आविष्कार | Rajasthan GK
August 24, 2017

Learning to Use CSS Attribute Sectors in Hindi

Learning to Use CSS Attribute Sectors in Hindi by Innoza IT Center

ये एक  designing language है।  इसका इस्तेमाल  वेबपेज को और भी आकर्षित बनाने के लिये होता है।

CSS के माध्यम से आप html tags पर design को apply कर सकते है।  CSS design को आप तीन तरह से apply कर सकते है।

 

  • inline : इसमे आप CSS को html tags में style attribute से ही insert कर सकते है ।
  • internal : स्क्रिप्ट tag से आप html file के <head> tag में insert करते है।
  • external :इसमे हम दो अलग-अलग file html और css file को <link> attribute से add करवाते है।

 

वेबपेज की पूरी डिजाईन को css control देती है।  css के माध्यम से आप text colour, font-family,  background आदि को set कर सकते है।   ये एक तरह से पूरे वेब पेज पर display को control करता है।

 

 Importance of CSS : 

 

  • वेबपेज में css का उपयोग करने से टाइम की बचत होती है।
  • एक css file को बनाकर आप उसे html document पर apply करवा सकते है।
  • आप हर html tag के लिए style को फिक्स कर सकते हो। और इसे जितने चाहे उतने वेब पेज पर apply कर सकते हो।
  • html attribute के माध्यम से आप वेब पेज को design करते हो। तब आपको attribute और उसकी value को सभी एलिमेंट पर अलग-अलग define करना होता है। और इस purpose में कोड की संख्या बहुत अधिक हो जाती है।  और वेब पेज को ओपन होने में समय लगता है।  css के use से वेब्पगे पर जितने भी tag के लिए style attribute एक बार ही देना होता है।  तो आपके कोड कम होने पर पेज भी तेजी से ओपन होता है।
  • webpage को maintain करना css के माध्यम से आसन होता है।
  • html के comparison में आप css से अधिक अच्छा वेबपेज design कर सकते है।
  • css का उपयोग अब ज्यादा हो गया है।

How to apply CSS

Inline CSS

<body style = “background-colour:blue;”>

<p> this is inline css demo </p>

Internal style sheet : internal style शीट में आप style को html के अंदर नहीं करते हो।  Head  section में <scritp> tag define किया जाता है।  इसके बाद selectors को उसे करते हुऐ आप style को define करते है।  इसमे html कोड और css कोड को एक ही document में डिफाइन किया जाता है।

<html>

<head>

<style>

body

{background-colour : blue;}

<style>

<body>

<p> this is internal css demo </p>

</body>

</html>

External style sheet : external style sheet के कंसेप्ट में css किसी दूसरी file में होती है।  उस file को <link> tag के माध्यम से html file पर apply कर सकते है।  external style sheet में आपको बार-बार css लिखने की जरुरत नहीं होती है।  आप एक ही css file को कई html फाइल्स पर apply कर सकते है। इसका उदाहारण नीचे दिए जा रहे है।

<html>

<head>

<link rel = “stylesheet” type =”text/css” href= “your file.css”>

<body>

<h1> external style sheet demo </h1>

</body>

</html>

 

CSS Selectors : – css में सिंटेक्स का importance रोल होता है।  आप किस एलिमेंट के उपर कोनसी style apply करना चाहते है।  ये आप selectors के माध्यम से define कर सकते है।  ये css के selectors ही है। जों इसे इतनी पावरफुल और इफेक्टिव language बनता है।  css के selectors आपको html के किसी भी एलिमेंट को select करके उसकी presentation को change करने की ability provide करते है। इससे पहले की में आपको selectors के बारे में और ज्यादा जानकारी दे सकु।  उससे पहले css के सिंटेक्स को समझ लेते है।

h1 selector

{ color : blue }

<h1> hello world </h1>

उपर दिए गये उदाहरण में h1 एक selector है, ये selector html के h1 tag पर apply हो रहा है। इस तरह के selectors को एलिमेंट्स type selectors कहा जाता है।  यहाँ पर html tag को ही selectors की तरह use किया गया है।

selector के बाद curly ब्रैकेट ({}) में color property और उसकी value को define किया गया है ये property heading के text को blue color  में change कर देती है।

Type of selectors :-  css ने कई तरह के selectors provide भी किये गये है, और आप css के selectors को use करके और भी accurate काम  कर सकते है। और इन selectors के बारे में डिटेल में नीचे दिया जा रहा है।

Element type selectors : –  इस तरह के selectors किसी एक html tag पर ही apply होते है।  इन selectors का नाम उसी html tag का नाम होता है। जब आपको किसी एक particular html tag पर कोई style apply करने की आवश्यकता हो तो आप इस तरह के selectors को use कर सकते है।

<html>

<head>

<title> element selectors </title>

</head>

<body>

<p> css language is very powerful and effective </p>

</body>

</html>

CSS के माध्यम से

p { color :red; }

 

Universal selectors :-  universal  selectors को * से represent किया जाता है। इस selectors में define की गयी style सभी html elements पर apply हो जाता है। लेकिन याद रहे ये तभी काम करता है। जब उस एलिमेंट के लिए style अलग से define की गयी हो, यदि उस element के लिए अलग से style define की गयी है।  या फिर वह element style sheet use करता है। तो इस selectors का कोई effect उस element पर नहीं होगा, इसका उदारण नीचे दिया गया है।

Sub Element selectors : यदि आप किसी element पर तब उस वक्त css को apply करना चाहते है, जब वह किसी दुसरे element के अंदर आये तो इसके लिए आप sub-element selector use कर सकते है।  सबसे पहले आप element का नाम देते है।  इसके बाद आप स्पेस को देकर उस element का नाम देते है।  इसके बाद space देकर उस element का नाम लिखते है।  जिस पर आप style apply करना चाहाते है, इसके उदाहरण नीचे दिए जा रहा है।

 

<html>

<head>

<title> sub element selector </title>

</head>

<body>

<p>this is <spam> A </spam>  paragraph

</p>

</body>

 

In css

P spam

{ color : green; }

Class selectors :

हर html element एक  class attribute define कर रहे है। इसमे class का नाम दिया जाता है।  आप चाहे तो style class attribute के base पर भी css को apply करा सकते है।  इसके लिए आप (.) operator लगाकर class का नाम selector की तरह लिखते है जों element उस class से belong करते है, उन सभी पर define की गयी है।

ID selectors :  class attribute की तरह ही आप स्टाइल्स को किसी particular ईद  के लिए भी define कर सकते हो।  इस ID से मैच करती है।   और दी गई style उन्ही पर apply हो जाती है।  किसी भी ID पर style apply करने के लिए आप # का उपयोग करते है।

Attribute selectors : html tag के जैसे ही आप चाहे तो किसी html tag के attribute पर भी style apply कर सकते हो। इन selectors का उपयोग फॉर्म tag के sub-elements के लिया किया गया है। आप इम्पोर्ट टाइप के according दुसरे attribute को छोडते हुए किसी एक attribute को टारगेट कर सकते है।

Group selectors :

आप चाहे तो एक साथ एक से ज्यादा selectors भी use कर सकते है। इसके लिए आप सभी selectors को common से separate करते है। curly ({) bracket में define की गयी है।  style सभी selectors पर apply होती है।

“A debt of gratitude is in order For To Read This Blog..!”

Related:  Study Tips For All Exams, How To Use HTMLStudy Tips For All Competition ExamsDownload all materials PDF notes in HindiHow To Use HTML in Hindi

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *