Category: XML

Attach CSS StyleSheet To XML Document

Video tutorial illustrating: attaching css stylesheet to XML document to give better appearance to it on the browser. In short: for presentation purpose.

To achieve this, we need to first create a stylesheet file, and attach it or associate our XML file with this stylesheet. We do it with the help of a processing instruction.

Processing Instruction

1

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

you can give absolute or relative path in href.

This tells the XML parser that the attached css file has to be referenced while rendering the XML file content.

Complete code
companyNames.xml

1
2
3
4
5
6

< ?xml version="1.0" encoding="utf-8"?>
< ?xml-stylesheet type="text/css" href="Style.css" ?>
<companyname>
  IBM, Oracle, Apple, Maestro, Microsoft ..
  <!-- Google, Yahoo! -->
</companyname>

Stylesheet code
Style.css

1
2
3
4
5
6

companyName
{
    font-family: Verdana;
    font-size: 18px;
    color: red;
}

This way we have separated the content and styling information and made it into two separate files.
Helps keep the XML and Design/CSS coding separate and we could hire separate teams to work on these things.

Video Tutorial: Attach CSS StyleSheet To XML Document


[youtube https://www.youtube.com/watch?v=7WH6dMI_cfE]

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



Output on the browser:
IBM, Oracle, Apple, Maestro, Microsoft ..

Output will have red color with 18px size and with font-family of verdana.

Basic XML: Starting With Root Tag

Video tutorial explains the basics of XML and some rules to be followed to write the XML elements.
Also illustrating the way the raw XML files are displayed on the modern browsers.

Its a tag based language much like HTML, the difference is we can makeup our own tags.
XML is used to structure and describe the information.

Header Information

1

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

it informs about the xml version and the encoding, i.e., the standard encoding utf-8
This is optional. But still recommended by W3C
And it is automatically generated by many tools, so lets keep it! It doesn’t hurt :-)

Full code

1
2
3
4
5

< ?xml version="1.0" encoding="utf-8"?>
<xml>
  IBM, Oracle, Apple, Maestro, Microsoft ..
  <!-- Google, Yahoo! -->
</xml>

Each XML document must have only 1 root tag.
Multiple root tag gives errors.

Rules To Write Elements(Tags) Names
Can begin with underscore or letter ..followed by zero or more letters, digits, hyphens, periods and underscores.

Video Tutorial: Starting With Root Tag: Basic XML


[youtube https://www.youtube.com/watch?v=6KUzJSEixXI]

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



Output in the browsers
this is on Chrome

1
2
3
4
5
6

This XML file does not appear to have any style information associated with it. 
The document tree is shown below.
<companynames>
IBM, Oracle, Apple, Maestro, Microsoft ..
<!-- Google, Yahoo! -->
</companynames>