Bir CSS Koduna Bakış

Bir CSS kodu iki temel bileşenden oluşur. Biri element ve stilleri birbirinden ayıran bir seçim. Diğeri ise bir ya da daha fazla özelliği bildirdiğimiz ifade bölümü.

Seçim genel olarak stilini belirleyeceğimiz HTML elementidir, h1, a, body, p gibi.

İfadeler ise sürekli olarak özellik: değer; şeklinde { ve } işaretleri arasında sıralanırlar.

CSS Örneği

Bir css ifadesi her zaman noktalı virgül (;) ile biter. İfadeler bir kıvrımlı parantez içinde yer alır. Aşağıdaki örneğe bakalım:

   p { color: red; text-align: center; }

Yukarıda tek satırda belirttiğimiz kodları istersek aşağıdaki şekilde de yazabiliriz. Daha anlaşılır olacaktır:

   p
   {
      color: red;
      text-align: center;
   }

CSS'de Açıklama Kullanmak

Her programlama dilinde ve HTML'de de olduğu gibi bazen kullanıcıların görmeyeceği ancak bizim için referans olacak açıklamalar yazmak gerekebilir. Bu durum için CSS de /* açıklama */ kullanılmaktadır:

   /* Paragraf Stilim */
   p
   {
      /* Renk kırmızı olacak */
      color: red;

      /* Ortalanmış olacak */
      text-align: center;
   }

CSS ID ve Class Seçimi

HTML elementleri için stiller belirleyebildiğiniz gibi size özel stiller belirleyip elementlerin "id" ve "class" özelliklerinde bu stili belirterek de kullanabilirsiniz.

Class Kullanımı

Bir HTML kaynağına baktığınızda bir element (tag) özelliği olarak class="stil" şeklinde bir özellik belirtildiğini görebilirsiniz. Peki neden buna gerek duymuşlar? Örneğin aşağıdaki HTML kodunu inceleyelim:

Hoş Geldiniz!

Yukarıdaki div elementi içinde yer alan class="stil", o div elementi için CSS özellikleri belirtmemizi sağlayan bir yoldur. CSS dosyamızda şu şekilde bir ifade varsa:

   .stil {
      font: 10pt Tahoma, Verdana;
      color: blue;
   }

Nokta (.) ile başlayan bir stil oluşturduk ve adını biz verdik. Bu demektir ki class="stil" ile belirttiğimiz tüm elementler 10 punto Tahoma yazı tipinde ve mavi (blue) renginde olacaktır. Tabi istersek sadece tek bir elementte geçerli olmasını sağlayabiliriz. Örneğin sadece DIV elementlerinde geçerli olmasını istiyorsak:

   div.stil {
      font: 10pt Tahoma, Verdana;
      color: blue;
   }

".stil" yani seçim adımızın başına div getirmemiz yeterli olacaktır. Bu durumda bu CSS kodu sadece DIV elementlerinde kullanılabilir olacaktır.

CLASS özelliği kullanmanın bize sağlayacağı yararlara şöyle bir bakalım:

Kendimizin adlandırdığı özel stiller yaratmak ve kullanmak
Bir stili birden fazla elementte kullanabilmek
Stillere CSS de yer verip HTML kodlarımızı sürekli tekrarlanan uzun CSS kodlarından arındırmak

ID Kullanımı

ID özelliği ile de stiller yaratabiliriz. CLASS'tan farklı yanları:

Sadece tek bir elementte kullanılabilir.
Aynı id değeri iki elemente verilemez (Her id sadece tek bir elementte kullanılabilir).
Stil dosyamızda CLASS'da . (nokta) kullanırdık, ancak id özelliğine göre stilleme yapacaksak # (diyez) kullanırız.

Şimdi bu anlattıklarımızı örnek üzerinde görelim:

Hoş Geldiniz!

Örnekte ID değeri "stil" olan bir DIV elementi görüyoruz. CSS dosyamızda bu elemente özel stil tasarlarken aşağıdaki şekilde kod yapısını oluşturmalıyız:

   #stil {
      font: 10pt Tahoma, Verdana;
      color: blue;
   }

Görüldüğü gibi bu kez diyez (#) ile başlattık. Sadece tek bir elemente özel stil tasarlamış olduk (Neden? Çünkü başka bir elementte yine id değeri "stil" belirtilemez.)

Ayrıca unutmadan söyleyelim hiçbir ID değeri rakamla başlamaz. ID, HTML dosyasında o elementi bulmamızı sağlar, bu nedenle aynı ismi veremeyiz. Aynı ismi vermemizin diğer yaratacağı sorun Java Script'te bu elementi id özelliğine göre kullanamamak olacaktır. Son olarak bazı tarayıcılar birden fazla aynı id kullanılan HTML dosyalarında stilleri görmezden gelebilir.

CSS Nasıl Eklenir?

Bir tarayıcı açıldığı zaman stilleri okur ve o stilin kullanıldığı HTML elementlerini belirtilen özelliklere göre şekillendirir.

Üç şekilde sayfamıza stil ekleyebiliriz. Bunlar:

Stilleri CSS Dosyasından Çağırmak
HTML Sayfasında CSS Yazmak
HTML Elementinin İçerisinde Stil Belirtmek

1. Stilleri CSS Dosyasından Çağırmak

Öncelikle bir not defteri ya da CSS düzenleyici program açmalısınız.

CSS Kodlarınızı CSS Kod Yapısı'na uygun olarak yazın ve kaydedin.

HTML Sayfanızı açıp

ile

arasına aşağıdaki şekilde stil dosyanızın adını belirtin.

href="DOSYA_ADI" ile belirttiğimiz yerde bizim kaydettiğimiz dosyanın adı yer almalı ve HTML sayfası ile CSS dosyası aynı klasörde bulunmalıdır. Farklı bir klasörde kullanmak istiyorsak HTML sayfasına göre konumu yazmamız gereklidir.

Dosya adını doğru yazdıysak artık CSS dosyamızı HTML sayfamıza bağladık demektir. Yani CSS dosyamızdaki stilleri rahatlıkla HTML sayfamızda kullanabiliriz.