Dekorasi Tulisan Dengan CSS

Dekorasi Tulisan

Pada bagian ini akan mempelajari tentang properti berikut:

text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
text-decoration

Menambahkan Garis Kepada Tulisan

Properti text-decoration-line digunakan untuk menambahkan garis kepada tulisan.

Tips: Pada properti text-decoration-line dapat menggabungkan lebih dari satu nilai, seperti overline dan underline untuk menampilkan garis di atas dan di bawah tulisan.

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

p.ex {
  text-decoration: overline underline;
}
</style>
</head>
<body>

<h1>Dekorasi teks overline</h1>
<h2>Dekorasi teks line-through</h2>
<h3>Dekorasi teks underline</h3>
<p class="ex">Dekorasi teks overline underline.</p>

<p><strong>Catatan:</strong> Tidak disarankan untuk menggarisbawahi teks yang bukan tautan, karena sering membingungkan
pembaca.</p>

</body></html>

Jalankan Contoh

Mengatur Warna Garis

Properti text-decoration-color digunakan untuk mengatur warna garis.

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration-line: overline;
  text-decoration-color: red;
}

h2 {
  text-decoration-line: line-through;
  text-decoration-color: blue;
}

h3 {
  text-decoration-line: underline;
  text-decoration-color: green;  
}

p {
  text-decoration-line: overline underline;
  text-decoration-color: purple;  
}
</style>
</head>
<body>

<h1>Dekorasi teks overline</h1>
<h2>Dekorasi teks line-through</h2>
<h3>Dekorasi teks underline</h3>
<p>Dekorasi teks overline underline.</p>

</body></html>

Jalankan Contoh

Mengatur Style Garis

Properti text-decoration-style digunakan untuk mengatur style garis.

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration-line: underline;
  text-decoration-style: solid; /* this is default */
}

h2 {
  text-decoration-line: underline;
  text-decoration-style: double;
}

h3 {
  text-decoration-line: underline;
  text-decoration-style: dotted;  
}

p.ex1 {
  text-decoration-line: underline;
  text-decoration-style: dashed;  
}

p.ex2 {
  text-decoration-line: underline;
  text-decoration-style: wavy;  
}

p.ex3 {
  text-decoration-line: underline;
  text-decoration-color: red;  
  text-decoration-style: wavy;  
}
</style>
</head>
<body>

<h1>Judul 1</h1>
<h2>Judul 2</h2>
<h3>Judul 3</h3>
<p class="ex1">Sebuah paragraf.</p>
<p class="ex2">Paragraf lainnya.</p>
<p class="ex3">Paragraf lainnya.</p>

</body></html>

Jalankan Contoh

Mengatur Ketebalan Garis

Properti text-decoration-thickness digunakan untuk mengatur ketebalan garis.

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;  /* this is default */
}

h2 {
  text-decoration-line: underline;
  text-decoration-thickness: 5px;
}

h3 {
  text-decoration-line: underline;
  text-decoration-thickness: 25%;
}

p {
  text-decoration-line: underline;
  text-decoration-color: red;  
  text-decoration-style: double;
  text-decoration-thickness: 5px;  
}
</style>
</head>
<body>

<h1>Judul 1</h1>
<h2>Judul 2</h2>
<h3>Judul 3</h3>
<p>Sebuah paragraf.</p>

</body></html>

Jalankan Contoh

Properti Singkat/Gabungan Dekorasi Tulisan

Properti text-decoration merupakan properti singkat/gabungan untuk:

text-decoration-line (wajib)
text-decoration-color (opsional)
text-decoration-style (opsional)
text-decoration-thickness (opsional)

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration: underline;
}

h2 {
  text-decoration: underline red;
}

h3 {
  text-decoration: underline red double;
}

p {
  text-decoration: underline red double 5px;
}
</style>
</head>
<body>

<h1>Judul 1</h1>
<h2>Judul 2</h2>
<h3>Judul 3</h3>
<p>Sebuah paragraf.</p>

</body></html>

Jalankan Contoh

Contoh Lainnya

Semua tautan dalam HTML digarisbawahi secara default. Terkadang tautan diberi style tanpa garis bawah. Properti text-decoration: none; digunakan untuk menghapus garis bawah dari tautan, seperti contoh di bawah ini :

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
a {
  text-decoration: none;
}
</style>
</head>
<body>

<h1>Menggunakan text-decoration: none</h1>

<p>Tautan tanpa garis bawah: <a href="https://www.w3schools.com">W3Schools.com</a></p>

</body></html>

Jalankan Contoh

Referensi Semua Properti text-docoration CSS

Properti CSS text-decoration

Contoh

Menetapkan dekorasi tulisan yang berbeda untuk elemen <h1>, <h2>, dan <h3> :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

h4 {
  text-decoration: underline overline;
}
</style>
</head>
<body>

<h1>Ini judul 1</h1>
<h2>Ini judul 2</h2>
<h3>Ini judul 3</h3>
<h4>Ini judul 4</h4>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti text-decoration menentukan dekorasi yang ditambahkan kepada tulisan, dan merupakan properti singkat/gabungan untuk:

text-decoration-line (wajib)
text-decoration-color
text-decoration-style
text-decoration-thickness

Contoh

Menambahkan lebih banyak dekorasi tulisan:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration: underline overline dotted red;
}

h2 {
  text-decoration: underline wavy blue 5px;
}
</style>
</head>
<body>

<h1>Ini judul 1</h1>
<h2>Ini judul 2</h2>

</body></html>

Jalankan Contoh

Properti CSS text-decoration-color

Contoh

Menetapkan warna dekorasi tulisan menjadi merah:

<!DOCTYPE html>
<html>
<head>
<style>
p {
  text-decoration: underline;
  -webkit-text-decoration-color: red; /* Safari */  
  text-decoration-color: red;
}
</style>
</head>
<body>

<h1>Properti text-decoration-color</h1>

<p>Warna garis bawah sekarang menjadi merah!</p>

<p><strong>Catatan:</strong> Properti text-decoration-color tidak didukung di Edge sebelum 79.</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti text-decoration-color menentukan warna dekorasi tulisan (underlines, overlines, linethroughs).

Properti CSS text-decoration-line

Contoh

Menetapkan berbagai jenis garis dekorasi tulisan:

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
   -webkit-text-decoration-line: overline; /* Safari */
   text-decoration-line: overline; 
}

div.b {
   -webkit-text-decoration-line: underline; /* Safari */
   text-decoration-line: underline; 
}

div.c {
   -webkit-text-decoration-line: line-through; /* Safari */
   text-decoration-line: line-through; 
}

div.d {
   -webkit-text-decoration-line: overline underline; /* Safari */
   text-decoration-line: overline underline; 
}
</style>
</head>
<body>

<h1>Properti text-decoration-line</h1>

<div class="a">Ini adalah beberapa teks dengan text-decoration-line: overline.</div>
<br>

<div class="b">Ini adalah beberapa teks dengan text-decoration-line: underline.</div>
<br>

<div class="c">Ini adalah beberapa teks dengan text-decoration-line: line-through.</div>
<br>

<div class="d">Ini adalah beberapa teks dengan text-decoration-line: overline underline.</div>

<p><b>Catatan:</b> Properti text-decoration-line tidak didukung di Edge sebelumnya
79, dan hanya dengan awalan -webkit- di Safari.</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti text-decoration-line mengatur jenis garis dekorasi tulisan yang akan digunakan (underline, overline, line-through).

Catatan: Dapat menggabungkan lebih dari satu nilai, seperti underline dan overline untuk menampilkan garis di bawah tulisan dan di atas tulisan.

Properti CSS text-decoration-style

Contoh

Menetapkan berbagai jenis style untuk dekorasi tulisan:

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
  text-decoration-line: underline;
  text-decoration-style: solid;
}

div.b {
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

div.c {
  text-decoration-line: underline;
  text-decoration-style: double;
}

div.d {
  text-decoration-line: overline underline;
  text-decoration-style: wavy;
}
</style>
</head>
<body>

<h1>Properti text-decoration-style</h1>

<div class="a">Ini adalah beberapa teks dengan text-decoration-style: solid.</div>
<br>

<div class="b">Ini adalah beberapa teks dengan text-decoration-style: wavy.</div>
<br>

<div class="c">Ini adalah beberapa teks dengan text-decoration-style: double.</div>
<br>

<div class="d">Ini adalah beberapa teks dengan text-decoration-line: overline underline dan text-decoration-style: wavy.</div>

<p><b>Catatan:</b> Properti gtext-decoration-style tidak didukung di Edge sebelumnya
79.</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti text-decoration-style mengatur style dekorasi tulisan (seperti solid, wavy, dotted, dashed, double).

Properti CSS text-decoration-thickness

Contoh

Menetapkan ketebalan garis dekorasi yang berbeda untuk elemen <h1>, <h2>, <h3>, dan <h4> :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration: underline;
  text-decoration-thickness: auto;  
}

h2 {
  text-decoration: underline;
  text-decoration-thickness: 5px;  
}

h3 {
  text-decoration: underline;
  text-decoration-thickness: 50%;    
}

/* Use shorthand property */
h4 {
  text-decoration: underline solid red 50%;    
}
</style>
</head>
<body>

<h1>Ini judul 1</h1>
<h2>Ini judul 2</h2>
<h3>Ini judul 3</h3>
<h4>Ini judul 4</h4>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti text-decoration-thickness menentukan ketebalan garis dekorasi.

Tutorial sebelumnya : Perataan Tulisan Dengan CSS
Tutorial setelahnya : Mengubah Huruf Menjadi Besar, Kecil dan Kapital Dengan CSS
Semua Tutorial CSS : Tutorial CSS