Business Card Design: XML & CSS

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

< ?xml version="1.0" encoding="utf-8"?>
< ?xml-stylesheet type="text/css" href="Style.css" ?>


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

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

This file has already been connected to a external stylesheet.

Business card Styling Information
Style.xml

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

output on browser