Tag: design

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

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="call me">(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="call me">(91) 987654321</phone>
    <email>[email protected]</email>
    <company>Microsoft</company>
  </companyname>
 
 
</companynames>

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

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
38
39
40

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: [email protected]
Technotip IT Solutions

Shwetha
home: (91) 123456789
work: (91) 987654321(call me)
email: [email protected]
Microsoft