Css Text Biçimlendirme

Bu dersimizde web sayfalarındaki yazılara belli css text özelliklerini nasıl aktaracağımızı öğrenelim.

Css Color Nedir ve Nasıl Kullanılır ?

Bir yazıya renk vermek için color özelliğini kullanırız. Bu aşamada ister body seviyesinde ister etiket seviyesinde bir renk kullanabiliriz.

body {
    color: blue;
}

h1 {
    color: green;
}

Örnek 1 için tıklayınız.

Css Text Decoration Nedir ve Nasıl Kullanılır ?

Linkler için tarayıcılar varsayılan olarak link yazılarının altını çizerler ancak biz bunu css ile değiştirebiliriz.

a {
   text-decoration:none;
}

Örnek 2 için tıklayınız.

text-decoration özelliğinin alabileceği farklı değerler vardır.

text-decoration: overline, özelliği yazının üstüne bir çizgi ekler.

text-decoration: line-through, özelliği yazının ortasına bir çizgi ekler.

text-decoration: underline, özelliği yazının altına bir çizgi ekler.

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

Örnek 3 için tıklayınız.

Css Text Transformation Nedir ve Nasıl Kullanılır ?

Css text transformation özelliği yazı karakterlerini büyük harften küçük harfe, küçük haften büyük harfe ya da kelimelerin baş harflerinin büyük harfe çevrilmesinde kullanılır.

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

.capitalize {
    text-transform: capitalize;
}

Örneğimizde;

** text-transform:uppercase; diyerek tüm harfleri büyük harfe çevirmiş oluruz.

** text-transform:lowercase; diyerek tüm harfleri küçük harfe çevirmiş oluruz.

** text-transform:capitalize; diyerek cümle içindeki her kelimenin baş harfini büyük yapmış oluruz.

Örnek 4 için tıklayınız.

Css Text Indentation Nedir ve Nasıl Kullanılır ?

Css text indent özelliği paragraf başı yapmak için kullanılır.

p {
    text-indent: 50px;
}

Örnek 5 için tıklayınız.

Css Letter Spacing Nedir ve Nasıl Kullanılır ?

Css letter spacing, her bir harf arasındaki mesafeyi belirler.

p {
    letter-spacing:1.2px;
}

Örneğimizde her bir harf arasındaki mesafe 1.2px olur.

Örnek 6 için tıklayınız.

Css Line Height Nedir ve Nasıl Kullanılır ?

Css Line Height özelliği satır aralıklarını belirler. 

.small {
    line-height: 0.7;
}

.big {
    line-height: 1.8;
}

Örnek 7 için tıklayınız.

Css Word Spacing Nedir ve Nasıl Kullanılır ?

Css Word Spacing ile kelime arasındaki boşlukları belirleyiz.

h1 {
    word-spacing: 5px;
}

h2 {
    word-spacing: -5px;
}

<h1> için her kelime aralığı 5px iken <h2> etiketi için -5px olarak belirttik.

Örnek 8 için tıklayınız.