En Çok Kullanılan CSS Etiketleri

Web tasarımı dünyasına adım attığınızda, HTML ile sayfanızın temel iskeletini oluşturduktan sonra onu görsel olarak çekici hale getirmeniz gerekir. İşte bu noktada devreye CSS (Cascading Style Sheets – Basamaklı Stil Şablonları) girer. CSS, HTML ile yapılandırılmış bir belgenin renk, yazı tipi, boşluk ve düzen gibi sunum özelliklerini (görsel mimarisini) tanımlayan temel bir web teknolojisidir.

Yeni başlayanlar sektöre ilk girdiklerinde genellikle “CSS etiketleri” terimini kullansa da, teknik olarak CSS dilinde “etiket” (tag) bulunmaz; etiketler HTML’e aittir. CSS’te bunun yerine HTML etiketlerini hedefleyen Seçiciler (Selectors) ve bu etiketlere uygulanan Özellikler (Properties) bulunur. Bu rehberde, web sitenizi tasarlarken en çok ihtiyaç duyacağınız temel CSS seçicilerini ve özelliklerini örneklerle, modern SEO ve temiz kod standartlarına uygun bir şekilde öğreneceksiniz.

1. CSS Seçiciler (Selectors): Doğru Elemanı Hedeflemek

Herhangi bir stil (renk, boyut vb.) uygulamadan önce, HTML içindeki hangi elemanı değiştireceğimizi CSS’e bildirmemiz gerekir. Bunu seçiciler aracılığıyla yaparız. En sık kullanılan seçiciler şunlardır:

• Evrensel Seçici (*): Sayfadaki tüm elemanları istisnasız olarak seçer. Genellikle tarayıcıların kendi eklediği varsayılan boşlukları sıfırlamak (CSS reset) için kullanılır. * { margin: 0; padding: 0; }
• Tip / Etiket Seçici: Doğrudan HTML etiketinin adını (örn. p, h1, div) kullanarak sayfadaki o türe ait tüm elemanları seçer. h1 { color: red; } /* Sayfadaki tüm h1 ana başlıklarını kırmızı yapar */
• Sınıf (Class) Seçiciler (.sinif-adi): HTML’de class="..." niteliği verilmiş özel elemanları seçer. Başında nokta (.) işareti bulunur ve bir sayfada birden fazla elemana aynı anda uygulanabilir. .uyari-mesaji { color: orange; }
• Kimlik (ID) Seçiciler (#kimlik-adi): HTML’de id="..." niteliği verilmiş, sayfada sadece bir tane bulunması gereken benzersiz elemanı hedefler. Diyez (#) işareti ile başlar. #ana-logo { width: 200px; }

2. En Çok Kullanılan CSS Özellikleri (Properties)

Bir elemanı seçtikten sonra süslü parantezler { } arasına özellik (property) ve değer (value) çiftlerini yazarız. Web geliştirme sürecinde sürekli elinizin altında olması gereken özellikler şunlardır:

Metin ve Yazı Tipi Özellikleri (Typography)

İçeriğinizin okunabilirliği doğrudan kullanıcı deneyimini ve sitenizin kalma süresi (SEO) performansını etkiler.

• color: Metnin yazı rengini değiştirir. Renkleri İngilizce kelimelerle (red, blue), HEX kodlarıyla (#FF0000) veya RGB/RGBA formatında (rgb(255, 0, 0)) belirtebilirsiniz.
• font-family: Metnin yazı tipini belirler. Tarayıcının kullanıcının cihazında bir fontu bulamaması ihtimaline karşı virgülle ayrılarak alternatifler yazılır (Örn: Arial, sans-serif).
• font-size: Yazı boyutunu belirler. Genellikle px (piksel), em veya rem gibi esnek birimler tercih edilir.
• font-weight: Yazının kalınlığını ayarlar. Varsayılan normal, kalın bold veya 100 ile 900 arası rakamsal değerler alabilir.
• text-align: Metni sağa (right), sola (left), ortaya (center) veya iki yana (justify) yaslamak için kullanılır.

Örnek Kullanım:

p {
  color: #333333;
  font-family: 'Helvetica', sans-serif;
  font-size: 16px;
  text-align: justify;
}

Kutu Modeli (Box Model) Özellikleri

Modern web tasarımının en hayati kuralı şudur: HTML’deki her eleman CSS tarafından görünmez bir dikdörtgen kutu olarak işlenir. Bu kutuyu yönetmek sayfa tasarımının temelidir.

• width ve height: Kutunun genişliğini ve yüksekliğini belirler. Sabit (px) veya ekran boyutuna göre esneyen (%, vw, vh) birimler alabilir.
• padding (İç Boşluk): İçerik (metin/görsel) ile kenarlık (border) arasındaki nefes alma boşluğudur. Metnin sınır çizgilerine yapışmasını engeller.
• border (Kenarlık): Elemanın etrafına çizilen çizgidir. Genişlik, stil (düz, kesik) ve renk parametrelerini tek bir satırda alabilir.
• margin (Dış Boşluk): Bu elemanın, etrafındaki diğer HTML elemanlarıyla (diğer kutularla) arasındaki dış mesafedir. Kutuların birbirine girmesini engeller.

Örnek Kullanım:

.urun-karti {
  width: 50%;
  padding: 20px;
  border: 1px solid #cccccc;
  margin: 15px;
}

Arka Plan Özellikleri (Backgrounds)

• background-color: Elemanın arka plan rengini belirler.
• background-image: Arka plana bir görsel eklemek için url('dosya-yolu.jpg') fonksiyonuyla birlikte kullanılır.
• background-size: Arka plan görselinin kutu içine nasıl yerleşeceğini ayarlar. cover değeri, görselin en-boy oranını bozmadan kutuyu tamamen kaplamasını sağlar.

Görünüm ve Düzen Özellikleri (Layout)

Kutuların ekranda yan yana mı yoksa alt alta mı dizileceğini kontrol eden özelliklerdir.

• display: Elemanın sayfadaki yerleşim türünü belirler.
  • none: Elemanı sayfadan tamamen gizler.
  • block: Eleman bulunduğu satırı uçtan uca kaplar.
  • inline: Eleman sadece içeriği kadar yer kaplar ve paragraf içindeki kelimeler gibi yan yana dizilir.
  • flex: Modern web tasarımının kalbidir. Tek boyutlu (satır veya sütun) hizalamalar, elemanları ortalamak ve boşlukları dağıtmak için kullanılır.
  • grid: İki boyutlu (hem satır hem sütun içeren) gelişmiş, dergi veya gazete tarzı ızgara tasarımları kurgulamak için idealdir.

3. Sözde Sınıflar (Pseudo-Classes) ile Etkileşim Yaratmak

CSS sadece statik bir makyaj sunmaz; kullanıcının eylemlerine (örneğin fare hareketlerine) tepki vermenizi sağlayan dinamik kurallar içerir. Bunlara sözde sınıflar denir ve seçicilere iki nokta (:) ile eklenirler.

• :hover: Fare imleci (mouse) ile bir elemanın (genellikle linkler veya butonlar) üzerine gelindiğinde çalışacak stilleri belirler.
• :focus: Klavye (Tab tuşu) veya fare tıklaması ile bir form elemanına (örneğin metin giriş kutusu) odaklanıldığında devreye girer. Kullanılabilirlik (Erişilebilirlik) için çok önemlidir.
• :nth-child(n): Bir ebeveynin içindeki n. sıradaki çocuğu hedefler. (Örneğin bir listedeki sadece çift numaralı satırların arka plan rengini li:nth-child(even) şeklinde değiştirebilirsiniz).

Etkileşim Örneği:

.satin-al-butonu {
  background-color: blue;
  color: white;
  padding: 10px 20px;
}

/* Fare üzerine geldiğinde buton yeşil olsun */
.satin-al-butonu:hover {
  background-color: green;
}

4. Mobil Uyumluluk: Medya Sorguları (Media Queries)

Günümüzde Google, SEO sıralamalarında “Mobil Öncelikli” (Mobile-First) tasarıma büyük önem vermektedir. CSS’in en büyük güçlerinden biri, @media kurallarını kullanarak farklı ekran boyutlarına (cep telefonu, tablet, dev ekranlar) göre kuralları değiştirmesidir.

/* Masaüstü ekranlarda kutu %50 genişlikte */
.kutu {
  width: 50%;
}

/* Ekran 768 pikselin (telefon/küçük tablet) altına düştüğünde kutu %100 olsun */
@media (max-width: 768px) {
  .kutu {
    width: 100%;
  }
}

5. Temiz ve Ölçeklenebilir Bir CSS İçin En İyi Uygulamalar (Best Practices)

Uzman bir web geliştiricisi kodlarının sadece ekranda güzel görünmesine değil, aynı zamanda arama motorları ve sistem tarafından hızlı okunabilmesine de özen gösterir.

1. Mantıklı İsimlendirme Yapın (BEM Metodolojisi): Sınıf isimlerini .kirmizi-buyuk-kutu şeklinde görünümüne göre değil, .hata-mesaji şeklinde taşıdığı anlama göre verin. BEM (Block, Element, Modifier) gibi isimlendirme standartları, kodların başka stillerle çakışmasını engeller ve bakımını kolaylaştırır.
2. !important Kullanımını Bırakın: Bir stili zorla uygulamak için kuralların sonuna yazılan !important ifadesi, CSS’in basamaklı (cascade) mantığını bozar. İleride sistemde hata ayıklamayı kâbusa çevirir. Bunu sadece zorunlu durumlarda veya harici kütüphaneleri ezmek için kullanın.
3. Aşırı Spesifik (Derin) Seçicilerden Kaçının: CSS kurallarını div main ul li a span { color: red; } gibi iç içe çok derin yazmak tarayıcı eşleştirme hızını (render) düşürür. Bu da doğrudan Core Web Vitals (sayfa açılış hızı) puanınızı ve SEO’nuzu zedeler. Bunun yerine kısa ve net sınıflar kullanın.
4. Satır İçi (Inline) Stillerden Uzak Durun: <p style="color: red;"> şeklinde HTML içine gömülmüş stiller, dosyalarınızı gereksiz yere şişirir ve önbellekleme (cache) avantajlarını yok eder. Tüm özelliklerinizi her zaman harici bir .css dosyasında (External CSS) toplayın.

Özetle; HTML web sitenizin tuğlaları ve taşıyıcı kolonlarıyken, öğrendiğiniz bu CSS özellikleri o binayı estetik, esnek ve mobil uyumlu bir yaşam alanına dönüştüren mimari kurallardır. Yukarıda yer alan seçici ve özellikleri kendi bilgisayarınızda kurduğunuz HTML sayfalarında deneyerek, teoriyi doğrudan kendi tasarım yeteneklerinizle pekiştirebilirsiniz.