CSS ile İlk Harfi Özelleştirmek

Bazı haber sitelerinde veya bloglarda yazının ilk harfini biraz daha vurgulayarak tasarıma küçük dokunuş yapılmaktadır. Açıkcası bu dokunuş tasarımsal olarak hoş görünebilmektedir. Bu küçük dokunuş örneğini CSS'deki :first-letter özelliğini kullanarak yapmaya çalışacağız.
Örnek 1 (HTML)

<p>Merhaba burası örnek bir yazı</p>

Örneğimizin iskeletini hazırladık. Bu iskeleti CSS ile bir vücuda kavuşturalım.
Örnek 1 (CSS)

p {
   font-weight: bold;
   font-size: 18px;
}
p:first-letter {
   color: #307891;
   font-size: 40px;
}

Canlı bir örneğini burada test edelim.
Örnek 1 (Sonuç)

---

Biraz daha farklı bir tasarım ile örneklendirme yapalım.
Örnek 2 (HTML)

<span>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.
</span>

HTML sonrası CSS makyajını yapalım.
Örnek 2 (CSS)

span {
   display:block;
   line-height:2em;
}
span:first-letter {
   background-color: #fa9db7;
   font-size: 1.7em;
   line-height: 1.8em;
   border-radius: 5px;
   padding: 0px 10px;
   margin-top: 5px;
   margin-right: 0.6em;
   display: inline-block;
   float: left;
   color: #fff;
}

İkinci örneği canlı test edelim.
Örnek 2 (Sonuç)