Belajar CSS - Cara Menghias Link Dengan CSS

Hello Selamat Datang kembali teman teman di Awonapa Jr. Kabar baik untuk kita semua kini terbit artikel baru lagii . Yeayy!!

Oke, di artikel sebelumnya kita sudah membahas beberapa Tentang CSS, mulai dari Struktur Dasar CSS, Selector id dan class, Mengatur Background, dan Mengatur Text dengan CSS. Semua link lengkap ada disini.

TUTORIAL BELAJAR CSS DASAR

Nah pada kesempatan ini, kita akan membahas tentang bagaimana Cara Menghias Link dengan CSS

Menghias Link dengan CSS

Oke sebelum kita memasuki materi nya, sebaiknya kita mulai dengan Berdoa.

                                                                                                  بِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيم

Baik kita akan memasuki Materi nya. dan Pembahasan kita disini sesuai dengan judul yaitu Cara Menghias Link dengan CSS.
Sebelumnya, pastikan teman teman sudah mengerti bagaimana cara membuah sebuah link, pada HTML.
Kita ingat lagi cara nya adalah seperti ini.

<a href="index.html"> Halaman Utama </a>

Nah misalkan seperti contoh diatas, jika teman teman ingin informasi lengkap-nya ada di halaman blog ini . Lets Go!

Materi HTML 5 Terlengkap

Jika teman teman sudah ingat kembali , maka kita akan memasuki kedalam bagian CSS nya. Lets GO!!

/*style.css*/

a {
 text-decoration: none;
}

.menu:link {
 color: black;
 background: #4DD9AD ;
 border-radius: 2px;
}
.menu:visited {
 color: yellow;
 background: transparent;
}
.menu:hover {
 background: #D12783;
}
.menu:active {
 background: blue;
}

Baik kita akan menjelaskan apa arti nya dari code CSS diatas.

Untuk yang  a{ } teman teman pasti sudah tahu, bahwa itu adalah selector langsung ke tag a, dan kita menggunakan text-decoration yang berarti garis bawah pada Link di hilangkan

.menu:link {} , maksudnya adalah tampilan utama dari link itu sendiri. dengan warna hitam, dan background , serta border-radius yang membuat dia tidak terlalu kotak

 .menu:visited {} , untuk yang ini, artinya ketika link sudah di klik maka warna nya akan berubah sesuai kode CSS kita. (sesuai dengan kode CSS kita, maka hasilnya adalah warna kuning)

.menu:hover {} , hover yang dimaksud disini yaitu ketika cursor kita melewati link tersebut maka warna nya akan berubah sesuai dengan kode CSS kita.

.menu:active {} , dan untuk yang menu:active ini artinya, ketika kita meng klik Link maka warna nya juga akan berubah sesuai dengan kode CSS yang kita buat. 

See the Pen
css link by Wahyu Pambudi (@wahyup)
on CodePen.

Kenapa Kita Menggunakan Class? dan tidak menggunakan id?

Jawaban nya karena, kita menggunakan class untuk beberapa item, sedangkan id untuk satu item.

kalau teman teman mau coba pakai # id , boleh silahkan dicobaa.

Okee Sekian untuk materi kita kali ini. Terimakasih Sudah Berkunjung.

Salam Semangatt!!

Berbagi :