Evet şimdiye kadar bir CSS dosyasının nasıl oluşturulduğu, nasıl çalıştırıldığı ve oluşturulma yollarına dair örnekler gördük. Artık konu ile ilgili temel bilgilere sahip olduğumuzu varsayıyoruz. Bundan sonra devam edeceğimiz yazılarımızın daha kolay anlaşılabilmesi için şimdi CSS kodları kullanarak yazı ve fontlara nasıl şekil ve etkiler vereceğimizi görelim.
Önce kodlarımızı ve ne işe yaradıklarını anlatalım daha sonra basit bir örnekle pekiştirelim isterseniz.
| Kod | Örnek Kullanım Şekli | Etkisi |
| font-family | Arial, Helvetica, sans-serif | Kullanılan yazı tipini belirler |
| font-size | 5pt, 12px gibi değerler ya da xx-small, large gibi terimler kullanılır. | Yazı büyüklüğünü ayarlar |
| font-style | italic, normal, oblique | Yazı stilini ayarlamak için kullanılır. (eğik ya da düz) |
| font-weight | bold, bolder, lighter, normal | Yazı kalınlığını ayarlar. İnce ya da kalın |
| font-variant | normal, small-caps | Özellikle başlıklarda çok kullanışlıdır. small-caps seçildiği takdirde yazıyı büyük harflere çevirir ve her kelimenin ilk harfinin puntosunu biraz daha büyük yapar. |
| text-transform | none, capitalize, lovercase, uppercase | Yazı harflerini büyük-küçük olarak değiştirmekte kullanılır. Capitalize seçilirse her kelimenin ilk harfi büyük harfe çevirilir. Lovercase seçilirse yazının bütün harfleri küçük olur. Uppercase seçilirse yazıdaki bütün harfler büyük olacaktır. |
| text-decoration | blink, line-through, none, overline, underline | Yazının altını, üstünü veya üzerini çizmek için kullanılabilir. |
| text-align | left, right, center, justify | Yazının sağa ya da sola hizalanması, ortalanması veya her iki yana yaslanması işlevini yönetir. |
| text-indent | pt, px, cm değerlerinden bir ölçü | Paragraf başlarının sol marjinden ne kadar uzak olacağını ayarlar |
| letter-spacing | normal ya da pt, px, cm değerlerinden bir bir birim | Harfler arasında ne kadar uzaklık bulunacağını tayin eder |
| word-spacing | normal ya da pt, px, cm değerlerinden bir birim | Kelimeler arasındaki uzaklığı belirler. |
| vertical-align | baseline, buttom, middle, sub, super, text-buttom, text-top, top | Yazının dikey hizasını kontrol etmekte kullanılır. |
| line-height | normal ya da pt, px, cm değerlerinden bir ölçü veya yüzde cinsinden bir değer | Yazıda satırlar arasındaki boşluğu ayarlamak için kullanılır. |
Bundan sonra yazacağınız CSS kodlarında yukarıdaki tabloda gördüğünüz değerler size yardımcı olacaktır. İsterseniz sizi meraklandırmadan tabloda da sık sık karşılaşılan pt, px ya da cm gibi değerlerin ne anlama geldiğini açıklayayım
px: Piksel demektir ve ekran çözünürlüğüne bağlıdır yani her çözünürlükte aynı sonucu alamayabilirsiniz. Piksel bilgisayarda en sık kullanılan ölçü birimlerinden biridir.
em: Kullanılmakta olan fonttaki “m” harfinin genişliğini baz alır. Harfin genişliği ekran çözünürlüğüne bağlı olduğundan dolayı bu da göreceli bir birimdir yani ortama göre değişebilir.
pt: Punto demektir ve nokta baz alınır. Göreceli değildir ve her ortamda aynı sonucu verir. 1 Punto = 1/72 inç
cm: Santimetre
mm: Milimetre
in: İnç (1 inç = 2.54 cm)
Şimdi de dilerseniz bu kodları kullanarak örnek bir uygulama yapalım
<style type="text/css">
.poz
{
font-weight: bolder;
color: #936;
font-style: oblique;
font-family: Arial, Helvetica, sans-serif;
font-variant: small-caps;
text-transform: uppercase;
text-decoration: blink;
vertical-align: baseline;
line-height: 1cm;
text-align:justify;
text-indent: inherit;
letter-spacing: 5px;
word-spacing: 15px;
vertical-align: text-bottom;
}
</style>
<p>Ben</p>
<p class="poz">Bir başka deyişle ben... Benlik duygusu Nedir? Nasıl bir duygudur? İnsanda ya eğer içgüdüsel bir davranış değilse diğer canlı türlerinden ortaya çıkması nasıl açıklanabilir. Freud bu temel soru benden yüz yıl önce sormuştu ancak manzaraya şöyle bir göz attığımızda bir arpa boyu yol alamadığımızı esefle görüyoruz.
.</p>
Yukarıdaki örnek kodda önce tablodaki kodlardan bazılarını kullanarak bir stil kodu oluşturduk ve ardındani oluşturduğumuz bu stili bir paragrafa atadık. Eğer bu kodu alır birebir kopyalayarak çalıştırırsanız kodların etkisini görebilirsiniz ve hatta yukarıdaki tablodan da yararlanarak belli parametreleri değiştirerek farkları görebilirsiniz. Hepinize kolay gelsin