CSS Dersleri (Giriş)

CSS (Cascading Style Sheets), Türkçe karşılığıyla Basamaklı Stil Şablonları, web sitelerinin görsel tasarımını, düzenini ve sunumunu kontrol etmek için kullanılan bir web teknolojisidir.

En basit tanımıyla: HTML bir web sitesinin iskeletini (metinler, butonlar, resimler) oluştururken, CSS bu iskelete kıyafet giydirir, renk verir ve onu estetik bir görünüme kavuşturur.

CSS Ne İşe Yarar?

CSS, bir web sayfasındaki her bir görsel ögenin nasıl görüneceğini belirler. Temel işlevlerini şu şekilde sıralayabiliriz:

• Renk ve Tipografi Yönetimi: Arka plan renklerini, yazı fontlarını, yazı boyutlarını ve renklerini kolayca değiştirebilirsiniz.

• Sayfa Düzeni (Layout): Web sitesindeki elementlerin yan yana mı, alt alta mı duracağını, aralarındaki boşlukların (margin ve padding) ne kadar olacağını ayarlar.

• Responsiveness (Mobil Uyumluluk): Bir web sitesinin bilgisayarda, tablette ve akıllı telefonda farklı ekran boyutlarına otomatik olarak uyum sağlamasını (Responsive Tasarım) mümkün kılar.

• Animasyonlar ve Efektler: Butonların üzerine gelindiğinde renk değiştirmesi, sayfa geçişleri, dönen logolar gibi hareketli görsel efektler CSS ile yapılabilir.

Blogger İçin CSS Eğitim Serisi Müfredatı

1. Bölüm: Temeller ve Blogger Entegrasyonu (Giriş)

• CSS Nedir ve Blogger'da Nereye Yazılır? * Conted-Type ve XML yapısı içinde <b:skin> ve <style> etiketlerinin kullanımı.

  • Doğru yere kod ekleme (Şablonu bozmadan CSS enjekte etmek).

• Seçiciler (Selectors) ve Blogger Sınıfları:

  • Blogger'ın kemik sınıflarını tanıma: .post-body, .sidebar, .header-outer, .widget.

  • !important kullanmadan ezme (CSS Specificity) kuralları.

2. Bölüm: Renkler, Tipografi ve Alan Yönetimi

• Modern Renk Teorisi ve Degradeler (Gradients):

  • Arka planlar için linear-gradient ve radial-gradient kullanımı.

  • Yazılara gradyan (renk geçişi) efekti verme (background-clip: text).

• Google Fonts Entegrasyonu ve Tipografi:

  • Blogger temasına font yükleme ve font eşleştirmeleri.

  • line-height, letter-spacing ile okunabilirliği artırma.

• Kutu Modeli (Box Model):

  • margin, padding, border ve box-sizing: border-box mantığı.

3. Bölüm: Modern Layout (Düzen) Teknikleri

• Flexbox ile Esnek Tasarımlar:

  • Yan yana listelenen bileşenler, responsive (mobil uyumlu) menüler.

  • Dikey ve yatayda kusursuz ortalama teknikleri.

• CSS Grid ve Popüler Tasarımlar:

  • Grid mantığına giriş.

  • Editorial Bento Grid Layout: Blogger ana sayfası veya öne çıkan postlar için bento kutu düzeni oluşturma.

4. Bölüm: İleri Seviye Efektler ve Bileşen Tasarımı

• Glassmorphism (Cam Efekti) Tasarımları:

  • backdrop-filter: blur() kullanımı.

  • Blogger için modern, şeffaf ve estetik Kod Kutusu (Code Box) tasarımı yapımı.

• CSS Animasyonları (Animations & Transitions):

  • hover efektleri, buton etkileşimleri.

  • Sitede dikkat çekmesi istenen alanlar için (örneğin bildirim kutuları veya duyurular) @keyframes ile custom hareketli animasyonlar.

5. Bölüm: Optimizasyon ve Responsive (Mobil) Tasarım

• Media Queries ile %100 Mobil Uyum:

  • Ekran boyutlarına göre (max-width, min-width) CSS şekillendirme.

• CSS Optimizasyonu:

• Kodları temizleme, tekrarlanan seçicileri birleştirme.

• Gereksiz yük oluşturabilecek (örneğin ağır SVG ikonlar yerine) saf CSS çözümleri üretme.

blogger,css,dersleri