Uygulama – Yeni bilgilerimizi kullanalım

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.

• font-family
• color
• border-bottom
• font-weight
• font-size
• font-style
• text-decoration

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:

1. CSS color anahtar sözcüğünü kullanarak birinci seviye başlığı pembe yapın: hotpink.
2. Başlığa 10 piksel noktalı bir değer veren border-bottom özelliğini ekleyin. Bu özellikle CSS color anahtar sözcüğünü de kullanırsınız. Mor rengi verin: purple.
3. 2. seviye başlığı yatık yazı yapın (italic).
4. İletişim bilgilerinin olduğu ul için background-color olarak #eeeeee ve border için 5px solid purple değerini verin. padding kullanarak içeriği kenardan bir miktar uzağa içe itin.
5. 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.