Formatting XML with CSS (Cascading Style Sheets)

Introduction to Formatting XML with CSS

CSS (Cascading Style Sheets) के द्वारा आप XML को और भी ज्यादा human readable form में represent कर सकते है। CSS content को touch किये बिना उसके presentation को चेंज कर देती है।

CSS file को आप XML document के साथ attach कर सकते है। इसके बाद आप दोनों को browser में process कर सकते है। CSS के साथ आप XML document के content को बहुत ही आकर्षक तरीके से present कर सकते है।

कोई भी CSS file selectors और declarations से मिलकर बनी होती है। CSS file का हर selector XML document के element से match करता है। हर selector में फिर curly braces के अंदर declarations दिए जाते है। ये property/value pair में होते है। XML का content कैसे format होगा ये declarations define करते है।

किसी भी CSS file को XML document में include करने के लिए आप निचे दिया गया statement यूज़ करते है।

<?xml-stylesheet type="text/css" href="filename.css"?>

ये statement processor को बताता है की इस XML document को define की गई CSS file के साथ represent करना है।

आइये XML के साथ CSS के इस्तेमाल को एक उदाहरण द्वारा समझने का प्रयास करते है।

XML document:

<?xml version="1.0">
<?xml-stylesheet type="text/css" href="person.css">
<person>
<name>Ram</name>
<age>24</age>
</person>

यँहा पर एक XML document show किया गया है। इसमें आप देखेंगे की ऊपर define किये गए statement के द्वारा person.css file को access किया गया है। इस file को निचे दिया जा रहा है।

CSS file:

person {font-size:12pt;}
name {color:blue;}
age {color:red;}

जैसा की मैने आपको पहले बताया selectors XML document के element से match होते है। यँहा पर सभी selectors XML document के elements से मैच कर रहे है। जिस selector में जो declarations define की गई है वो उसी element पर apply होती है। यदि एक ही property parent और child दोनों में define की गई है तो child property parent property को override कर लेती है।

जैसा की आप CSS file में देख सकते है property और value को colon से separate किया गया है। और इस complete property/value pair को semicolon से separate किया जाता है। Semicolons से separate करके आप और pairs define कर सकते है।

Different CSS Formatting Properties

CSS आपको बहुत सी properties provide करती है जिनकी मदद से आप अपने XML document को अपने according represent कर सकते है। इनमे से कुछ properties के बारे में निचे दिया जा रहा है।

Display

किसी element को show करना है या नहीं और show करना है तो कैसे करना है ये सब display property के द्वारा define किया जाता है। Display attribute की सबसे important values निचे दी जा रही है।

Property : ValuesDescription
display : inline Inline default value होती है। इसका मतलब होता है की content के बाद line break नहीं आएगा।   
display : none  None value का मतलब होता है की content show नहीं होगा।   
display : block  Block value का मतलब होता है की content से पहले और बाद में line breaks include होंगे।   
display : list-item list-item value block की तरह ही होती है बस इसमें content में भी line breaks include होते है।

Margin

Text के आसपास खाली space को define करने के लिए margin property यूज़ की जाती है। इस attribute की values को percentage में भी दिया जा सकता है या फिर pixels में भी आप define कर सकते है। आप चाहे तो पुरे text का margin एक बार में define कर सकते है या फिर हर side का independently भी define किया जा सकता है। इनके बारे में निचे दिया जा रहा है।

Property : Values   Description 
margin : 5px;  ये simple margin property होती है। इसे define करने से सभी sides का margin एक बार में define हो जाता है।    
margin-left : 5px; इस property से आप left side का margin define कर सकते है।   
margin-right : 5px; ये property right side का margin define करने के लिए यूज़ की जाती है।  
margin-top:5px; Top side का margin define करने के लिए आप इस property को यूज़ कर सकते है।   
margin-bottom:5px; इस property से आप bottom side का margin set कर सकते है।

Text align

Text को different तरह से position करने के लिए text align property यूज़ की जाती है। इस property की common values निचे दी जा रही है।

Property : Values Description
text-algin : right; Right value से आप text की position right में set करते है।   
text-algin : left; इस value से text की position left में set की जाती है।   
text-align : center; Center value से text की position को center में set किया जाता है।   
text-align : justify; ये value set करने से text automatically content और space के according position हो जाता है।

Font family

इस property के द्वारा किसी भी element के content की font family define की जाती है। इस property की value कोई भी font family का नाम होता हैं। यदि font family का नाम एक word से ज्यादा है तो आप उसे single quotes में लिखते है।

font-family : verdana;
font-family:'Times New Roman';

Font size

Font family की तरह ही आप font की size भी define कर सकते है। इसके लिए आप font -size property यूज़ करते है। इस property की common values निचे दी जा रही है।

Property : ValuesDescription
font-size:small;ये font size छोटी और normal होती है। 
font-size:x-smallये font size small size से भी छोटी होती है।  
font-size:large;ये font size बड़ी होती है।  
font-size:xx-large;ये font size सबसे बड़ी होती है।  
font-size:5pt;आप चाहे तो खुद की font size भी define कर सकते है।

Font weight

Font को bold करने के लिए आप font-weight property यूज़ करते है। इस property की value bold define करने से element का content bold हो जाता है। इसका उदाहरण निचे दिया जा रहा है।

font-weight : bold;

Font style

Element के content को italic show करने के लिए font-style property यूज़ की जाती है। इस property की value italic pass की जाती है। इसका उदाहरण निचे दिया जा रहा है।

font-style : italic;

Displaying XML with CSS

  1. सबसे पहले XML और CSS की 2 separate file create कर लीजिए।
  2. इसके बाद <?xml-stylesheet> tag यूज़ करते हुए XML document में CSS file करवाइये।
  3. इसके XML file को browser के साथ open कर दीजिये। CSS file automatically load हो जाएगी।

Related Posts