Display özelliğinin aldığı değerler üç tanedir. Bunlar inline, block ve none dir.

Yazımızın devamında örneklerle açıklayarak daha iyi anlamanızı sağlayacağım
İlk olarak “inline” değerini açıklayalım. Inline değeri Tükçe’de aynı çizgide anlamına gelir. Örnekte link kullanarak göstereceğm. CSS’de bunu kullandığımız zaman linkler yan yana dizilirler. Örnek;

Önizleme;

Sonraki değerimiz, “block” değeri. Bu değeri yazdığımızda linklerimiz otomatik olarak alt alta dizilecektir. Yapmamız gereken sadece yukarıda yazdığımız display: inline; kısmını “block” yapmak. Örnek;

Önizleme;

Son olarak “none” değerimiz kaldı. Bu değer ise hiç anlamına geliyor. Display özelliğini none; yaptımızda linkler sayfamızda görünmeyecektir. Bu, link rengini arkaplan rengiyle aynı yapmak gibi değil. Sayfada hiç bir link olmaz. Örnek;

Önizleme;

Bu gizleme olayı daha çok JavaScript kodlarında kullanılıyor.

Bir HTML dosyasının içeriğinde, sadece bir öğeye verilebilecek bir değerdir id, basite indirgersek, id’ler HTML’de kullandığımız öğenin, nüfus kağıdıdır. Nasıl bizim nüfus kağıdımız sadece bize özelse, ve başkasıyla paylaşamazsak, id’ler de öğeye özeldir ve aynı sayfa içerisinde başka bir öğeyle id’sini paylaşmaz.

Eğer bir proje geliştiriyorsak, verdiğimiz id’yi aynı sayfada birden fazla olmamak koşuluyla istediğimiz kadar kullanabiliriz. Dolayısıyla id’ler site tasarımdan, kodlama aşamasına geçtiğinde, dikkatli kullanılması gereken kimliklendirmelerdir.
ID tamam, peki Class ne?

Demin ki örneğimizden devam edersek, class’lar id’lerden farklı olarak bir sayfa içerisinde istediğimiz kadar kullanabileceğimiz değerlerdir. Id’yi nüfus kağıdına benzetmiştik ya, class’lar bu durumda aynı oda içerisindeki “bütün erkekler”, “bütün kızlar”, “bütün gözlüklüler”, “bütün sarışın, mavi gözlü, şahane hatunlar” kümelerine benzetebiliriz.

id, sayfaların structure’ını oluşturmak için kullanılırlar. (header, content, sidebar, breadcrumb, footer gibi)

class’lar ise id’lerin oluşturduğu yapıya, ek stiller eklemek için kullanılırlar (kullanılmalıdırlar) aynı zamanda tipografik öğelerin de stilizasyonu için class’lar kullanılır. (span, p, quote, code, h1, h2 gibi)

ikisinin uyumlu çalışması kısa css dosyaları ve kolay güncellenebilir xhtml sayfaları demektir…
kaynak