Business Card Design: XML & CSS Level 2

Video tutorial to show the design of business cards using XML and Cascading Stylesheet Level 2.

Continuing the tutorial from previous day: Business Card Design: XML & CSS

In the previous tutorial there was no facility to display the labels using CSS.
To over come that problem, we step into CSS Level 2, wherein we include the label information to the presentation layer using CSS level 2 coding.

Business card Content
companyNames.xml

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

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

There is no change with the companyName.xml file.
To know more details, please visit Business Card Design: XML & CSS

Business card Styling Information + CSS Level 2 coding
Style.xml

companyName
{
    font-family: Verdana;
    font-size: 18px;
    color: red;
    display: block;
    padding: 10px;
    margin: 20px;
    background-color: ivory;
    width: 400px;
    border: 5px;
    border-color: gray;
    text-align: left;
}

Name 
{
    display: block;
    font-weight: bold;
}

phone 
{
    display: block;
}

company
{
    display:block;
}

email
{
    display: block;
    color: Green;
}

email:before { content: "email: " }
phone:before  { content: attr(type) ": " }
phone[primary]:after { content:"(" attr(primary) ")" }

Last 3 lines of coding is the only thing changed from previous day tutorial.
Those 3 lines are CSS Level 2 coding!

using :before pseudo class selector we tell the parser to include email: as content before displaying the actual email id.

similarly, using :after we include the label after the actual content.

attr(type) this selects the value assigned to the attribute type from companyNames.xml file and displays it.
phone[primary]:after There are multiple phone numbers, one of which is made primary. So phone[primary] points to the phone number which has the attribute primary.

Video Tutorial: Business Card Design: XML & CSS Level 2

I’ve shown CSS Level 2 working on all 3 browsers: Internet Explorer, Mozilla Firefox and Google Chrome.
But some older versions of Internet Explorer doesn’t support CSS Level 2 coding.
To solve this issue( cross browser compatibility issue ), we can make use of XSLT [ eXtensible Stylesheet Language Transformations ]. We’ll see it in coming video tutorials.

Output on the browser
Satish B
home: (91) 9844552841(call me)
work: (91) 9844119841
email: satish@technotip.org
Technotip IT Solutions

Shwetha
home: (91) 123456789
work: (91) 987654321(call me)
email: shwetha@microsoft.com
Microsoft