CSS Nedir?

CSS genel olarak, Cascading Style Sheets'in (Basamaklı Stil Sayfaları) kısaltması olup, İnternet üzerindeki web sayfalarının ve işaretlenmiş(markup) belgelerin görünümünü ve biçimlendirilmesini tanımlamak için kullanılan temel dildir.

HTML benzeri işaretleme dillleri, başlangıçta kendilerinin biçimlendirme ve görünüm bilgisini sağlamak amacıyla tasarlansa da, kısa süre içerisinde bu süreci iki katmana ayırmanın çok daha anlamlı olacağı ortaya çıktı. Belge İçeriği ve Belge Sunumu; ki CSS ikincisini yerine getirir. Tarihsel olarak HTML'in, tek amacı font ailesini, rengini ve boyutunu yerel olarak ayarlamak olan font gibi etiketlere sahip olmasının nedeni işte budur, ki bu iş bugün CSS tarafından yapılmaktadır. Bu, geliştiricinin aynı belgede birkaç yerde ve hatta birden fazla belgede biçimlendirme kurallarını yeniden kullanmasını sağlar. İşte söylediklerimi gösteren bir örnek -eğer ne yapıldığı size tam olarak anlaşılır gelmezse de endişelenmeyin. Bu ders boyunca tüm hususlar açıklanacaktır:

Yalnızca HTML kullanarak eski stil metin biçimlendirme :

This is a piece of
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>text</b></i></font> with
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>highlighted</b></i></font> elements in
<font face="Tahoma,Verdana,Arial" color="Blue" size="3"><i><b>it</b></i></font>.

CSS ile daha güncel bir yaklaşım:

<style type="text/css">
.highlight {
	color: Blue;
	font-style: italic;
	font-weight: bold;
	font-size: 120%;
	font-family: Tahoma, Verdana, Arial;
}
</style>

This is a piece of
<span class="highlight">text</span> with
<span class="highlight">highlighted</span> elements in
<span class="highlight">it</span>.

Farklı HTML etiketleri içerisinde, aynı kural kümesini nasıl yeniden kullandığıma dikkat edin. Örnekte yaptığımız gibi, bu kümeyi üç kez kullanıldığımız düşünülürse şimdiden bir avantaj elde ettik-ama bu kadarla bitmiyor-CSS'i harici bir stil sayfası(sonra açıklanacak)dosyasına yerleştirin böylece aynı kuralları tüm web sitenizde kullanabilirsiniz. Örneğin vurgulanan metnin mavi yerine kırmızı olması gerektiğine karar verdiğinizde neler yapılabilir? İlk yaklaşımda, etiketleri kullandığınız her yerde manuel olarak bunu düzenlemeniz gerekir. CSS ile, sadece ".highlight" kuralını değiştirirsiniz!

Özet

CSS, HTML öğelerinize biçimlendirme ve yerleşimle (layout) ilgili kuralları kolayca uygulamanıza ve ardından bu kuralları birden çok öğede ve hatta sayfada yeniden kullanmanıza olanak tanır. Girişte, bazı CSS kodlarına baktık, ancak nasıl çalıştığı ve neden böyle göründüğü hakkında konuşmadık. Bu, en baştan başlayacağımız ve herşeyi detaylı bir şekilde açıklayacağımız sonraki iki bölümün konusu olacaktır.