Types of CSS, Hindi-English Tutorial



There are three types of CSS: CSS तीन प्रकार की होती है:

  • Ø Inline CSS
  • Ø Internal CSS
  • Ø External CSS

Types of CSS

Inline CSS:- It is placed inside the tag as if our tag is (<H1>), then we will put CSS in it as follows: इसको Tag के अन्दर लगाया जाता है जैसे हमारी Tag है (<H1>) तो हम इसमे CSS इस प्रकार लगाएंगे:-

Example 1

<H1 Style=”Color: Red;”> Computer Gyan Guruji </H1>

There are:

Style    -    Attribute

Color    -    Property

Red        -    Value

Output – Computer Gyan Guruji

 Example 2

<H1 Style=”Color: Yellow; Background-Color: Blue;”> Computer Gyan Guruji </H1>

Output - Computer Gyan Guruji

Similarly, in Inline CSS, we have to install CSS repeatedly in all the tags that we have, which becomes very long work. इसी प्रकार Inline CSS मे हमारे पास जितनी भी Tags होती हैं उनमे सभी मे हमको बार बार CSS लगाना पड़ेगा जोकि काफी लंबा काम हो जाता हैं।

2.     Internal CSS:- Contrary to what we said in the Inline CSS, if you have used the same tag repeatedly like <H1> you have used it 4 or 5 times, then the CSS has to be applied in all those Heading Tags. Whereas in Internal CSS, you can only apply CSS style for all Heading Tags, for this, Style Tag has to be inserted inside the head like जैसा की हमने Inline CSS मे बताया इसके विपरीत यदि आपने एक ही ताग को बार बार यूज कर रखा है जैसे <H1> को आपने 4 या 5 बार इस्तेमाल किया है तो उतनी ही बार CSS उन सभी Heading Tags मे लगाना पड़ेगा। जबकि Internal CSS मे आप सभी Heading Tags के लिए एक बार ही CSS style लगा सकते हैं इसके लिए Style Tag को Head के अन्दर लगाना होता है जैसे:

Example 1

<HTML>

<HEAD>

<TITLE>Style Tag</TITLE>

                <Style type=”text/css”>

       H1 {Color: White; Background: Red;

}

</Style>

</HEAD>

<BODY>

                <H1>

                                Computer Gyan Guruji

                </H1>

                <H1>

                                Computer Gyan Guruji

                </H1>

</BODY></HTML>

 Output -               Computer Gyan Guruji

                              Computer Gyan Guruji

(* Two Attributes of Style Tag “Type”, “Media”)

3.     External CSS:- If we have more than one page, then our work will increase greatly, for that we use External CSS. External CSS requires a separate CSS file to be created. We will create a style sheet by writing CSS tags to any name like (Filename.css) and we will put a link to this file in our HTML file. We can use this style sheet as much as we can on the page and on the website यदि हमारे पास एक से ज्यादा पेज हो तो हमारा काम काफी बढ़ जायेगा तो उसके लिए हम External CSS का Use करते हैं. External CSS के लिए अलग से एक CSS की फाइल बनानी पड़ती है. हम CSS Tags लिख कर एक स्टाइल शीट तैयार करेंगे किसी भी नाम से जैसे (Filename.css) और इस फाइल का लिंक हम अपनी HTML फाइल में डालेंगे।  इस स्टाइल शीट को हम जितनी मर्जी पेज में और वेबसाइट पर Use कर सकते हैं

Example 1

H1{

                Color: white;

                Background: Red;

}

            We will save this property under any name as we save Style.css इस प्रॉपर्टी को किसी भी नाम से सेव कर लेंगे जैसे हम सेव करते है Style.css

           After this, we will link this property in our HTML file. इसके बाद इस प्रॉपर्टी को अपनी HTML File में लिंक करेंगे

Example 2

                <HTML>

<HEAD>

<TITLE>Style Tag</TITLE>

                <Link rel=”stylesheet type=”text/css href=”style.css”>

</HEAD>

<BODY>

                <H1>

                                Computer Gyan Guruji

                </H1>

                <H1>

                                Computer Gyan Guruji

                </H1>

</BODY></HTML>

(Introduction to CSS) Click Here

कोई टिप्पणी नहीं

टिप्पणी: केवल इस ब्लॉग का सदस्य टिप्पणी भेज सकता है.

"Master REGEX in Excel | Boost Your Productivity with These Powerful Tips!"

 "Master REGEX in Excel | Boost Your Productivity with These Powerful Tips!" Regex (Regular expressions), is a tool that finds pat...

Blogger द्वारा संचालित.