How to create XML file for employee management system and display it using CSS?

    Employees are working for many organizations. For maintaining the details,we need to collect the name,employee id,designation and salary details.

Here,  we use CSS(Cascading Style sheets) to display XML files. For doing this,we need to open any text editor like notepad.

Create two files  and name that as “employee.xml” and “employee.css”

Add the following code.

employee.xml

<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet type="text/css" href="employee.css"?>

<payroll>

  <Heading> Welcome to the Employee management system </Heading>

     <employee>

          <name> adhav </name>

           <id> Emp01  </id>

           <Designation> Executive </Designation>

          <salary > 35000 </salary>

      </employee>

<employee>

          <name> chitra </name>

           <id> Emp02  </id>

           <Designation> Executive </Designation>

          <salary > 36,500 </salary>

      </employee>

<employee>

          <name> chandar </name>

           <id> Emp03 </id>

           <Designation> Senior Executive </Designation>

          <salary > 45000 </salary>

      </employee>

<employee>

          <name> Deepan </name>

           <id> Emp04  </id>

           <Designation> Executive </Designation>

          <salary > 36500 </salary>

      </employee>

<employee>

          <name> varun </name>

           <id> Emp05  </id>

           <Designation> Manager </Designation>

          <salary > 55000 </salary>

  </employee>

</payroll>

”employee.css”

employee{

                 background-color: yellow;

                  Width:100%;

               }

Heading {

                 color : black;

                 font-size : 35pt;

                 background-color : skyblue;

                }

Heading,name,id,Designation,salary {

                display : block;

                 }

name {

          color: brown;

          font-weight: BOLD;

          font-size: 25pt;

     }

 

Once you have saved this two files in same folder in same directory, just open the xml file in web browser.

You will get the output like this……

Welcome to the Employee management system

Adhav

Emp01

Executive

35000

Chitra

Emp02

Executive

36500

Chandar

Emp03

Senior Executive

45000

Deepan

Emp04

Executive

36500

Varun

Emp05

Manager

55000

Thus, the way to display xml file using css is easily  implemented.