Mengatur Tautan Dengan CSS

Dengan CSS, tautan dapat diatur dengan berbagai cara.

Sytle pada Tautan

Tautan dapat diberi style dengan properti CSS apa pun (misalnya color, font-family, background , dll.).

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
a {
  color: hotpink;
}
</style>
</head>
<body>

<h2>Memberi Style tautan dengan warna</h2>

<p><b><a href="default.asp" target="_blank">Ini adalah tautan</a></b></p>

</body></html>

Jalankan Contoh

Selain itu, style tautan dapat berbeda tergantung pada status tautan tersebut.

Empat status tautan adalah:

a:link – tautan normal yang belum digunakan
a:visited – tautan yang telah digunakan pengguna
a:hover – tautan saat pengguna mengarahkan kursor ke atasnya
a:active – tautan saat diklik

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}
</style>
</head>
<body>

<h2>Menata style pada tautan tergantung pada status tautan tersebut</h2>

<p><b><a href="default.asp" target="_blank">Ini adalah tautan</a></b></p>
<p><b>Catatan:</b> a:hover HARUS muncul setelah a:link dan a:visited dalam definisi CSS agar efektif.</p>
<p><b>Catatan:</b> a:active HARUS muncul setelah a:hover dalam definisi CSS agar efektif.</p>

</body></html>

Jalankan Contoh

Saat mengatur style untuk beberapa status tautan, ada beberapa aturan, yaitu :

a:hover HARUS muncul setelah a:link dan a:visited
a:active HARUS muncul setelah a:hover

Tautan Dan Dekorasi Tulisan

Properti text-decoration sebagian besar digunakan untuk menghapus garis bawah dari tautan:

Contoh

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

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:active {
  text-decoration: underline;
}
</style>
</head>
<body>

<h2>Menata style tautan dengan properti text-decoration</h2>

<p><b><a href="default.asp" target="_blank">Ini adalah tautan</a></b></p>
<p><b>Catatan:</b> a:hover HARUS muncul setelah a:link dan a:visited dalam definisi CSS agar efektif.</p>
<p><b>Catatan:</b> a:active HARUS muncul setelah a:hover dalam definisi CSS agar efektif.</p>

</body></html>

Jalankan Contoh

Properti background-color

Properti background-color dapat digunakan untuk menentukan warna latar belakang tautan:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
  background-color: yellow;
}

a:visited {
  background-color: cyan;
}

a:hover {
  background-color: lightgreen;
}

a:active {
  background-color: hotpink;
} 
</style>
</head>
<body>

<h2>Menata style link dengan properti background-color</h2>

<p><b><a href="default.asp" target="_blank">Ini adalah tautan</a></b></p>
<p><b>Catatan:</b> a:hover HARUS muncul setelah a:link dan a:visited dalam definisi CSS agar efektif.</p>
<p><b>Catatan:</b> a:active HARUS muncul setelah a:hover dalam definisi CSS agar efektif.</p>

</body></html>

Jalankan Contoh

Tombol Tautan

Contoh di bawah akan menggabungkan beberapa properti CSS untuk menampilkan tautan sebagai kotak/tombol:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}
</style>
</head>
<body>

<h2>Tombol Tautan</h2>

<p>Tautan ditata sebagai tombol:</p>
<a href="default.asp" target="_blank">Ini adalah tautan</a>

</body></html>

Jalankan Contoh

Contoh Lainnya

Contoh 1

Contoh ini menunjukkan cara menambahkan style lain ke tautan:

<!DOCTYPE html>
<html>
<head>
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>
<body>

<h2>Tautan Gaya</h2>

<p>Arahkan kursor ke tautan dan lihat mereka mengubah tata letak:</p>

<p><b><a class="one" href="default.asp" target="_blank">Tautan ini berubah warna</a></b></p>
<p><b><a class="two" href="default.asp" target="_blank">Tautan ini mengubah ukuran font</a></b></p>
<p><b><a class="three" href="default.asp" target="_blank">Tautan ini mengubah warna latar belakang</a></b></p>
<p><b><a class="four" href="default.asp" target="_blank">Tautan ini mengubah font-family</a></b></p>
<p><b><a class="five" href="default.asp" target="_blank">Tautan ini mengubah dekorasi teks</a></b></p>

</body></html>

Jalankan Contoh

Contoh 2

Contoh lain cara membuat kotak/tombol tautan:

<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: green;
  color: white;
}
</style>
</head>
<body>

<h2>Tombol Tautan</h2>

<a href="default.asp" target="_blank">Ini adalah tautan</a>

</body></html>

Jalankan Contoh

Contoh 3

Contoh ini menunjukkan berbagai jenis kursor untuk tautan:

<!DOCTYPE html>
<html>
<body>

<h2>Properti cursor</h2>

<p>Arahkan kursor ke kata untuk mengubah kursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>

</body></html>

Jalankan Contoh

Tutorial sebelumnya : Cara Memasangkan Berbagai Jenis Font Dengan CSS
Tutorial setelahnya : Membuat Dan Mengatur List Dengan CSS
Semua Tutorial CSS : Tutorial CSS

Sytle pada Tautan

Tautan Dan Dekorasi Tulisan

Properti background-color

Tombol Tautan

Contoh Lainnya

Tinggalkan Balasan