CSS örnek

Örneklerle CSS

Yaptığımız tanımı biraz somutlaştırmak için iki kod örneği verelim. Kod deyince gözünüz korkmasın. CSS’in ayrıntılarını değil, mantığını anlatacak basit örnekler kullanacağız.

Örnek 1: CSS ile logonun yerleştirilmesi

#logo {
 width: 180px;
 position: absolute;
 left: 10px;
 top: 20px;
}

Yukarıdaki satırların anlamı şudur:

  • Yüklenen sayfada, ‘logo’ isimli öğeyi bul
  • Bu öğenin enini 180 piksel yap.
  • Sayfanın sol üst tarafına, kenardan 10 piksel, yukarıdan 20 piksel mesafeye yerleştir

Örnek 2: CSS ile ikinci seviye başlıkların düzenlenmesi

h2 {
 margin-top: 24px;
 color: red;
 font-size: 24px;
}

#sidebar-left h2 {
 font-size: 18px;
}

Bu CSS bloğu da şunu söylemektedir:

  • Yüklenen sayfadaki 2. derece başlıkları bul.
  • Bulduğun öğelerin tümünün rengini kırmızı, metin boyutunu 24 piksel yap.
  • Bir istisna ile; eğer bu başlık soldaki sütundaysa metin boyutunu 18piksel yap

Özetlersek

CSS, HTML ile etiketlenmiş içeriğin nasıl görüntüleneceğini tarif eder.

CSS, görselleştirme yükünü HTML’in sırtından alır ve bu bilgiyi birkaç dosyada toplar. Böylece site güncellemelerini ve bakımını kolaylaştırır. Tüm görselleştirme bilgisinin birkaç dosyada toplanması, aynı zamanda, veri trafiğinde de tasarruf sağlar. Görselleştirme yükünü sırtından atan HTML de, asıl amacına uygun olarak yalnızca içerik hakkında bilgi taşır ve böylece daha portatif hale gelir. CSS, responsive tasarım stratejisinin belki de en vazgeçilmez ayağıdır.

CSS kolay öğrenilebilen bir dildir. Kullanımı da kolay, hatta zevklidir. CSS sayesinde ön-taraf yazılımı (front-end development), günümüzün milyon çeşit cihaz-ekran ortamında bile insanın akıl sağlığını yitirmeden yapabileceği bir iş olarak kalmıştır.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir