Css'ye Başlangıç

İlk olarak css nedir bunun bir tanımını yapalım.
CSS;stil (style) bir dosyadan, belirli bir nesne grubu için,belirli bir etiket altında tanımlanmış görsel özellikler topluluğudur.Yani demek istediğim ey şu bir site tasarlıyacağız bunun için bir çok başlık kullanacağız başlıkları 15px olarak tek tek kodlamaktansa bir css dosyası oluşturup bir seferlik tanımlamak daha mantıklı olacaktır.Bu bize hem hız hemde sitenin tasarımını değiştireceğimiz zaman kolaylık sağlar.

Örnek olarak anlatırsak, yazının başlığını 15px olarak belirlemiştik bunu html olarak tek tek kodlamış olalım.Sonradan sitenin başlıklarının çok büyük olduğu kanısına vardınız ve 14px'e düşürmeye karar verdiniz.Html olarak kodladıysanız,kodları tek tek arıyacaksınız onları 14px olarak tekrar değiştireceksiniz çok masraflı ve uzun bir iş olur,bunun yerine css dosyamızın içinde tanımlamış olsaydık saniyeler içinde değişiklik yapabilecektik.Daha bir çok css kullanmanın getirdiği avantajlar var ama bunları bir sonraki yazıma bırakmak istiyorum.Şimdi css'ye bir başlangıç yapalım.

Css Terimleri:

A)Seçiciler (Selectors)

Seçiciler üç farklı şekilde olabilirler.
# HTML Seçicisi:
a,h1,p,body,table vs.. cinsinden
# Sınıf (Class) Seçicisi:

<div class="etiket"></div> cinsinden

#Id Seçicisi:

<div id="etiket_buton"></div> cinsinden

B)Özellikler (Properties)

Seçicilerin tanımlandığı görüntü karakteristiği yada özelliğidir.Örneğin;bir metinimiz var ve bunu soldan 5px itmek istiyoruz.Padding-left:5px padding-left özellik olarak adlandırılan kısımdır.

C)Değerler (Values)

Yukarıdaki yazdığım padding-left:5px 5px burada değer olarak adlandırılıyor.

Css Stilini Nasıl Tanımlarız?

Temel olarak 3 farklı seçici tipi için 3 farklı stil tanımı şablonu mevcuttur.

#HTML Seçicisi İçin Stil Tanımı:

seçici {özellik:değer;özellik:değer; .....}
.etiket {padding-left:5px; font-size:15px;}yada
.etiket {
padding-left:5px;
font-size:15px;
}

Bu iki tanımlama tarzı arasında hiç bir fark yoktur,tanımlamalarınızı tek satır olarak tanımlayabildiğiniz gibi birden fazla satırdada tanımlama yapabilirsiniz.

Sınıf Seçicisi İçin Stil Tanımı:

seçici.sınıf {özellik:değer;özellik:değer; .....}
p.yazi_metni {padding-left:10px;}

Css olarak yazdığımız kodu html olarak sayfa içerisine yerleştirelim.

<p class="yazi_metni">ResulUnal.com css'ye başlangıç...</p>

#Id Seçicisi İçin Stil Tanımı:

#seçici {özellik:değer;özellik:değer; .....}
#giris_formu {
          background:url(../images/login.gif) no-repeat;
          width:153px;
          height:50px;
          margin-left:8px;
}

Not:Id, ingilizce kimlik (identity) kelimesinden türetilmiş bir kısaltmadır.Bir belgede iki farklı nesne aynı id değerine sahip olamaz.
Css Stilinin Websayfasına Entegre Edilmesi
Üç farklı CSS ekleme yöntemi bulunmaktadır.

Linkli (linked) ekleme yöntemi
İlişik (embedded) ekleme yöntemi
Satıriçi (inline) ekleme yöntemi

1.Linkli (linked) Ekleme Yöntemi

Bu yöntemde stil tanımlamaları harici bir css dosyası ile tanımlanır.Bu dosyaya link vermek tüm sayfalar için tanımlanan kodlar erişilir durumdadır.
CSS:
stil.css

.footer_yazi {
         font-family:verdana;
         color:#000;/*yazi rengi siyah*/
         font-size:15px;
}

HTML:

....
<head>
<title>Linkli css ekleme yöntemi</title>
<link href="stil.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="footer_yazi">Burada bir linkli eklenmiş bir css metin parçası bulunmaktadır.</div>
</body>
....

2.İlişik (embedded) Ekleme Yöntemi

Bu yöntem css stilini web sayfasının tümüne uyarlamak için kullanılır.

....
<head>
<title>Linkli css ekleme yöntemi</title>
<style type="text/css" />
.footer_yazi {font-family:verdana;color:#000;/*yazi rengi siyah*/font-size:15px;}
</style>
</head>
<body>
<div class="footer_yazi">Burada bir linkli eklenmiş bir css metin parçası bulunmaktadır.</div>
</body>
....

3.Satıriçi (inline) Ekleme Yöntemi

Bu yöntem css stilini üzerinde bulunduğu sayfa elemanına uygulamak için kullanılır.

<div style="font-family:verdana;color:#000;/*yazi rengi siyah*/font-size:15px;">Satıriçi metin belgesi</div>

Not:Css koduna not düşmek için /* */ ayraçlarının içine istediğiniz metini yazınız.Web sayfanızın çalıştığı tarayıcı bu ayraç arasındaki kodları görmezden gelecektir.