🌕
Başlat
Document Document

CSS Nedir?

CSS (Cascading Style Sheets), HTML ile oluşturulan web sayfalarının görsel tasarımını düzenlemek için kullanılan bir stil dilidir. CSS, web geliştiricilere web sayfalarının görünümünü kontrol etme imkanı sağlar ve HTML’in içerik yapısını stil bilgilerinden ayırarak daha temiz ve yönetilebilir kod yazmaya olanak tanır.

CSS’nin Temel Özellikleri

1. CSS Seçicileri

CSS, HTML elementlerine stil uygulamak için seçiciler kullanır. En yaygın kullanılan seçiciler şunlardır:

  • Element Seçicileri: Belirli bir HTML elementini seçer. Örneğin, p seçicisi tüm paragraf (<p>) elementlerini hedefler.
  • Class Seçicileri: Belirli bir sınıfa ait elementleri seçer. . sembolü ile kullanılır. Örneğin, .className.
  • ID Seçicileri: Belirli bir ID’ye sahip elementleri seçer. # sembolü ile kullanılır. Örneğin, #idName.
  • Evrensel Seçici: Tüm elementleri seçer. * sembolü ile kullanılır.
  • İlişkisel Seçiciler: Belirli bir hiyerarşiye göre elementleri seçer. Örneğin, div p iç içe geçmiş div içindeki tüm paragraf elementlerini seçer.

2. CSS Kuralları ve Bildirimleri

Bir CSS kuralı, seçici ve bildirim bloğundan oluşur. Bildirim bloğu, stil özellikleri ve değerlerinden oluşur. Örneğin:

cssKodu kopyalap { color: blue; font-size: 14px; }

Burada p seçicisi tüm paragraf elementlerini hedefler ve color ile font-size bildirimlerini uygular.

3. CSS Özellikleri

CSS’de kullanılabilecek birçok özellik vardır. Bunlar arasında renk, metin hizalama, kenarlık, arka plan ve daha birçok stil özelliği bulunur. Örneğin:

  • color: Metin rengini ayarlar.
  • background-color: Arka plan rengini ayarlar.
  • font-size: Metin boyutunu ayarlar.
  • margin: Dış boşlukları ayarlar.
  • padding: İç boşlukları ayarlar.
  • border: Kenarlık özelliklerini ayarlar.

4. CSS Yöntemleri

CSS stil bilgilerini HTML belgelerine eklemenin üç ana yolu vardır:

  • Inline CSS: HTML elementlerine style özelliği ile eklenir. Örneğin, <p style="color:blue;">.
  • Internal CSS: HTML belgesinin <head> bölümüne <style> etiketi ile eklenir.
  • External CSS: Ayrı bir .css dosyasına yazılır ve HTML belgesine <link> etiketi ile bağlanır. Örneğin:
htmlKodu kopyala<link rel="stylesheet" href="styles.css">

CSS’nin Avantajları

  • Tekrar Kullanılabilirlik: Bir kez tanımlanan stil kuralları, birden fazla HTML belgesinde kullanılabilir.
  • Bakım Kolaylığı: Stil ve içerik ayrıldığından, stil değişiklikleri merkezi bir dosyada yapılarak tüm web sitesi güncellenebilir.
  • Daha Hızlı Yükleme Süresi: CSS, dosya boyutunu küçültür ve tarayıcı önbelleklemesini optimize eder.
  • Esneklik ve Kontrol: CSS, web sayfalarının farklı cihazlar ve ekran boyutlarına uyumlu hale getirilmesini sağlar (responsive design).

CSS ile İlgili Yönlendirmeler

Öğrenme Kaynakları

Araçlar ve Kütüphaneler

  • Bootstrap: Modern ve duyarlı web tasarımları için popüler bir CSS frameworkü.
  • Sass: CSS için daha güçlü özellikler sağlayan bir CSS preprocessor.
  • PostCSS: CSS geliştirme sürecini optimize eden bir araç.

Sonuç

CSS, web sayfalarının görünüm ve hissiyatını kontrol etmenin anahtarıdır. CSS ile, HTML’in yapı ve içeriğini stil bilgilerinden ayırarak daha düzenli ve verimli web siteleri oluşturmak mümkündür. Modern web geliştirme dünyasında CSS, öğrenilmesi ve ustalaşılması gereken temel bir beceridir.

Yorum Bırakın

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.