Metin rengi (Text Color)
Renk özelliği, bir metnin rengini atamak için kullanılır. CSS’te renk atama,
- bir HEX değerle: “#ff0ee0”,
- bir RGB (red-green-blue, kırmızı-yeşil-mavi) değerle: “rgb(200,10,50)”,
- ya da bir renk adı belirtilerek gerçekleştirilebilir.
Bir sayfa için varsayılan renk, body seçicisi ile tanımlanır.
body {
color: green;
}
h1 {
color: #00ffec;
}
h2 {
color: rgb(255,110,210);
}
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: pink;
}
h1 {
color: #0effcd;
}
p.ex {
color: rgb(110,220,155);
}
</style>
</head>
<body>
<h1>ILGINC BIR RENK, HEXADECIMAL ATANMIS</h1>
<p>RGB KARMASI BIR RENK</p>
<p class="ex">BAKALIM HANGI RENK</p>
</body>
</html>
Metnin yerleştirilmesi
Text-align özelliği, metnin yatay yerleşimi için kullanılır. Metin ortalanabilir (centered), sola ya da sağa yanaşık olabilir veya ayrılan yere göre kendini ayarlayabilir.
h1 {
text-align: center;
}
p.date {
text-align: left;
}
p.main {
text-align: justify;
}
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
p.date {
text-align: left;
}
p.main {
text-align: justify;
}
</style>
</head>
<body>
<h1>CSS METIN YERLESTIRME</h1>
<p class="date">EYLUL, 2014</p>
<p class="main">YUMUSAK YONETILEN ULKENIN HALKI YALINDIR
SERT YONETIM HALKI KURNAZLASTIRIR</p>
<p><b>Not</b> KONFUCYUS'UN BU UNLU SOZU BUGUN DE GECERLI DEGIL MI?'</p>
</body>
</html>
Metin dekorasyonu
Text-decoration özelliği, metin içine bir dekorasyon ekleme ya da metinden bir dekorasyonu uzaklaştırma amacıyla kullanılır. text-decoration özelliği, genelde tasarım amacıyla bağlantılardan alt çizgileri uzaklaştırmak için kullanılır.
a {
text-decoration: none;
}
Ayrıca metni dekore etmek için de kullanılabilir:
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>MOBIL TEKNOLOJILER</h1>
<h2>iOS</h2>
<h3>iPad ile uygulama geliştirme</h3>
</body>
</html>
Metin dönüşümü
Metin dönüşüm (text-transform) özelliği, metin içinde büyük harf ve küçük harf karakterleri belirlemek için kullanılır. Ya karakterler büyük harfe veya küçük harfe çevrilir ya da her kelimenin ilk harfi büyük harf yapılır.
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="uppercase">ankara</p>
<p class="lowercase">ANKARA</p>
<p class="capitalize">ankara</p>
</body>
</html>
Metin girintileme (Text Indentation)
Text-indent özelliği, metnin ilk satırının ne kadar içeriden yazılacağını belirler.
p {
text-indent: 40px;
}
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-indent: 50px;
}
</style>
</head>
<body>
<p>Stefan Zweig. Musevi kökenli Avusturyalı yazar. 20. yüzyıl başında </br>Avrupa entelektuel dünyasının önemli isimlerinden. Avusturya aşığı bu büyük edebiyatçı Hitler zulmünden kaçtı; </br>Güney Amerika'ya sığındı. 1. Dünya Savaşı sona ermeden intihar etti.</p>
</body>
</html>
Metin özellikleri
| Özellik | Anlamı |
| color | Metnin rengini atama işlemini gerçekleştirir. |
| direction | Metnin yazma yönünü belirler. |
| letter-spacing | Metindeki karakterler arasındaki boşlukları artırır ya da azaltır. |
| line-height | Satır yüksekliğini atama işlemini gerçekleştirir. |
| text-align | Metnin yatay konumlandırılmasını belirler. |
| text-decoration | Metne eklenecek dekorasyonu belirler. |
| text-indent | Bir metin bloğundaki ilk satırın ne kadar içerden başlayacağını belirler. |
| text-shadow | Metne eklenecek gölge etkisini belirler. |
| text-transform | Metnin büyük-küçük harf durumunu belirler. |
| vertical-align | Bir elemanın düşey yerleşimini belirler. |
| white-space | Eleman içinde alfabe dışı karakterlerin nasıl işlem göreceğini belirler. |
| word-spacing | Bir metinde kelimeler arasında bulunan boşluk sayısını artırır ya da azaltır. |
