Öğrendiklerini uygula

Son birkaç derste öğrendiklerinle, basit bir metin belgesine CSS'i kullanarak, onlara kendi stilini uygulayabileceğini gördün. Bu makele öğrendiklerini uygulayabileceğini gösterecektir.

Ön Koşul: Bu makaleye geçmeden önce CSS temelleri kısmının geri kalanını çalışmış  ve HTML temellerini anlamış olman gerekir (HTML'ye Giriş).
Amaç: Biraz CSS ile oyun oynamak ve yeni öğrendiğin bilgilerini test etmek.

Başlangıç noktası

Aşağıdaki canlı düzenleyicide çalışabilir veya kendi düzenleyicinle çalışmak için örnek dosyayı indirebilirsin. Bu, HTML içeren tek bir dosyadır ve içerisinde "Dahili CSS" tanımları vardır. Alternatif olarak çevrimiçi(online) kod düzenleyebileceğin şu sayfalarıda kullanabilirsin: CodePenjsFiddle, ve Glitch.

Not: Takıldığın noktalarda bizden yardım isteyebilirsin — Değerlendirme ve daha fazlası bölümüne bakabilirsin.

CSS ile çalışmak

Aşağıdaki etkileşimli örnek, CSS kullanılarak şekillendirilmiş bir biyografiyi göstermektedir. Kullandığım CSS nitelikleri aşağıdaki gibidir — her biri MDN'deki nitelik sayfasına bağlanır, bu size kullanımıyla ilgili daha fazla örnek verecektir.

Seçicilerden, h1 ve h2 gibi stil etiketlerinin bir karışımını kullandım, ancak aynı zamanda iş başlığı için bir sınıf oluşturdum ve onu şekillendirdim.

Kullandığım niteliklere farklı değerler girerek, bu biyografinin görünümünü değiştirin.

  1. CSS color niteliğini kullanarak birinci seviye başlığın rengini sıcak pembe(hotpink) yap.
  2. Birinci seviye başlığın altına border-bottom niteliği ile 10px boyutunda noktalı(dotted) çizgi atın ve rengini mor(purple) yap.
  3. 2. düzey başlığı italik yap.
  4. ul etikemizin arka plan renk background-color  değerini #eeeeee yap ve ayrıca mor(purple) renginde ve 5px kalınlığında çerçeve(border) ekle. İçeriği çerçeveden uzaklaştırmak için paddin niteliğine kullan.
  5. Linklerin üzerine gelindiğinde renginin yeşil(green) olmasını sağla.

Çıktının resimdeki gibi gözükmesi gerekmektedir.

Screenshot of how the example should look after completing the assessment.

MDN CSS reference safasında, burada bahsedilmeyen bazı özelliklere göz atıp maceraya atıl!

Burada yanlış bir cevap olmadığını unutma — öğreniminin bu aşamasında biraz eğlenebilirsin.

 

Değerlendirme ve daha fazlası

Çalışmanın değerlendirilmesini veya takıldığın bir noktada yardım almak istediğinde yapman gerekenler:

  1. Çalışmanı CodePenjsFiddle, veya Glitch gibi çevrimiçi bir düzenleyiciye kaydet.
  2. MDN Discourse forum Learning category sayfasına değerlendirme veya yardım için bir gönderi yaz. Gönderinde olması gerekenler:
    • "CSS ilk adımları için değerlendirme gerekmektedir" gibi açılayıcı bir metin.
    • Hali hazırda denediklerini ve bizden ne yapmamızı istediğinle ilgili ayrıntılar. Örneğin, bir niteliğe değer atarken sorunla karşılaşırsan veya yaptığının değerlendirilmesini istiyorsan.
    • Yukarıdaki 1. adımda bahsedilen çevrim içi düzenleyicilere kaydettiğin kodun bağlantısı. Bu, bizden istediğin değerlendirme ve yardım için gereklidir. Göremediğimiz kod üzerinden birisine yardım etmek çok zordur.
    • Yardım istediğin konunun sorusunu içeren sayfanın bağlantısı.

Sıradaki ne?

Bu ilk üniteyi tamamladığın için tebrikler. Artık CSS hakkında iyi bir genel anlayışa sahip olmalısın ve bir stil sayfasında olup bitenlerin çoğunu anlayabiliyorsundur. bir sonraki ünite olan CSS'in yapı taşlarında, birkaç önemli konuya derinlemesine bakmaya devam edeceğiz.

Bu ünitede

  1. CSS nedir
  2. CSS'e başlarken
  3. CSS nasıl yapılandırılır
  4. CSS nasıl çalışır
  5. Öğrendiklerini uygulama