Stil Sayfaları Geliştirme

CSS (Cascading Style Sheets) HTML’ye ek olarak metin veya nesnelere topluca veya bireysel olarak yazı tipi, kenarlık, renk, boyut gibi biçimlendirme özelliklerinin tanımlandığı stil dosyalarıdır. Bu dosyalar sayesinde bütün biçimlendirme işleri tek bir merkezde yapılır ve buradan yönetilir. Merkezi yönetim sayesinde bir web sitesinde yer alan bütün sayfaları bu şekilde biçimlendirmek mümkündür.

CSS ile biçimlendirilen her nesne sanal bir kutu içerisinde düşünüldüğünden bu kutunun kenarlarının biçimlendirilmesi mümkün hale gelir. Normal bir paragrafa kenarlık vererek ayrıca bir kutu tasarlamaya ihtiyaç duymadan kendi çerçevesi çizilebilmektedir. Her bir kutuda üst, alt, sol ve sağ kenarlar ayrı ayrı biçimlendirilebilmektedir. Bu kenarlıklar için çizgi kalınlığı, çizgi stili, çizgi rengi ayrı ayrı tanımlanabilmektedir. Yine bu kutunun her bir kenarına benzer ya da ayrı ayrı sınır koyulabilmektedir. Bu sınırlar kutunun dışında (margin) veya içinde (padding) olabilmektedir.

CSS ile bir metne yazı tipi (arial, times new roman), yazı özelliği (normal, kalın, italik), yazı boyutu (16px, 12pt, small), yazı rengi (red, #ff0000) ve yazı dekorasyonu (altı çizili) biçimlendirmeleri yapılabilmektedir.

Üç farklı şekilde CSS tanımlaması yapılabilir. Harici bir dosyaya içerisinde yapılan tanımlamalar bütün sayfalarda kullanılabilir. Bu dosyaya bağlantı kuran her sayfa buradaki tanımlamalardan faydalanabilir. Bir diğer tanımlama şekli ise sayfa içi tanımlamadır. Bir sayfa içinde yapılan CSS tanımlamaları o sayfa içindeki her etiket tarafından kullanılabilir. Ancak başka bir sayfa bu tanımlamaları kullanamaz. Son olarak etiket içi tanımlamalar gelmektedir. Bu tanımlama sadece o etiket için geçerli olur.

Farklı şekillerde CSS kodu yazmak mümkündür. Bu yazım şekillerini aşağıdaki gibi özeltleyebiliriz:

Tek bir etiket türü için bir veya birden fazla özellik tanımlanabilir. Örneğin sadece link (a) etiketi için yazı tipi veya renk ayarları yapılabilir. Bu tanımlama ile sayfadaki veya sitedeki tüm linkler aynı görünüme kavuşur.

Birden fazla etiket türü için aynı özellikler tek seferde tanımlanabilir. Örneğin; başlık etiketlerinin birkaçına birden (h1, h2, h3 vs.) tek seferde tanımlama yapılabilir. Bu tanımlama ile bütün etiketler ortak bir görünüme kavuşmuş olur.

İç içe bulunan etiketler için özel tanımlamalar yapılabilir. Bu sayede bir etiket dışarda iken başka, bir etiketin içindeyken başka bir görünüm alabilir. Örneğin bir kutu (div) içindeki paragraf (p) için farklı dışarıdaki paragraf için ayrı tanımlama yapılabilir.

Etiketten bağımsız class tanımlamalar yapılabilir. Bu tür tanımlamalar ile farklı türdeki etiketler için aynı özellikler tanımlamak mümkündür. Örneğin, kırmızı adında bir class tanımlaması yapıldığında etiketin türüne bakılmaksızın link, paragraf ve başlık için ortak bir renk tanımlaması yapılabilir. (<a class=''kırmızı''></a>)

Sadece tek bir etiketin ismine özel tanımlamalar yapılablir. Bu tür tanımlamalara ID tanımlama denilebilir. ID özelliği ile bir isim alan etiketin dışındaki hiç bir etiket bu tanımdan faydalanamaz. (<div ID=''logo''></div>)