XML CSS

You can enrich XML documents with CSS. To call external CSS file;

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>

To call the style.css file, we first add the xml start tag. Then we call our css file in the href="style.css" part.

Now we create a file called library.xml and format its content with style.css.

First, let's create library.xml and add the path to the CSS file.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>
	<books>
	<book isbn="9759954949">
		<name>Yunus Emre's Divan</adi>
		<author task="Compiler">Selim Yağmur</author>
		<language>Turkish</language>
		<print>8</print>
		<date>
			<year>2014</year>
			<month>04</month>
			<day>01</day>
		</date>
	</book>
	<book isbn="9753386203">
		<name>Risaletü'n-Nushiyye Yunus Emre</adi>
		<author task="Translator">Prof. Dr. Umay Turkes Gunay</author>
		<language>Turkish</language>
		<print>3</print>
		<date>
			<year>2009</year>
			<month>01</month>
			<day>01</day>
		</date>
	</book>
</books>

Now let's prepare the style.css.

books {
  padding: 10px;
}

book {
  display: block;
}

book name {
  color: blue;
  font-size: 20px;
  display: block;
}

book author,
language,
print,
date {
  display: block;
  margin-left: 10px;
}

When we apply the css we have prepared, it gives a screenshot like the one below.

If we didn't format it with CSS, the result would be as follows.