CSS Text - WebHozz Blog

Ada bebeberapa cara untuk mengatur text dengan CSS diantaranya text color, Text Alignment, Text Decoration, Text Transformation. Sebagian cara-cara tersebut untuk mengatur text akan saya jelaskan fungsi dan penggunaannya sebagai berikut.
a.Text Color
Fungsi Properti warna digunakan untuk mengatur warna teks. Dengan CSS, warna yang paling sering ditentukan diantaranya :

nilai HEX – seperti “# ff0000”
nilai RGB – seperti “rgb (255,0,0)”
nama warna – seperti “red”:
pengaturan untuk mengubah warna dapat dilihat dibawah ini:
[CSS]
body {
color: blue;
}

h1 {
color: #00ff00;
}

h2 {
color: rgb(255,0,0);
}
[/CSS]

<body>
Webhozz Media
<h1>WebHozz Media</h1>
<h2>WebHozz Media</h2>
</body>

Maka hasilnya akan seperti ini:

Catatan: Untuk W3C CSS compliant: Jika Anda mendefinisikan properti warna, Anda juga harus menentukan properti background-color.

B. Text Alignment
Properti text-align digunakan untuk mengatur alignment horizontal teks. Teks dapat berpusat, atau sejajar ke kiri atau kanan, atau dibenarkan. Ketika text-align diatur ke ” justify”, setiap baris ditarik sehingga setiap baris memiliki lebar yang sama, dan margin kiri dan kanan lurus (seperti di majalah dan koran).
Penggunaan pada script css adalah sebagai berikut:

h1 {
text-align: center;
}

p.date {
text-align: right;
}

p.main {
text-align: justify;
}

Kode pada file htmlnya sebagai berikut:

<body>
<h1>webhozz.com text-align: center</h1>
<p class="date">webhozz.com  text-align: right</p>
<p class="main">webhozz.com text-align: justify</p>

</body>

Maka hasilnya akan seperti ini:

C. text-decoration
Properti text-decoration digunakan untuk mengatur atau menghapus dekorasi dari teks. Properti text-decoration banyak digunakan untuk menghilangkan garis bawah dari link untuk keperluan desain:

a {
text-decoration: none;
}

<a>WebHozz Media</a>

Maka hasilnya akan seperti ini

Hal ini juga dapat digunakan untuk menghias teks:

h1 {
text-decoration: overline;
}

h2 {
text-decoration: line-through;
}

h3 {
text-decoration: underline;
}

Kode html nya seperti ini:

<h1>text-decoration: overline</h1>
<h2>text-decoration: line-through</h2>
<h3>text-decoration: line-through</h3>

Maka hasilnya akan seperti ini:

Related posts: