Video tutorial to show the design of business cards using XML and Cascading Stylesheet.
In this example we apply styling to business cards of two people.
The primary information i.e., the content is in XML and the presentation is taken care by CSS.
Base tag or the root tag name is companyNames
and the elements inside root tag is companyName
Other tags present inside companyName tag are Name, phone, email, company.
Example:
Two people are Satish B and Shwetha, they are working in Technotip IT Solutions and Microsoft respectively.
Business card Content
companyNames.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | < ?xml version="1.0" encoding="utf-8"?>
< ?xml-stylesheet type="text/css" href="Style.css" ?>
<companynames>
<companyname>
<name>Satish B</name>
<phone type="home" primary="primary">(91) 9844552841</phone>
<phone type="work">(91) 9844119841</phone>
<email>[email protected]</email>
<company>Technotip IT Solutions</company>
</companyname>
<companyname>
<name>Shwetha</name>
<phone type="home">(91) 123456789</phone>
<phone type="work" primary="primary">(91) 987654321</phone>
<email>[email protected]</email>
<company>Microsoft</company>
</companyname>
</companynames> |
This file has already been connected to a external stylesheet.
Business card Styling Information
Style.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | companyName
{
font-family: Verdana;
font-size: 18px;
color: red;
display: block;
padding: 10px;
margin: 20px;
background-color: ivory;
width: 300px;
border: 5px;
border-color: gray;
}
Name
{
display: block;
font-weight: bold;
}
phone
{
display: block;
}
company
{
display:block;
}
email
{
display: block;
color: Green;
} |
Here we make all the elements display as block. Next add some padding and margin..and a light background color.
Video Tutorial: Business Card Design: XML & CSS
[youtube https://www.youtube.com/watch?v=cb3vZ08H3Hw]
output on browser
Satish B
(91) 9844552841
(91) 9844119841
[email protected]
Technotip IT Solutions
Shwetha
(91) 123456789
(91) 987654321
[email protected]
Microsoft