Bu değerlendirmede son birkaç yazıda öğrendiğiniz şeylerle basit metin belgelerini CSS kullanarak biçimlendireceğiz.
Başlangıç noktası
Başlangıç noktası dosyasını bilgisayarınıza indirin. Bu, hem HTML’yi hem de başlangıç noktası CSS’yi (belgenin başında) içeren tek bir dosyadır. İsterseniz, örneği yerel bilgisayarınızda oluşturduğunuzda bu CSS’yi ayrı bir dosyaya taşıyabilirsiniz. Alternatif olarak, aşağıdaki gibi bir çevrimiçi araç da kullanabilirsiniz: codepen, jsFiddle, veya Glitch.
CSS ile Çalışmak
Aşağıdaki örnek, CSS kullanılarak stillendirilmiş bir biyografiyi sayfasını gösteriyor. Kullandığımız CSS özellikleri aşağıdaki gibi – her biri MDN’deki özellik sayfasına bağlantı verir, bu da size kullanımıyla ilgili daha fazla bilgi verecektir.
Aşağıdaki kutuda, bazı CSS’lerin zaten yerinde olduğunu göreceksiniz. Bu öğe seçicileri, sınıfları ve sözde-sınıfları kullanarak belgenin bölümlerini seçer. CSS’de aşağıdaki değişiklikleri yapın:
- CSS
coloranahtar sözcüğünü kullanarak birinci seviye başlığı pembe yapın:
hotpink.
- Başlığa 10 piksel noktalı bir değer veren
border-bottomözelliğini ekleyin. Bu özellikle CSS
coloranahtar sözcüğünü de kullanırsınız. Mor rengi verin:
purple.
- 2. seviye başlığı yatık yazı yapın (italic).
- İletişim bilgilerinin olduğu
uliçin
background-colorolarak
#eeeeeeve
borderiçin
5px solid purpledeğerini verin.
paddingkullanarak içeriği kenardan bir miktar uzağa içe itin.
- Bağlantıları üzerine geldiğinde yeşil renge dönüştürün:
green
Sonuç olarak aşağıdaki gibi bir şey elde etmelisiniz:
Daha sonra MDN CSS referansında bu sayfada belirtilmeyen bazı özellikleri aramayı deneyin ve maceracı olun!
Burada yanlış bir cevap olmadığını unutmayın – öğrenmenizin bu aşamasında biraz eğlenmeyi göze alabilirsiniz.