Öncelikle CSS Giriş makaleleriyle CSS yani stil şablonlarını tanımaya başlıyalım.

Öncelikle stil şablonlarını style.css ve xhtml olarak iki farklı grupta işleyeceğiz..B

Style.css

Bu kısım tamamen css kodlarından oluşmakta ve amacımız buradaki yazılı kodları xhtml sayfamızda göstermektir.Öncelikle bilmemiz gereken iki üç önemli nokta var.

Style şablonunda tanımlı kodlar vardır..Bunlar body,p,a,hover gibi sabit değerlerdir..Birde bizim kendi isimlendirdiğimiz özel tablolar vardır header,footer,content gibi.

Öncelikle özel tabloların kullanımını anlatmayı düşünüyorum:

2 Farklı kod yazma yöntemimiz vardır..

#tablo1 işaretiyle başlamak bu <div id=”tablo1”> </div>

.tablo1 işaretiyle başlamak bu <div class=”tablo1”> </div>

Bunlardan istediğiniz birini kullanabilirsiniz..Fakat ben class olanı yani .tablo1 şeklinde başlamayı seçiyorum ve bundan sonraki yazılarımızda class kodunu kullanarak anlatım yapıcağım.

XHTML Sayfa

Hazırladığımız style şablonlarını gösterme sayfamızdır..<div class”tablo1>Deneme1</div> şeklinde yazarak Deneme1 yazısına renk,border,pozisyon vs gibi birçok özelliğimizi style.css’deki tablo1 kodu sayesinde sağlayacağız..

1

<span style="color: #0000ff"><</span><span style="color: #800000">style</span> <span style="color: #ff0000">type</span>=<span style="color: #0000ff">"text/css"</span> <span style="color: #ff0000">media</span>=<span style="color: #0000ff">"screen"</span><span style="color: #0000ff">></span><span style="color: #008000"><!-- @import url( style.css ); --></span><span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>

<span style="color: #0000ff"><</span><span style="color: #800000">style</span> <span style="color: #ff0000">type</span>=<span style="color: #0000ff">"text/css"</span> <span style="color: #ff0000">media</span>=<span style="color: #0000ff">"screen"</span><span style="color: #0000ff">></span><span style="color: #008000"><!-- @import url( style.css ); --></span><span style="color: #0000ff"></</span><span style="color: #800000">style</span><span style="color: #0000ff">></span>

Kodu sayesinde style.css şablonunuzu temanıza entegre edebilirsiniz.

Head kısmından önce gelmesi gerekiyor..Ayrıca

1
2
3
4
5

<<span style="color: #800000">style</span> <span style="color: #800000">type</span>="<span style="color: #800000">text</span>/<span style="color: #800000">css</span>">
.<span style="color: #800000">tablo1</span> {
    <span style="color: #ff0000">text-align</span>: <span style="color: #0000ff">center</span>;
}
</<span style="color: #800000">style</span>>

<<span style="color: #800000">style</span> <span style="color: #800000">type</span>="<span style="color: #800000">text</span>/<span style="color: #800000">css</span>">
.<span style="color: #800000">tablo1</span> {
	<span style="color: #ff0000">text-align</span>: <span style="color: #0000ff">center</span>;
}
</<span style="color: #800000">style</span>>

Şeklinde de style.css sayfası oluşturmadan aynı sayfa içerisinde style kodlarını girebilirsiniz.Fakat tavsiye olarak style.css kullanmanızı öneririm.

Ayrıca üstte gördüğünüz gibi .tablo1 kodundan sonra {css kodları } şeklinde bir kodlama yapılmıtştır…Kodlar bu şekilde yazılmak zorundadır.Ve her biçim kodunun sonuna “;” noktalı virgül konulup bir sonraki koda geçilmelidir.