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: CodePen, jsFiddle, 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.
- CSS
colorniteliğini kullanarak birinci seviye başlığın rengini sıcak pembe(
hotpink)yap.
- Birinci seviye başlığın altına
border-bottomniteliği ile 10px boyutunda noktalı(
dotted) çizgi atın ve rengini mor(
purple) yap.
- 2. düzey başlığı italik yap.
uletikemizin arka plan renk
background-colordeğ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
paddinniteliğine kullan.
- Linklerin üzerine gelindiğinde renginin yeşil(
green) olmasını sağla.
Çıktının resimdeki gibi gözükmesi gerekmektedir.
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:
- Çalışmanı CodePen, jsFiddle, veya Glitch gibi çevrimiçi bir düzenleyiciye kaydet.
- 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.