CSS ile ilgili dersleri içeren yazı dizimize devam ediyoruz. Geçtiğimiz derslerde hatırlarsanız, yazılara gölge verme ve kutulara gölge verme gibi içeriklerin yanı sıra, seçili alan rengini değiştirme ve yorum satırı ekleme gibi konuları da işlemiştik. Şimdi ise, harf dönüşümü konusunu inceliyor olacağız. Bu bağlamda, CSS ile kodlama yaparken, dilediğiniz metinlerin veya başlıkların, tamamen büyük ve tamamen küçük harflerden oluşmasını sağlayabiliyorsunuz. Buna ek olarak, sadece baş harfleri de otomatik olarak büyük hâle getirebilirsiniz. Dilerseniz, aşağıda yer alan tüm örnekleri inceleyerek, bu konuyu daha iyi anlıyor olacağız. Şimdi, anlatıma geçelim.

AYRICA: CSS ile Paragraf Girintisi Nasıl Yapılır?

CSS Kullanarak Büyük Küçük Harf Yapımı

1) Tüm harfleri büyük yapmak için CSS dosyasına aşağıdaki kodu ekleyin.

p {
text-transform: uppercase;
}

HTML sayfasındaki sonuç ise aşağıdaki gibi olacaktır.

<p>Bu harflerin tamamı büyük görünecektir.</p>

2) Tüm harfleri küçük yapmak için CSS dosyasına aşağıdaki kodu ekleyin.

p {
text-transform: lowercase;
}

HTML sayfasındaki sonuç ise aşağıdaki gibi olacaktır.

<p>Bu harflerin tamamı küçük görünecektir.</p>

3) Tüm baş harfleri büyük yapmak için CSS dosyasına aşağıdaki kodu ekleyin.

p {
text-transform: capitalize;
}

HTML sayfasındaki sonuç ise aşağıdaki gibi olacaktır.

<p>Bu metindeki yalnızca baş harfler büyük olacaktır.</p>

Not: Web sitenizdeki farklı bölümlere de yukarıdaki örneklerden bazılarını uygulamak için, "text-transform" özelliğini ilgili div elementlerine ait CSS kodları içerisine eklemeniz yeterli olacaktır.