CSS ile HTML Etiketlerini Yeniden Düzenlemek

Daha önceki yazılarımda sayfalarımız için oluşturduğumuz CSS leri aynı ya da farklı sayfalardan nasıl çağıracağımızı ve neden CSS kullanmamız gerektiğini anlatmaya çalışmıştım. Bu yazıda ise sizlere CSS kullanarak HTML etiketlerini nasıl yeniden düzenleyebileceğimizi göstermeye çalışacağım.

Normalde sayfamızda bulunan bir yazı ya da giriş alanını oluşturduğumuz bir sitil ile aşağıdaki gibi eşleştiriyoruz.

<span class="style1">HayalEt Yazılım</span>

Bu şekilde sayfadaki her öğenin eşleştirilmesi takdir edeceğiniz gibi hem zahmetli hem de zaman alıcı bir işlem oluyordu. Bunlarla uğraşmak yerine sayfamızda kullandığımız HTML Tag yani etiketleri CSS kodunda tanımlayarak; her seferinde fazladan uğraşmaya gerek kalmadan istediğimiz gibi görünmelerini sağlayabiliriz. Şimdi bunu nasıl yapacağımıza bakalım.

Önce aşağıdaki gibi bir kod yazalım ve bunu ornek.html olarak kaydedelim.

<hr />
  Bu bir örnek yazıdır.

Bu da bir örnek paragraftır. Burada paragrafta yazı stilinin nasıl değiştiği gösterilmeye çalışılmıştır. CSS ile genel HTML etiketleri de yeniden düzenlenebilir.
  
<hr />
 <input type="text" />

Burada iki yatay çizgi arasına bir yazı ve bir de paragraf koyduk ve aşağısına da bir metin giriş alanı ekledik. Bu kodu yazarken size tavsiyem Windows Not Defteri gibi basit bir metin editörü kullanmanızdır. Özellikle Dreamweaver gibi gelişmiş web editörleri sayfanın başına otomatik stil kodları ekledikleri için kodunuzda karışıklık olacak ve belki de çalışmayacaktır.

Sayfamzı kaydedip çalıştırdığımızda aşağıdaki gibi görünecektir.

Görüldüğü gibi çok basit ve hiç bir stil yok. Şimdide aşağıdaki kodu yazalım ve bunu ornek.css olarak kaydedelim.

FONT {
     FONT-SIZE: 10px; FONT-FAMILY: Tahoma
}
BODY {
     SCROLLBAR-FACE-COLOR: #ffffff;
     SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
     SCROLLBAR-SHADOW-COLOR: #cccccc;
     SCROLLBAR-3DLIGHT-COLOR: #cccccc;
     SCROLLBAR-ARROW-COLOR: #cccccc;
     SCROLLBAR-TRACK-COLOR: #ffffff;
     SCROLLBAR-DARKSHADOW-COLOR: #cccccc;
     font-family: Tahoma;
     font-size: 10px;
     color: #666666;
}
TD {
     border-top-style: none;
     border-left-style: none;
     font-family: Tahoma;
     font-size: 11px;
     color: #666666;
}
HR {
     COLOR: #1194FF;
     HEIGHT: 1pt;
     border-top-width: thin;
     border-right-width: thin;
     border-bottom-width: thin;
     border-left-width: thin;
     border-top-style: dotted;
     border-right-style: dotted;
     border-bottom-style: dotted;
     border-left-style: dotted;
     width: 95%;
}
INPUT {
     FONT-SIZE: 8pt;
     COLOR: #000000;
     FONT-FAMILY: Verdana;
     border: 1px double #3a93d0;
     background-color: whitesmoke;
}
TEXTAREA {
     BORDER-RIGHT: #3a93d0 1px solid;
     BORDER-TOP: #3a93d0 1px solid;
     FONT-SIZE: 8pt;
     BORDER-LEFT: #3a93d0 1px solid;
     COLOR: #000000;
     BORDER-BOTTOM: #3a93d0 1px solid;
     FONT-FAMILY: tahoma;
}
SELECT {
     BORDER-RIGHT: #3a93d0 1px solid;
     BORDER-TOP: #3a93d0 1px solid;
     FONT-SIZE: 8pt;
     BORDER-LEFT: #3a93d0 1px solid;
     COLOR: #000000;
     BORDER-BOTTOM: #3a93d0 1px solid;
     FONT-FAMILY: Tahoma;
     background-color: whitesmoke;
}
P {
     border-top-style: none;
     border-left-style: none;
     font-family: Tahoma;
     font-size: 11px;
     color: #000777;
}
.BASLIK2 {
     FONT-SIZE: 8pt;
     FONT-FAMILY: Tahoma;
     font-weight: normal;
     color: #FF6600;
}
.BASLIK3 {
     FONT-SIZE: 8pt;
     FONT-FAMILY: Tahoma;
     font-weight: bold;
     color: #FFFFFF;
}

Burada oluşturduğumuz CSS dosyasına dikkat ettğimizde HTML etiketlerini düzenlemek için kullandıklarımızın etiketlerle aynı ismi taşıdığını görebiliiriz. FONT, TD, HR, SELECT gibi HTML etiketleri burada da aynı adla yazıldı ve özellikleri belirlendi. Metin giriş kutularının renkleri değişti. Yatay çizginin rengi değişti ve düz yerine nokta nokta olması sağlandı. P ile de paragraflar yeniden şekillendirildi vs vs… Şimdi dilerseniz sonucu görelim. Bunu yapmak için daha önceden yaptığımız ornek.html dosyamızın en başına yazacağımız bir kod ile ornek.css dosyamızı çağırmamız gerekiyor. Bu kodun nasıl olması gerektiğinden şu yazımda bahsetmiştim. Neyse lafı uzatmadan CSS çağırma kodumuzu ekleyelim.

	<link rel="stylesheet" href="ornek.css">

Böylece ornek.html dosyamız aşağıdaki gibi olacaktır.

	<link rel="stylesheet" href="ornek.css"></span>

<span style="font-family: Courier New;"><hr>
  Bu bir örnek yazıdır.
   
      Bu da bir örnek paragraftır. Burada paragrafta yazı stilinin nasıl değiştiği gösterilmeye çalışılmıştır. CSS ile genel HTML etiketleri de yeniden düzenlenebilir.
   
<hr>
 <input type='text' /></span>

Her iki dosyayı da kaydedip çalıştırdığımızda sonuç aşağıdaki gibi olacaktır.

Gördüğünüz gibi yazıların boyutu küçüldü. Öğelerin renkleri değişti. Artık bundan sonra sayfamızda her paragraf, her metin kutusu ya da yatay çizgi yukarıdaki gibi görünecek.

Bu işte yeni iseniz yukarıdaki CSS kodu size biraz karmaşık görünebilir ancak burada temel mantığı kavramış olmanız önemli. Biçimlendirme komutlarını daha sonra çeşitli kaynaklardan öğrenerek bilgilerinizi zenginleştirebilirsiniz

Yukarıdaki kodda yazılan herşeyi sayfamızda kullanmadık. Örneğin tablo satırlarındaki yazıların biçimleri ya da liste kutularının nasıl değiştiği gibi… Siz sayfanıza bu öğeleri ekleyerek öğelerin nasıl değiştiğini gözlemleyebilirsiniz.

Dikkat edilmesi gereken bir başka nokta da HR ya da P gibi HTML etiketlerinin birebir aynı yazılmasının yanında bizim sayfamız için oluşturduğumuz BASLIK2 ve BASLIK3 gibi sitil kodlarını isimlendirirken önce nokta işaretini kullanmış olmamızdır. Eğer bir HTML etiketini değiştirmeyecekseniz siz de bu kurala mutlaka uymalısınız yoksa kodunuzda sorun çıkar.