Web dünyasının değerli bir parçası olan XML dökümanlarını zenginleştirmenin kullanıcı deneyimi açısından ne kadar önemli olduğunu bir kez daha vurgulayarak başlayalım. Bu noktada CSS (Cascading Style Sheets) kullanmak, XML dökümanlarını zenginleştirmek açısından güçlü bir araçtır. CSS; belgenin düzenini, metin biçimini, renkleri ve daha fazlasını kontrol etmemizi sağlar. Fakat, XML dökümanlarına CSS uygulamak, doğru yaklaşımı benimsemeyi gerektirir. Bu içerikte, XML dökümanlarını zenginleştirmek için nasıl CSS kullanacağınızı anlatan bir rehber sunuyoruz. Şimdi harici CSS dosyalarını nasıl çağıracağımıza bakalım.

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

stil.css dosyasını çağırmak için önce xml başlangıç etiketini ekliyoruz. Sonrasında href=”stil.css” kısmına css dosyamızı çağırıyoruz.

Şimdi kutuphane.xml diye bir dosya oluşturuyoruz ve bunu stil.css ile içeriğini biçimlendiriyoruz.

Önce kutuphane.xml oluşturalım ve CSS dosyasının yolunu ekleyelim.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="stil.css"?>
<kitaplar>  
	<kitap isbn="9759954949">  
		<adi>Yunus Emre Divanı</adi>  
		<yazar gorev="Derleyici">Selim Yağmur</yazar>  
		<dil>Türkçe</dil>  
		<baski>8</baski>  
		<tarih>  
			<yil>2014</yil>  
			<ay>04</ay>  
			<gun>01</gun>  
		</tarih>  
	</kitap>  
	<kitap isbn="9753386203">  
		<adi>Risaletü'n-Nushiyye Yunus Emre</adi>  
		<yazar gorev="Çevirmen">Prof. Dr. Umay Türkeş Günay</yazar>  
		<dil>Türkçe</dil>  
		<baski>3</baski>  
		<tarih>  
			<yil>2009</yil>  
			<ay>01</ay>  
			<gun>01</gun>  
		</tarih>  
	</kitap>  
</kitaplar> 

Şimdi stil.css hazırlayalım.
kitaplar {
	padding: 10px;
}

kitap {
	display: block;
}

kitap adi {
	color:blue;
	font-size: 20px;
	display: block;
}

kitap yazar, dil, baski, tarih {
	display: block;
	margin-left: 10px;
}

Hazırladığımız css uyguladığımızda aşağıdaki gibi bir ekran görüntüsü verir.

Eğer CSS ile biçimlendirmeseydik sonuç aşağıdaki gibi olurdu.

XML dökümanlarını CSS ile zenginleştirme işlemi ilgili web sayfasındaki içeriğinizi görsel açıdan daha doğru bir hale getirmenin etkili bir yöntemidir. Harici CSS dosyası kullanarak bu işlemi kolayca gerçekleştirebilirsiniz. Şimdi, kendi projelerinizde ve işlerinizde bu harika yöntemi uygulamak için hazırsınız!