Yükleniyor...

CSS Giriş

CSS (Cascading Style Sheets) bir web sayfasının görünümünü ve stilini belirleyen dildir. HTML bir evin temelini ve duvarlarını inşa ederken, CSS o evi odaları dekore etmek gibi güzelleştirir. Bu sayede web siteniz yalnızca işlevsel değil, görsel olarak da çekici hale gelir.
Bir kişisel web sitesinde, CSS başlıkların, renklerin ve fotoğrafların uyumlu görünmesini sağlar. Bir blog yazılarının okunabilirliğini artırır. Bir e-ticaret sitesinde, ürünler ve satın alma butonları CSS sayesinde öne çıkar. Bir haber sitesinde, manşetler ve kategoriler düzenli bir şekilde sunulur.
Bu içerikte CSS’in temel kullanımını öğrenecek, basit kodlarla nasıl renk, yazı tipi ve hizalama ayarları yapıldığını göreceksiniz. Amacımız, HTML ile hazırladığınız yapıya CSS ile mektup yazıyormuş gibi stil talimatları vermek ve sitenizi daha profesyonel göstermek olacak.

Temel Örnek

css
CSS Code 
/* Change color and size of main title */
h1 {
color: blue; /* Title text will be blue */
font-size: 28px; /* Title font size will be 28 pixels */
}

Yukarıdaki örnekte temel CSS kullanımını görüyoruz.

  1. Seçici (selector) h1: Hangi HTML elementine stil uygulanacağını belirtir. Burada tüm <h1> başlıklarını seçtik.
  2. Süslü parantezler { }: Bu parantezlerin içine stil tanımları yazılır.
  3. Özellik ve değer (property:value):
    * color: blue; başlık metnini mavi yapar.
    * font-size: 28px; başlığın yazı boyutunu 28 piksel yapar.
    CSS’in temel sözdizimi seçici { özellik: değer; } şeklindedir. Bu stil bir kişisel blog başlığını öne çıkarabilir veya e-ticaret sitesinde mağaza adınızı belirgin hale getirebilir.
    Başlangıçta öğrencilerin kafasını karıştıran nokta, stilin otomatik uygulanmadığıdır. Her elemente özel olarak CSS talimatı vermeniz gerekir. Bu mantıkla CSS, tarayıcıya “bu elementi böyle göster” diyen bir kılavuz gibidir.

Pratik Örnek

css
CSS Code 
/* Simple layout for a blog page */
body {
background-color: #f8f8f8; /* Light gray background */
font-family: Arial, sans-serif; /* Clean and readable font */
}

h1 {
color: darkgreen; /* Main title in dark green */
text-align: center; /* Centered title */
}

p {
color: #333; /* Dark gray text for better readability */
line-height: 1.6; /* Comfortable line spacing */
}

En iyi uygulamalar ve yaygın hatalar
En iyi uygulamalar:

  1. Mobil öncelikli tasarım (mobile-first design): Önce küçük ekranları düşünerek başla.
  2. Temiz ve anlaşılır kod: Yorum satırları ekleyerek gelecekte düzenlemeyi kolaylaştır.
  3. Basit seçiciler kullan: Karmaşık seçiciler siteyi yavaşlatabilir.

  4. Çoklu tarayıcı testi yap: Tüm ziyaretçiler aynı deneyimi yaşasın.
    Yaygın hatalar:

  5. Özellik çakışmaları (specificity conflicts): Çok fazla !important kullanmak yönetimi zorlaştırır.

  6. Yanıt vermeyen (responsive) tasarım eksikliği: Mobilde kötü görünen siteler kullanıcı kaybettirir.
  7. Gereksiz stil tekrarları: Aynı elemente farklı dosyalarda sürekli stil vermek karmaşa yaratır.
  8. Kod hatalarını görmezden gelmek: Küçük bir noktalı virgül eksikliği tüm stili bozabilir.
    Hata ayıklama ipucu:
    Tarayıcının Geliştirici Araçlarını (DevTools) kullanarak hangi stilin uygulandığını görebilir ve anında düzenleyebilirsiniz.

📊 Hızlı Referans

Property/Method Description Example
color Metnin rengini değiştirir color: red;
font-size Metin boyutunu belirler font-size: 16px;
background-color Arka plan rengini değiştirir background-color: yellow;
text-align Metni yatayda hizalar text-align: center;
line-height Satır aralığını kontrol eder line-height: 1.5;
font-family Yazı tipini belirler font-family: Arial;

Özet ve sonraki adımlar
Bu içerikte, CSS’in web sayfalarına stil ve görsellik katmak için kullanıldığını öğrendiniz. HTML yapıyı oluşturur, CSS ise odaları dekore ederek siteyi profesyonel gösterir.
Ana çıkarımlar:

  • CSS, seçiciler ve özellikler üzerinden çalışır.
  • Renk, boyut, hizalama ve aralık gibi görsel unsurları kontrol eder.

  • Doğru kullanıldığında, kullanıcı deneyimini ciddi şekilde iyileştirir.
    Sonraki adımlar:

  • Kutu Modeli (Box Model) üzerine çalışın.

  • Media Queries ile duyarlı tasarımlar oluşturun.
  • Basit projelerde CSS’i JavaScript ile etkileşimli hale getirin.
    Kendi blog veya kişisel sitenizde deneme yaparak öğrenmeyi pekiştirin. Düzenli pratik, temel CSS bilgilerinizi kalıcı hale getirir.

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu konudaki anlayışınızı pratik sorularla test edin.

❓
4
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 15
Css Ders