CSS kullanarak metinleri biçimlendirmek için bir dizi stil özelliği kullanabilirsiniz. İşte temel metin biçimlendirme örnekleri:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Metin Biçimlendirme Örneği</title>
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
}
section {
padding: 2em;
}
h1 {
color: #333;
text-align: center;
}
p {
margin-bottom: 1em;
}
.highlight {
background-color: #ffecb3;
padding: 0.5em;
}
.center {
text-align: center;
}
.uppercase {
text-transform: uppercase;
}
.capitalize {
text-transform: capitalize;
}
.lowercase {
text-transform: lowercase;
}
.italic {
font-style: italic;
}
.bold {
font-weight: bold;
}
.underline {
text-decoration: underline;
}
.line-through {
text-decoration: line-through;
}
.small {
font-size: 0.8em;
}
</style>
</head>
<body>
<section>
<h1>Metin Biçimlendirme Örneği</h1>
<p>Normal metin içeriği buraya gelecek.</p>
<p class="highlight">Vurgulu metin içeriği burada.</p>
<p class="center">Ortalanmış metin içeriği burada.</p>
<p class="uppercase">BÜYÜK HARF METİN</p>
<p class="capitalize">Başlık Gibi Metin</p>
<p class="lowercase">küçük harf metin</p>
<p class="italic">İtalik metin içeriği burada.</p>
<p class="bold">Kalın metin içeriği burada.</p>
<p class="underline">Altı çizili metin içeriği burada.</p>
<p class="line-through">Üzeri Çizili Metin</p>
<p class="small">Küçük boyutlu metin içeriği burada.</p>
</section>
</body>
</html>
Bu örnekte:
color,text-align,margin-bottom, vefont-sizegibi özellikler kullanılarak metin ve başlık biçimlendirilmiştir..highlight,.center,.uppercase,.capitalize,.lowercase,.italic,.bold,.underline,.line-through, ve.smallgibi sınıflar kullanılarak özel stil özellikleri eklenmiştir.
Bu stil özelliklerini kullanarak metinleri ihtiyacınıza göre düzenleyebilir veya kendi özel stil sınıflarınızı ekleyebilirsiniz.