Web Site Görünümünü ID Kullanarak Özelleştirme

Web sitesi tasarlarken belirli bir alanının görünüm özelliklerini değiştirirken az tercih edilen yöntemlerden bir tanesi de etikete verilen ID değerlerine göre görünümü özelleştirmektir. Bu yöntem web sitesi tasarlarken profesyonel tasarımcıların tercih etmediği bir yöntemdir. Bunun temel nedenlerinden bir tanesi de web siteniz büyüdükçe ID değerlerini takip etmeniz zorlaşır ve belirli bir süre sonra projenizde kod kalabalığı veya kod çirkinliği oluşmasına neden olur. Aynı zamanda verdiğiniz ID değerlerini de takip etmeniz gerekiyor. Çünkü aynı ID değerine sahip birkaç kod bloğunun olması web sitenizde sorunlara yol açabilir. Genelde ID değerleri JavaScript ile birlikte kullanılabilmek için kod bloklarına eklenir. Bunun temel nedeni de bir kod bloğunun yapacağı işlemleri tekilleştirmektir. Tüm bu olumsuzluklara rağmen bazen ID bazlı görünüm ayarlamasının kullanışlı olduğu durumlar da olabilir.
Örneğin sitede sadece 1 tane logo kısmı varsa bunun ID sini logo diye isimlendirerek işlemleri yapmak mümkündür. Biz de ID ile görünüm özelleştirme örneği için sitedeki logo kısmını örnek olarak değiştireceğiz. Aşağıdaki gibi bir HTML dosyası olduğunu varsayın. 

<div id="logo">
        <img src="img/logo.png"/>
        <h3>Blog Yazıları, Gelecek İle İlgili Tahminler, Teknoloji ve Yazılım, Veganlık, Yapay Zeka</h3>
</div>

Bu işlemden sonra logo ID’ne sahip div etiketini CSS dosyası içinde çağırmak için #logo yapısını kullanmamız lazım. Bu çağırma işleminden sonra kod görünüm ayarlarını düzenleyebiliriz. Örneğin genişlik, yükseklik ve kenarlık ayarlarını bu şekilde özelleştirelim. Bunun için aşağıdaki kodları yazdım.

<style>
    .logo{
        width:200px;
        height:100px;
        border:none;
    }
</style>

Bu kodları kendi yapınıza uydurarak denerseniz çalıştığınız görecekseniz. Bu makalede anlatılmak istenen en önemli konu ise CSS dosyası içinde ya da style tagları içinde herhangi bir ID’e sahip kod bloğunun görünümünü özelleştirmek için “#” karakterinin ID nin önüne gelerek işlemler yapılmasıdır. Bizim örneğimiz ID’miz logo olduğu için biz #logo diye kullandık. Eğer ID’miz sitelogo olsa idi #sitelogo şeklinde kullanacaktık. 
Umarım yazım faydalı olmuştur. Bu konuda sorularınız varsa lütfen sormaktan çekinmeyin.