Skip to content Skip to sidebar Skip to footer
Home / CSS / Web Design

Materi 8 : Menghias Link dengan CSS

By Web Design Purbalingga Post a Comment

Menghias Link dengan CSS – Cara menghias link dengan CSS itu sangat mudah, sama halnya dengan mengedit element html lainnya dengan CSS. Intinya adalah kalian paham struktur penulisan CSS, mulai dari pemanggilan selektor, propertynya apa dan nilainya apa.

Menghias Link dengan CSS

Sebelum lanjut, disarankan untuk kembali mempelajari materi tentang Membuat Link di HTML pada materi HTML. Untuk menghias link tidaklah susah, yang penting tahu dulu dasar struktur penulisannya, tentang ‘hiasan apa’ yang akan kita hias pada link itu macam – macam, kalian bisa menambahkan warna latar, warna link, efek warna setelah link tersebut di klik dan lain sebagainya.
Agar lebih mudah untuk dipahami, simak contohnya berikut ini, (siapkan satu dokument html, bebas) atau kalian bisa gunakan contoh koding berikut ini
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Latihan CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Menghias Link -->
  <div class="menu">
    <a href="">Home</a>
    <a href="">Informasi</a>
    <a href="">Kontak</a>
  </div>
</body>
</html>
Selanjutnya ketikan kode berikut ini pada file css kalian,
a {
 font-weight: bold;
 background-color: teal;
 color: white;
}
.menu :hover {
 background: red;
}
.menu :active {
 background: green;
}
Hasilnya


Keterangan setiap baris kode CSS di atas
- Selektor a = adalah selektor yang digunakan untuk memanggil tag a atau tag link
- Property font-weight = adalah property yang digunakan untuk mengubah ukuran font pada elemen html
- Nilai bold = adalah nilai yang kita berikan kepada property font-weight agar font menjadi tebal
- Property background-color = sebagai property untuk menambahkan warna latar
- Property Color = digunakan untuk merubah warna font pada tag a

Setiap elemen yang berada di dalam tag a, maka akan berubah sesuai dengan yang telah kita perintahkan, seperti warna font, warna latar dan lain – lain.

- Selektor .menu = selektor yang dugunakan untuk memanggil sebuah class pada dokumen html [ Baca : Id dan Class ]
- Hover = digunakan untuk memberikan efek pada sebuah link dimana ketika kalian meletakan kursor pada sebuah link, maka akan memberikan efek sesuai dengan property yang kita berikan.
- Background=”red” = property sekaligus nilai untuk selektor .menu :hover. Jadi saat kalian metekan kursor di atas link, maka warna latarnya akan berubah menjadi merah.
- .menu : active = fungsinya hampir sama dengan .menu :hover, tapi yang membedakan adalah saat link tersebut kalian klik, maka warna latarnya akan berubah sementara.
- Background=”green” =  fungsinya, saat kalian mengklik link tersebut maka warna latarnya akan berubah menjadi warna hijau.

Kalian bisa berkreasi lebih unik lagi, masih banyak hal – hal lain yang bisa kalian pada sebuah link. Sekian materi kali ini tentang cara Menghias Link dengan CSS, semoga mudah di pahami. Silahkan tinggalkan pertanyaan kalian di kolom komentar jika ada poin yang belum jelas.

Post a Comment for "Materi 8 : Menghias Link dengan CSS"