Css kullanarak metinleri nasıl düzenleriz şimdi ona bir bakalım. Bu makalemde kendi temamdan örnek vererek açıklamaya çalışacağım

Bu kodlar benim stil sayfamda yer alıyor. Şimdi tek tek açıklayayım.

İlk başta # kullandık neden kendimize görünmez bir sınır elde ettik. Css kodlarını yazarken sayfayı küçük küçük bölgelere böleriz. Bu bölgeler temadan temaya değişiklik gösterir. Örnek olarak yan menü, navigasyon, logo, footer gibi örnekleri verebiliriz.

Bu css kodunu sayfamda kullanmak için

kodunu kullandım. Bu kod logonun altında yer alan anasayfa arşiv vb sayfaların linklerinin olduğu bölümdür.

Şimdi tekrar dönelim en başa # den sonra “div” ismimizi yazıyoruz ve sonra {} parantezleri arasına da bu bölgedeki metin özelliklerini ve bölgenin sayfanın neresinde bulunacağını belirleyeceğiz.

font-family ile bu bölgedeki yazı tipimizi belirledik. Yazı tipi olarak çok beğendiğiniz bir yazıtipini yazmayın sakın. Çünkü eğer siteyi görüntüleyen kullanıcıların bilgisayarında bu font yüklü değilse site düzgün görüntülenemeyecektir. Ben arial kullanıyorum.

color ile yazı rengimizi belirledik. Başka renk kullanmak isterseniz burada var.

text-align ile metnimizin nereye yaslanacağını belirledik. Alabileceği değerler

right (sağa yaslı) , center (ortalanmış)

font-weight ile metnimizin kalınlık incelik durumunu belirledik. Kullanabileceğiniz değerler;

normal, bold(kalın), bolder(daha kalın), lighter(ince) Ayrıca sayıdeğerleri de yazabilirsiniz. 400 normale 700 de bold’a eşittir.

font-size ile metnimizin büyüklüğünü belirledik. Birimi pixel (px) olarak yazın

padding-top ile bölgemiz ile sayfanın en üstü arasındaki uzaklığı belirledik. Metnin konumunu deneme yanılma yöntemiyle yapacaksınız.

Emre arkadaşım da şöyle bir ek bilgi verdi. Teşekkür ederim;

#bölüm
padding-top:147px;
padding-left:25px;

yazma yerine,

#bölüm
padding:147px 25px 0 0;

şeklinde kodlayın.
Değerler sırasıyla üst, sol, alt ve sağı ifade eder.

#bölüm
padding:147px;

yazarsanız her dört yön için de aynı değer uygulanır.

#bölüm
padding:147px 150px;

yazarsanız üst ve aşağı için 147, sol ve sağ için 150px değerini tanımlamış olursunuz.

Bu şekilde tek bir satır halinde yazmamızın nedeni kod boyutunu küçültmek ve tarayıcının her kodu satır satır tanıma süresini kısaltmaktır. Elbette bu süre birkaç saliselik bir zaman dilimidir, ancak her salisenin site açılma süresinde bir önemi var bildiğiniz gibi.

text-transform ile büyük harf küçük harf olayını belirledik.Alabileceği değerler;