Format teks dengan CSS

Mengatur warna teks dengan CSS

Untuk mengatur warna teks, CSS sudah menyediakan property untuk pewarnaan teks yaitu property Color. Satuan warna yang di didukung oleh CSS yakni Nama warna, HEX danRGB.

Contoh pewarnaan teks denga CSS sebagai berikut:

Contoh property Color di CSS

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
color:red;
}

#el1{
color:#000000;
}

#el2{
color:rgb(95,0,0);
}

</style>
</head>
<body>

<p id="el1" >element satu</p>
<p id="el2" >element dua</p>
<p>element tiga</p>



</body>
</html>

Preview

element satu

element dua

element tiga

Perhatikan element p tanpa id, teks di element tersebut di pengaruhi oleh element induknya . intinya, element induk bisa saja mempengaruhi element di dalamnya dengan catatan element tersebut tidak di kunci dengan CSS

Perataan teks dengan CSS

Untuk mengatur perataan teks dengan CSS, kita dapat menggunakan property text-align. Property text-align berfungsi untuk menentukan rata teks secara horizontal. Property ini memiliki empat value yaitu left, center, right dan justify.

Contoh penggunaan property text-align sebagai berikut:

Contoh property text-align di CSS

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

#el1 {
text-align:right;
}

#el2 {
text-align:center;
}

#el3 {
text-align:left;
}

#el4 {
text-align:justify;
}

</style>
</head>
<body>

<p id="el1" >paragraf 1 rata kana</p>
<p id="el2" >paragraf 2 rata tengah </p>
<p id="el3" >paragraf 3 rata kiri</p>
<p id="el4" >paragraf 4 rata kana dan kiri</p>

</body>
</html>

Preview

paragraf 1 rata kana

paragraf 2 rata tengah

paragraf 3 rata kiri

paragraf 4 rata kana dan kiri

Paragraf ke 4 contoh di atas , property text-align;justify mengatur teks rata kiri dan kana efeknya akan menambah spasi paragraf.

Dekorasi Teks dengan CSS

Mengatur dekorasi teks di CSS kita dapat menggunakan ptoperty text-decoration. property ini berfungsi untuk memberi line (garis) apada teks di element HTML.

Contoh property text-decoration di CSS

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

#el1 {
text-decoration:line-through;
}

#el2 {
text-decoration:overline;
}

#el3 {
text-decoration:underline;
}

a{
text-decoration:none;
}

</style>
</head>
<body>

<p id="el1" >paragraf 1</p>
<p id="el2" >paragraf 2 </p>
<p id="el3" >paragraf 3</p>
<a href="#" >link tanpa garis bawah</a>

</body>
</html>

Preview

paragraf 1

paragraf 2

paragraf 3

link tanpa garis bawah

Perhatikan property ini text-decoration:none; yang di tujukan terhadap element a, value none berfungsi menghilangkan garis bawah bagi element yang secara default sudah memiliki garis bawah seperti halnya element dengan tag <a>.

perubahan teks (Case) dengan CSS

kadeng kita lupa saat kita menulis sebuah artikel tentang besar kecilnya huruf saat di awal paragraf. Kasus seperti ini bisa atasi dengan mudah oleh CSS dengan property text-transform. property ini memiliki empat nilai yang bisa kita gunakan yakni capitalize, uppercase, lowercase dan none.

Contoh property text-transform di CSS

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

#el1 {
text-transform:capitalize;
}

#el2 {
text-transform:lowercase;
}

#el3 {
text-transform:uppercase;
}

a{
text-transform:none;
}

</style>
</head>
<body>

<p id="el1" >paragraf 1</p>
<p id="el2" >paragraf 2 </p>
<p id="el3" >paragraf 3</p>
<p id="el4" >paragraf 4</p>

</body>
</html>

Preview

paragraf 1

paragraf 2

paragraf 3

paragraf 4

text-transform:capitalize; berfungsi untuk memastikan huruf kapital pada setiap awal kalimat.

text-transform:lowercase; berfungsi untuk mengubah semua huruf menjadi kecil (bukan size).

text-transform:uppercase; berfungsi untuk megubah semua huruf menjadi kapital.

text-transform:none; menghilangkan case yang di atur oleh property (text-transform).

Mengatur indentasi teks dengan CSS

Indentation adalah jarak di awal baris text. Dengan CSS, kita dapat mengatur lebar jarak di awal baris teks dengan menggunakan property text-indent.

Contoh property text-indent di CSS

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

#el1 {
text-indent:50px;
}

#el2 {
text-indent:60px;
}

#el3 {
text-indent:70px;
}
</style>
</head>
<body>

<p id="el1" >paragraf 1</p>
<p id="el2" >paragraf 2 </p>
<p id="el3" >paragraf 3</p>

</body>
</html>

Preview

paragraf 1

paragraf 2

paragraf 3

Mengatur jarak huruf dengan CSS

Dengan CSS kita juga bisa menentukan kerapatan hurus pada teks kita dengan propertt CSS letter-case.

Value property bisa dengan menggunakan satuan ukurun seperty px, em, pt dll. Khusu untuk mengatur jarak normal, kita bisa menggunakan value normal.

Contoh property letter-spacing di CSS

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

#el1 {
letter-spacing:normal;
}

#el2 {
letter-spacing:2px;
}

#el3 {
letter-spacing:5px;
}
</style>
</head>
<body>

<p id="el1" >paragraf 1</p>
<p id="el2" >paragraf 2 </p>
<p id="el3" >paragraf 3</p>

</body>
</html>

Preview

paragraf 1

paragraf 2

paragraf 3

Mengatur jarak paragraf dengan CSS

Dengan CSS kita bisa menentuka jarak antar setiap paragraf dengan fungsi property line-height.

Contoh property line-height di CSS

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

#el1 {
letter-spacing:normal;
}

#el2 {
letter-spacing:2px;
}

#el3 {
letter-spacing:5px;
}
</style>
</head>
<body>

<p id="el1" >paragraf 1</p>
<p id="el2" >paragraf 2 </p>
<p id="el3" >paragraf 3</p>

</body>
</html>

Preview

paragraf 1

paragraf 2

paragraf 3

Mengatur arah teks dengan CSS

Dengan CSS kita dapat menentukan arah laju teks dengan property CSS direction. property ini memiliki dua value yakni ltr dan rtl.

Contoh property direction di CSS

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

#el1 {
direction:ltr;
}

#el2 {
direction:rtl;
}
</style>
</head>
<body>

<p id="el1" >paragraf 1</p>
<p id="el2" >paragraf 2 </p>

</body>
</html>

Preview

paragraf 1

paragraf 2

Mengatur jarak spasi dengan CSS

Dengan CSS kita juga bisa mengatur jarak spasi tiap kata dengan menggunakan property CSS word-spacing. property ini valuenya dengan satuan ukuran seperti px, em, pt dll. Untuk jarak spasi normal, kita bisa menggunakan Value normal.

Contoh property word-spacing di CSS

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>

#el1 {
word-spacing:normal;
}

#el2 {
word-spacing:10px;
}
</style>
</head>
<body>

<p id="el1" >Contoh penggunaan property word-spacing</p>
<p id="el2" >Contoh penggunaan property word-spacing</p>

</body>
</html>

Preview

Contoh penggunaan property word-spacing

Masih banyak lagi property untuk formating teks dengan CSS yang belum saya jelaskan di artikel ini. Insya ALLAH jika ada waktu saya akan tambah lagi tutorial property formating teks yang lain di lain waktu.

ZenTutorials