Как стилизовать XML-документы с помощью CSS

XML ( с англ. Extensible Markup Language: расширяемый язык разметки)  — это простой текстовый формат для представления структурированной информации в виде тегов. С помощью XML удобно хранить и передавать данные (конфигурации, техническую документацию, транзакций, счета и т.д. )  как локально так и  в сети. XML был написан так, чтобы быть понятным и машинам и людям. Сам формат XML пришел на замену другого формата под названием SGML (ISO 8879) и стал  более подходящим для использования в Интернете.

 В отличие от HTML в XML стили CSS не включены по умолчанию, вместо этого свойства определяются для каждого элемента. И если его открыть можно увидеть обычный неоформленный код, который не всегда просто проанализировать и найти нужную информацию, особенно если говорить об объемных документах и отчетах.  Выходом из этой ситуации есть использование  CSS, чтобы придать файлу нужный вид. Для этого нужно соединить файл XML  с файлом .css с правилами оформления текста, оба файлы должны находится в одной директории. 

Соединяются оба файла строчкой (строчка должна быть в самом  начале XML  файла): 

<?xml-stylesheet type="text/css" href ="назвниее_файла..css"?>

где: назвниее_файла .css - файл CSS в котором содержатся правила по оформление содержимого XML. 

 Когда создается файл со стилями, важно чтобы  теги в нем строго совпадали с названиями  тегов XML файла.

 Разберем на примере, имеется XML-файл:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="hosting.css"?>
<heading>Hosting plans</heading>
<hosting>
      <title>Title -: Web-hosting</title>
        <name>hosting plan name</name>
        <price> Price: 1 dollar </price>
        <disk>Space on SSD-drive: 1 Gb </disk>
        <website> Number of website : 1 </website>
    </hosting>
    <hosting>
        <title>Title -: Unlimited hosting</title>
        <name>hosting plan name</name>
        <price> Price: 10 dollar </price>
        <website> Number of website : unlimited  </website>
    </hosting>

И соответствующий файл hosting.css с правилами оформления текста в  XML файле: 

hosting {
     color: blue;
     background-color : white;
     width: 100%;
}
 heading {
     color: black;
     font-size : 30px;
     background-color : powderblue;
}
 heading, title, name, price, dick, website {
     display : block;
}
 title {
     font-size : 15px;
     font-weight : bold;
}

Готово, теперь при открытые через браузер XML файл будет легко читабельным и  оформленным по вашим заданным правилам.

    Приятной работы.