CSS İle HTML’i Biçimlendirmek
CSS ile HTML’i biçimlendirmek tam olarak bir zaruriyetten ötürü doğdu diyebiliriz. Zira eski sürüm HTML standartlarında HTML elementlerini biçimlendirmek için etiketler (tags) ve öznitelikler (attributes) bulunmaktaydı.
Ancak HTML dosyalarının boyutu gitgide büyüdü, dosya üzerinde değişiklikler yapmak oldukça zorlu bir hale gelmeye başladı.
Bu durum zamanla işin içinden çıkılmaz bir hal almaya başlayınca W3C (World Wide Web Consortium) olaya el attı ve HTML’deki ilgili kodları çıkarttı. Bu durum sonucunda HTML’in ilk sürümünden (1991) yaklaşık 5 yıl sonra (1996) CSS (Cascading Style Sheets) doğmuş oldu.
Cascading Style Sheets kelimelerinin baş harflerinden oluşan CSS, ilk olarak 10 Ekim 1994 tarihinde, CERN’de Tim Barners-Lee ile birlikte çalışan Hakon Wium Lie tarafından öne sürülmüştür. Tıpkı HTML gibi işaretleme dilidir ve Türkçeye Basamaklı Stil Şablonları olarak çevrilmektedir.
Cascading yani basamaklı olarak adlandırılmasının anlamı, bir üst elemente uygulanan bir stilin üst element içindeki tüm alt elementlere de uygulayabilmesidir. Böylece her HTML dosyasının içine tek tek tanımlanması gereken özellikleri tek bir dosyadan kontrol etmek mümkün hale geldi.
Yani CSS İle HTML’i biçimlendirmek, kişiyi pek çok işten kurtarmaktadır. Zira CSS ile yazının rengi, tipi, boyutundan tutun da elementler arasındaki boşluğu, bunların nasıl konumlandırıldığı ve düzenlendiğinine varıncaya kadar daha pek çok şey kolayca ayarlanabilmektedir.
CSS, HTML’e 3 farklı yöntem ile eklenir:
- Satır İçi
- Dahili
- Harici
⭐ Satır içi CSS eklemek aslında başlangıç etiketleri içine yazılan style özniteliği ile sağlanır. Satır içi CSS yalnızca tanımlandığı element için geçerli olur ve baskın özelliktedir.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
⭐ Dahili CSS eklemek için HTML belgesine <style> </> elementi style<head></head> elementi arasına eklenir. Dahili CSS yalnızca tanımlandığı sayfa için geçerli olmaktadır. Zaten bu nedenle de oldukça kullanışlı bir yapıdır.
Örneğin sayfadaki tüm paragraf elementlerinin beyaz renkte, body ile arka planı mavi ve h2 etiketlerinin kırmızı renkte olmasını isteyebilirsiniz:
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
⭐ Harici bir CSS eklemek için uzantısı .css olan harici bir dosya kullanılır. Bu CSS dosyasına ulaşmak için HTML belgelerinden link verilir. Bu sayede ilgili HTML dosyaları tek bir CSS dosyası üzerinden kolayca kontrol edilmiş olur.
See the Pen Untitled by 1kodum (@1kodum) on CodePen.
Örnekte link verilen <link rel="stylesheet" href="styles.css"> içeriği aşağıdaki gibidir:
|
1 2 3 4 5 6 7 8 9 |
body { background-color: powderblue; } h1 { color: blue; } p { color: red; } |
