CSS ID ve Class Kullanımı

CSS ID ve Class Kullanımı, CSS ID ve class nedir gibi sorularınızı bugün elimizden geldiğince cevaplayacağız. Öncelikli olarak CSS ve HTML kavramları nedir yazımızı okuyarak temel kavramları öğrenebilirsiniz. CSS dilinde ki en büyük temeller; id ve class terimleridir. Eğer bu kavramları doğru şekilde anlarsak dili de kolayca kavrayacağız. Temel kelime kavramları hakkında örneklemeler yaparak kelimelerin anlamlarını anlatmaya çalışacağız.

İlgili Yazı : Responsive Tasarım Nedir

CSS ID ve Class Kullanımı

İnternet sitesi programcıları ve tasarımları arasında en popüler kavramlar arasında yer almaktadır. Bu kavramları İnternet sayfasının her bölümünde sıkça rastlayabilirsiniz. Elbette ki birbirinden farklı işlevlerde olabilir fakat temel kavramları hemen hemen benzerlik göstermektedir.

• CSS ID Nedir : Nesneye kimlik atayarak nesne üzerindeki belirli özelliklerin değiştirilmesini sağlamaktadır. Tıpkı kimlik numarası gibi benzersiz kavram atanarak belirlenen nesnenin özelliğini sadece ona özel kılmaktadır. HTML ve CSS alanında kullanımları farklıdır.
• CSS Class Nedir : İD ile aynı özellikleri taşımaktadır. Sadece id tanımlanan nesneler benzersiz ve tektir. Fakat class atanan nesneler ise birden fazla sayıda bulunabilir. Kodlama alanında yapılan en büyük yanlışlardan birincisi; id ve class ögelerini doğru yerlerde kullanmamaktır.

İlgili Yazı : Web Tasarımcı Olmak

HTML’de Nasıl Kullanılır ?

<div id="birincidiv">

<div class="icdiv"></div><div class="icdiv"></div><div class="icdiv"></div>


</div>

Örnekte görüldüğü üzere id atanan div benzersizdir. Sadece bir kez kullanılır ve aynı id; aynı sayfada tekrarlanmaz. Şöyle açıklayalım:

<div id="birincidiv"></div>

<div id="birincidiv"></div>

Aynı sayfada iki kez bu şekilde div kullanamazsınız. Hatalı kodlama olur ve sitenin HTML kod testlerinde; hata veya uyarı maddeleriyle karşılaşabilirsiniz. Fakat burada en sık karşılaştığımız soru ise şu:

Farklı sayfalarda aynı içeriği kullanabilir miyim? Elbette, evet !

Stil Sayfasında Nasıl Kullanılır ?

.css uzantılı sayfamıza giriş yaptık. Yeni nesil teknolojilerde stil sayfası; .scss, .less uzantılarıyla da yer almaktadır. Bu sebeple sitemizin ana sayfa kodlarında stil sayfasına nasıl yer verildiğini incelemelisiniz. Daha sonra sayfa içerisine girdikten sonra yer alan kodların arasına yada yeni sayfamızın içerisine kodlarımızı yazmaya başlayabiliriz.

1. Eğer id ile nesnenin özellikleri belirlenecekse; #atanankimlik {buraya özellikler;}
2. Eğer class ile nesnenin özellikleri belirlenecekse; .atanankimlik {buraya özellikler;}

Class ile ID arasında tek yazım farkı budur. Birisinde ‘#’ simgesiyle belirtilirken bir diğerinde ise ‘.’ işaretiyle nesnenin seçme işlemi tamamlanmaktadır.

İlgili Yazı : Meta Etiketi Nedir

Fark Nedir ? CSS ID ve Class Kullanımı 

Web tasarımı sektöründe yer almak istiyorsanız veya bu alanda projeler üretmek istiyorsanız o halde bu diyeceklerimizi dikkatli şekilde dinleyin. Dünya standartları doğrultusunda; erişilebilir ve kullanımı hakkında web sitesi tasarımı yapmak istiyorsanız bu uyarıları göz önünde bulundurarak tasarım gerçekleştirmelisiniz. Bu konuda yaptığımız araştırmalara göre şu yargıyla ulaştık;

Görme engelli kişiler; metnin üzerine geldiğinde kodlarına göre mesajlar vermektedir. Web sitesi sadece bir kişiye değil milyonlarca kişiye hizmet verdiğinden dolayı herkes tarafından anlaşılabilir olması gerekmektedir. Yazılan kod satırları sizin tarafınızca sadece görünüm olarak nitelendirilebilir. Fakat ziyaret eden farklı kişiler tarafından farklı mesajlar yaratabilir. Belki de hiç bilmediğimiz bir faktör bile İnternet sitesinin kullanımını zorlaştırmaktadır. Bu sebeple kodladığınız sitelerde ki hataları dikkate alarak ilerlemenizi tavsiye ederiz.