Belajar CSS Part 6 Links

Belajar CSS Part 6 Links

Assalamualaikum Wr. Wb.

PENGERTIAN

Link adalah sebuah properti yang berfungsi untuk mengarahkan tulisan atau gambar tersebut bila diklik ke tempat atau tujuan yang telah ditentukan.

LATAR BELAKANG

Mempelajari tentang memberikan gaya atau style ke dalam properti link, sehingga memiliki kesan yang lebih menarik.

MAKSUD & TUJUAN

Memberikan efek ke dalam properti link.

Menjadikan link seperti button.

Memberikan efek hover ke dalam link.

ALAT & BAHAN

Text Editor
Browser

LANGKAH KERJA

Links di dalam CSS adalah sebuah properti yang berfungsi untuk memberikan style tertentu kepada link tersebut. Di dalam CSS links terdiri dari beberapa bagian:

Styling Links

Properti ini berfungsi untuk memberikan style kepada link, seperti warna, font, dan juga efek. Properti ini menggunakan syntax-syntax berikut.

Untuk mengubah warna dan font pada link, bisa menggunakan perintah berikut.

Nb: Properti link disimbolkan dengan huruf "a" dan juga untuk mengarahkan link tersebut menggunakan attribute "href".

Hasilnya akan terlihat seperti gambar di atas. Selanjutnya untuk memberikan efek saat kursor menyentuh link, menggunakan perintah berikut.

Nb : Untuk memberikan efek pada link ada 4, yaitu saat link belum dikunjungi (link), saat link pasif (visited), saat mouse di atas link (hover), dan saat link diklik oleh mouse (active).

Di atas merupakan hasil dari efek link, untuk lebih jelasnya bisa anda coba dan buktikan.

Text Decoration

Text Decoration pada CSS link ini sama fungsinya dengan text decoration di dalam CSS text, hanya saja ini dalam bentuk link. Macam - macamnya juga sama yaitu sebagai berikut.

None
Underline
Overline
Line Through

Jadi properti ini berfungsi untuk memberikan efek garis tengah, garis atas, dan garis bawah. Kondisi saat link default biasanya ada efek garis bawahnya. untuk menghilangkannya bisa menggunakan properti ini dengan menggunakan attribute "none". Nah untuk lebih jelasnya anda bisa melihat contoh pada gambar di bawah ini.

Di atas merupakan contoh dari penulisan CSS linknya.

Hasilnya hampir sama dengan CSS text hanya saja ini berbentuk link sehingga hasilnya bisa diklik.

Background Color

Di dalam CSS links, background color ini berfungsi untuk memberikan warna latar belakang pada sebuah link. Contohnya sebagai berikut.

Properti ini menggunakan syntax "background-color" di dalam element "a".

Hasilnya bisa dilihat, tampak warna latar belakang dari link tersebut.

Links Button

Link button di dalam CSS berfungsi untuk membuat sebuah link dalam bentuk button, atau tombol. Untuk lebih jelasnya bisa anda lihat sendiri pada gambar di bawah ini.

Nb : Untuk pembuatan link button, anda cukup menambahkan attribute seperti display. Attribute ini berfungsi untuk menambahkan display atau layar pada link tersebut, selanjutnya atur ukurannya sesuai kehendak anda.