Cara Menata Tautan Menggunakan CSS: Tutorial Pemula yang Mendetail

Dalam tutorial ini, kita akan berbicara tentang cara menata tautan web melalui CSS. Tautan adalah bagian sentral dari situs web apa pun. Mereka memungkinkan Anda untuk memindahkan pengunjung ke bagian lain, merujuk ke sumber untuk menggarisbawahi poin yang Anda buat, membantu pembaca menemukan posting blog yang lebih relevan, dan banyak lagi.

Mempelajari cara mengubah desain mereka memungkinkan Anda memastikan bahwa itu dikenali sebagai tautan dan sesuai dengan bagian situs web Anda yang lain. CSS menawarkan banyak cara dan properti berbeda untuk itu, jadi mari kita bahas satu per satu.

Standar Tautan dan Penataan Tautan Default

Sebelum kita masuk ke cara membuat perubahan pada desain tautan Anda, mari kita pahami terlebih dahulu susunannya. Berikut tampilan elemen tautan dalam HTML:

 <a href="https://torquemag.io/">TorqueMag</a>

Seperti yang Anda lihat, itu terdiri dari beberapa bagian:

• <a> – Ini adalah operator untuk membuat elemen tautan. Mengapa a ? Karena dalam HTML, link disebut juga anchor tag .
• href="" - Apa pun di dalam tanda kutip ganda adalah tempat tautan ini menunjuk. Ini adalah alamat yang akan dituju oleh seseorang yang mengkliknya.
• TorqueMag – Ini adalah teks tautan yang muncul di halaman, misalnya seperti ini (jangan diklik, tautan ini tidak mengarah ke mana pun).
• </a> – Bagian yang menutup elemen tautan dan memberi tahu browser bahwa teks tautan berakhir di sini.

Sejauh ini, sangat mudah.

Seperti Apa Tautan Secara Default

Yang menarik adalah ketika Anda melihat seperti apa jenis tautan ini di halaman. Anda mungkin pernah melihatnya sebelumnya.

Jika Anda mendeklarasikan tautan lama apa pun dalam dokumen HTML dan tidak memberikan informasi gaya apa pun, itu akan menggunakan gaya default:

1. Teks tautan berwarna biru dan tautan itu sendiri digarisbawahi.
2. Saat Anda mengarahkan mouse ke atasnya, kursor berubah menjadi ikon tangan kecil.
3. Ketika Anda mengkliknya, itu berubah menjadi merah untuk sesaat.
4. Setelah Anda mengunjungi tautan, warnanya akan berubah menjadi ungu.
5. Saat Anda menavigasi ke tautan melalui tombol tabulator di keyboard Anda, itu akan memiliki garis biru di sekitarnya.

Standar-standar ini ditetapkan pada masa-masa awal Internet dan tidak banyak berubah sejak tahun 90-an. Lucunya, bahkan jika Anda tidak pernah memikirkan hal ini secara sadar, pada tingkat tertentu Anda mungkin menyadari sebagian besar hal di atas hanya dari menjelajahi web.

Belajar Tentang Status Tautan

Sesuatu yang juga menjadi jelas dari penjelasan di atas adalah bahwa tautan memiliki status berbeda yang memengaruhi tampilannya. Anda dapat menargetkan ini dengan kelas semu CSS berbeda yang memungkinkan Anda memengaruhi gaya masing-masing. Ini adalah:

• a – Ini adalah tag anchor yang disebutkan di atas. Ini menargetkan semua tautan di semua tahap.
• a:link – Untuk link normal yang belum dikunjungi. Dalam istilah teknis, :link menargetkan semua tag jangkar yang memiliki atribut href . Pada kenyataannya, itu tidak banyak digunakan. Banyak orang hanya a , karena tag jangkar tanpa atribut href agak jarang sehingga seringkali tidak perlu untuk jenis diferensiasi ini.
• a:visited – Menjelaskan tautan yang pernah dikunjungi pengguna saat ini sebelumnya, artinya tautan itu ada di riwayat browser.
• a:hover – Menargetkan gaya yang muncul saat pengguna mengarahkan kursor mouse ke tautan.
• a:active – Penataan gaya yang terlihat sebentar saat tautan diklik.
• a:focus – Tautan yang difokuskan, misalnya pengguna telah menavigasi menggunakan tombol tab. hover dan focus sering ditata bersama.

Yang penting untuk diperhatikan adalah, saat mengubah gaya untuk beberapa status tautan sekaligus, Anda harus melakukannya dalam urutan berikut.

1. a
2. a:link
3. a:visited
4. a:focus
5. a:hover
6. a:active

Penataan gaya untuk status tautan saling membangun dan mengalir ke bawah. Oleh karena itu, urutannya penting untuk memastikan mereka berfungsi sebagaimana dimaksud.

Memenuhi Harapan Pengguna

Sisi terakhir sebelum kita masuk ke bagaimana Anda dapat membuat perubahan pada gaya tautan melalui CSS, adalah berbicara tentang harapan pengguna. Alasan mengapa Anda kemungkinan besar mengenali tautan default dengan mudah sebagai tautan adalah karena default tertentu telah tertanam dalam diri kami sebagai pengguna untuk waktu yang sangat lama.

Akibatnya, kami – dan semua orang lainnya – memiliki ekspektasi yang sangat jelas tentang tampilan tautan. Harapan yang, jika tidak terpenuhi, dapat mempersulit orang untuk mengenali tautan apa adanya. Oleh karena itu, saat mengerjakan desain situs web Anda, sebaiknya tetap dekat dengan harapan tersebut.

Secara praktis artinya:

• Pastikan tautan disorot dengan cara tertentu. Warna atau garis bawah semuanya baik-baik saja selama Anda membuat tautan menonjol di halaman. Hindari hal-hal seperti miring atau tebal .
• Berikan umpan balik dengan mengubah tautan saat diarahkan dan, pada tingkat lebih rendah, diklik ( a:active , ingat?). Anda juga tidak boleh mengacaukan kursor yang berubah menjadi simbol tangan untuk menandakan elemen interaktif.

Berikut ini, kami akan memberi tahu Anda cara mengubah semua hal di atas. Namun, perlu diingat, bahwa Anda harus melakukannya dalam jumlah sedang untuk menghindari frustasi pengguna Anda.

Cara Mengubah Gaya Teks Tautan Anda melalui CSS

Pertama-tama mari kita bicara tentang bagaimana mengubah bagian teks dari tautan karena itulah yang membentuk dagingnya.

Memodifikasi Warna Teks Tautan

Hal-hal yang kami bahas di bagian ini relatif mirip dengan artikel kami tentang cara mendeklarasikan warna melalui CSS. Jadi, jika Anda ingin benar-benar masuk ke detailnya, saya sarankan Anda juga melihat posting itu.

Anda dapat mengubah warna teks tautan dengan beberapa cara berbeda: kata warna dan sistem notasi warna yang berbeda seperti kode HEX, rgb() / rgba() , hsl() / hsla() , dll.

 #link-one { color: red; } #link-two { color: #3af278; } #link-three { color: rgb(61, 76, 128); }

Berikut tampilan di atas pada halaman:

Paling umum, Anda akan menggunakan sesuatu seperti HEX atau rgb() . Menggunakan nama warna sangat jarang di luar kasus uji sederhana.

Sistem warna mana yang Anda gunakan bergantung pada berbagai faktor seperti kompatibilitas browser atau apakah Anda memerlukan transparansi atau tidak. Namun, seperti yang Anda lihat, menetapkan warna ke tautan cukup mudah melalui properti color dan cara kerjanya sama untuk semua status tautan lainnya. Akibatnya, Anda dapat dengan mudah mengubah warna teks untuk :hover atau :focus , juga.

Sesuaikan Warna Latar Belakang

Selain mengubah warna teks, Anda juga dapat mengubah warna latar belakang tautan Anda dan statusnya yang berbeda. Ini semudah menggunakan properti background-color .

Berikut markup untuk contoh di atas:

 #link-one { background-color: #fadbd8; color: red; } #link-two { background-color: #f26c2e; color: #3af278; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { background-color: rgb(61, 76, 128); color: #fff; }

Opsi Gaya Teks Lainnya

Karena tautan hanyalah teks, semua cara lain untuk menata teks dalam CSS juga berlaku untuk tautan tersebut. Itu berarti, Anda dapat menetapkan properti lain ke tautan dan statusnya yang berbeda dan meminta mereka mengubah ukuran font, kelompok font, atau hal lain saat pengguna mengarahkan kursor ke atasnya.

Ini bisa masuk akal untuk desain tertentu, namun, itu adalah cara yang kurang umum untuk menata tautan melalui CSS.

Berikut markup untuk mencapai efek di atas:

 #link-one { background-color: #fadbd8; color: red; font-family: Arial; } #link-two { color: #3af278; font-weight: 600; text-transform: uppercase; } #link-three { color: rgb(61, 76, 128); } #link-three:focus { font-size: 36px; }

Bekerja Dengan Menggarisbawahi

Seperti yang kita pelajari di awal, tautan digarisbawahi secara default. Jika Anda ingin menghilangkannya, Anda dapat menggunakan text-decoration: none; (yang merupakan penggunaan paling umum dari properti text-decoration ).

 a { text-decoration: none; }

Beberapa orang juga lebih suka menambahkan garis bawah hanya saat mengarahkan kursor tetapi tidak untuk tautan normal. Ini juga mudah dilakukan.

 a { text-decoration: none; } a:hover { text-decoration: underline; }

Selain itu, Anda dapat menggunakan border: bottom; alih-alih text-decoration: underline; untuk menambahkan baris di bawah tautan Anda. Orang biasa menggunakan ini karena menawarkan opsi gaya yang lebih baik. Namun, hari ini kami memiliki properti baru untuk metode underline standar yang memungkinkan lebih banyak penyesuaian.

Misalnya, text-underline-offset memungkinkan Anda untuk mengontrol jarak antara teks dan garis di bawahnya saat menggunakan text-decoration . text-decoration-thickness memungkinkan Anda untuk mengatur lebar garis kustom. Jadi, menempuh jalur border tidak perlu lagi seperti dulu lagi.

Selain itu, sebenarnya ada banyak cara Anda dapat bekerja dengan garis di bawah tautan, termasuk animasi. Anda mungkin bisa menulis artikel lain tentang itu.

Mengubah Gaya Kursor saat Melayang

Seperti yang telah kita bicarakan, ketika Anda mengarahkan kursor ke tautan, kursor mouse berubah dari panah kecil menjadi tangan kecil yang menunjuk.

Sekarang, itu adalah tanda universal bahwa Anda berurusan dengan elemen HTML yang dapat diklik. Namun, Anda mungkin tidak menyadari bahwa Anda juga dapat mengubah kursor ke hal-hal lain, dari tanda panah di atas panah pengubahan ukuran hingga indikator pemuatan.

 a { cursor: crosshair; } a { cursor: move; } a { cursor: wait; } a { cursor: n-resize; } a { cursor: grab; }

Jika Anda penasaran, cobalah hal di atas di lingkungan pengembangan lokal untuk melihat efeknya. Ada lebih banyak opsi, yang dapat Anda temukan di sini.

Namun, karena penunjuk sangat universal, inilah yang diharapkan pengguna dan Anda biasanya harus tetap menggunakannya. Jika, karena alasan tertentu, itu tidak berfungsi untuk tautan Anda, Anda dapat memperbaikinya dengan potongan kode berikut:

 a { cursor: pointer; }

Bahkan dimungkinkan untuk menggunakan gambar khusus jika Anda ingin menggunakan kursor Anda sendiri di situs web Anda. Misalnya, toko online Jerman untuk barang dagangan musik menggunakan kursor penunjuk bertema mereka sendiri.

Jika Anda memeriksa bagaimana mereka melakukannya melalui alat pengembang browser Anda, Anda akan menemukan potongan kode berikut:

 a { cursor: url(../images/hand.cur),pointer; }

Seperti yang Anda lihat, Anda cukup menggunakan kursor khusus dengan memberikan alamat ke file gambar.

Buat Perubahan pada: fokus

Penataan gaya untuk focus adalah bantuan aksesibilitas yang penting, jadi pastikan itu tetap ada. Secara default, sorotan terjadi melalui properti outline , yang membuat sebuah kotak muncul di sekitarnya.

Mengapa outline dan bukan border Anda bertanya?

Karena outline tidak memakan tempat di halaman. Itu duduk di atas latar belakang elemen sebagai gantinya. Dengan begitu, memfokuskan tautan tidak mengubah lompatan tata letak halaman atau sejenisnya.

Jadi, opsi gaya apa lagi yang Anda miliki untuk tautan terfokus?

Banyak dari mereka. Dibutuhkan segalanya mulai dari background-color hingga color , font-size , box-shadow , apa saja.

Berikut adalah cara untuk mencapai hal di atas:

 #link-one:focus { color: red; } #link-two:focus { box-shadow: 0 0 14px 0px; } #link-three:focus { font-size: 36px; }

Menggunakan a:focus , pada dasarnya Anda dapat melakukan apa pun yang Anda inginkan. Salah satu aplikasi yang paling menarik, bagaimanapun, mungkin Anda juga dapat menyesuaikan default browser menggunakan properti outline .

 a:focus { outline: 3px dotted green; }

Berikut tampilan di atas pada halaman:

Tombol dan Kotak Tautan

Tentu saja, tautan bukan hanya tautan teks. Di beberapa tempat, mereka sering muncul sebagai kotak, seperti menu navigasi, sebagai bagian dari formulir, atau ajakan bertindak.

Ini tidak terlalu sulit untuk dicapai. Pada dasarnya, Anda hanya perlu menemukan cara untuk menambahkan spasi di sekitar teks tautan dan memberikan latar belakang atau batas/garis besar agar dapat ditampilkan sebagai tombol atau kotak. Selain itu, mereka masih merupakan elemen tautan yang sama dengan yang kami gunakan sebelumnya.

Ada beberapa cara untuk mencapainya, dari sekadar menambahkan padding ke sistem seperti flexbox atau grid. Di bawah ini hanyalah salah satu contoh bagaimana Anda dapat melakukannya, ada lebih banyak opsi.

 a { background-color: #1a0dab; color: #fff; padding: 1.5rem; }

Dalam hal ini, CSS berisi gaya untuk tautan serta wadah tempat ia berada. Tentu saja, Anda dapat menggunakan status tautan yang sama seperti sebelumnya untuk menyertakan perilaku yang berbeda untuk skenario yang berbeda.

Sertakan Ikon di Tautan Anda

Hal cepat yang perlu dijelaskan adalah Anda juga memiliki kemungkinan untuk menyertakan ikon di tautan Anda. Itulah yang dilakukan beberapa orang untuk memperjelas bahwa ada sesuatu yang merupakan tautan keluar yang akan membawa pengguna menjauh dari halaman saat ini.

Berikut cara melakukannya. Pertama HTMLnya:

 <a id=link-one href="#">Link Text</a> <a id=link-two href="#">Link Text</a> <a id=link-three href="https://wikipedia.org/">Link Text</a>

Kemudian, CSSnya:

 a[href^="http"] { background: url('external-link-icon.png') no-repeat right center; background-size: 16px 16px; padding-right: 15px; }

a[href^="http"] hanya menargetkan tag jangkar yang memiliki alamat yang dimulai dengan http di href="" . Untuk itu, markup menambahkan gambar latar belakang, yang merupakan ikon, mengaturnya ke no-repeat, memindahkannya ke kanan, dan memusatkannya secara vertikal. Sisa markup menentukan ukuran ikon dan membuat sedikit ruang antara itu dan teks.

Pikiran Terakhir: Penataan CSS untuk Tautan

Mengubah gaya tautan melalui CSS tidak terlalu sulit setelah Anda menguasai dasar-dasarnya. Bagian terpenting adalah memahami bahwa mereka mengambil status berbeda yang ditargetkan oleh operator dan kelas semu yang berbeda. Setelah itu, hanya masalah memanfaatkan properti CSS umum untuk mengubah desainnya menjadi apa pun yang Anda inginkan. Anda sekarang memiliki semua informasi yang Anda butuhkan untuk memulai.

Apa cara favorit Anda untuk menata tautan melalui CSS? Ada tips lain untuk dibagikan? Silakan lakukan di komentar!