Business Card Design: XML & CSS

Advertisement:

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>satish@technotip.org</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>shwetha@microsoft.com</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


You need to a flashplayer enabled browser to view this YouTube video

YouTube Link: http://www.youtube.com/watch?v=cb3vZ08H3Hw [Watch the Video In Full Screen.]



output on browser

Satish B
(91) 9844552841
(91) 9844119841
satish@technotip.org
Technotip IT Solutions

Shwetha
(91) 123456789
(91) 987654321
shwetha@microsoft.com
Microsoft


Advertisements

Leave a Reply

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