XML CSS Styling

You can enrich XML documents with CSS. To call an 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 CSS file path.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<books>
	<book isbn="9759954949">
		<title>Yunus Emre Divani</title>
		<author role="Editor">Selim Yagmur</author>
		<language>Turkish</language>
		<edition>8</edition>
		<date>
			<year>2014</year>
			<month>04</month>
			<day>01</day>
		</date>
	</book>
	<book isbn="9753386203">
		<title>Risaletun-Nushiyye Yunus Emre</title>
		<author role="Translator">Prof. Dr. Umay Turkes Gunay</author>
		<language>Turkish</language>
		<edition>3</edition>
		<date>
			<year>2009</year>
			<month>01</month>
			<day>01</day>
		</date>
	</book>
</books>

Now let's prepare style.css.

books {
  padding: 10px;
}

book {
  display: block;
}

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

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

When we apply the CSS we prepared, it gives a screenshot like below.

If we hadn't styled with CSS, the result would be as below.