CSS PART 13: STYLING LINK

Februari 14, 2017

STYLING LINKS

ASSALAMUALAIKUM wr wb.

apa kabar teman teman kali ini saya akan membahas tentang gaya link dalam css apa teman teman pernah menggunakan tag styling links kalau belum tau berikut penjelasanya.

1.Pengertian CSS Styling link.
    untuk mengatur bentuk link di html.

2.MAKSUD dan TUJUAN.
untuk mengetahui cara mengatur gaya link.

3.BAHAN dan ALAT.
- laptop/pc
-web browser contohnya seperti mozilla fire fox atau yang lain
-memiliki aplikasi seperti sublime text/notepad

4.Materi
CSS memberikan kita kemampuan penuh untuk mengatur gaya link elemen pada tag HTML.

properti tag yang digunakan untuk menggunakan styling link antara lain :

    a:link    = link normal
    a:visited = link pengguna telah dikunjungi
    a:hover    = link ketika pengguna mouse diatasnya
    a:active = link saat diketik

properti CSS yang berhubungan dengan yang digunakan dalam CSS font antara lain :

    1.color
    2.text decoration
    3.background color

dibawah ini contoh penggunaan tag css diatas:

1.a:link color.
    biasanya digunakan untuk memberikan warna pada link.
dibawah ini hasilnya:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <title></title>
    <style>
    a:link{
        color: #ea5281;
    }
    a:visited{
        color: #eabc27;
    }
    a:hover{
        color: #629254;
    }
    a:active{
        color: #123456;
    }
    </style>
</head>
<body>
Link dapat ditata dengan CSS properti (misalnya warna)
<a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_link">warna pada link</a>

</body>
</html>

dibawah ini hasil dari script diatas:

sebelum kursor menyentuh link:

setelah cursor menyentuh link:

2.a:link text decoration.
    biasanya digunakan untuk menghilangkan garis bawah pada link.
berikut contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <title></title>
    <style>
    a:link{
        text-decoration: none;
    }
    a:visited{
        text-decoration: none;
    }
    a:hover{
        text-decoration: underline;
    }
    a:active{
        text-decoration: underline;
    }
    </style>
</head>
<body>
Link dapat ditata dengan CSS properti (misalnya warna)
<a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_link">warna pada link</a>

</body>
</html>

dibawah ini hasilnya:

sebelum cursor menyentuh link:

setelah cursor menyentuh link:

3.a:background color
    untuk menentukan warna latar belakang untuk link.

dibawah ini contoh penggunaannya:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <title></title>
    <style>
    a:link{
        background-color: #123456;
    }
    a:visited{
        background-color: #aec123;
    }
    a:hover{
        background-color: #af2906;
    }
    a:active{
        background-color: #acb123;
    }
    </style>
</head>
<body>
Link dapat ditata dengan CSS properti (misalnya warna)
<a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_link">warna pada link</a>

</body>
</html>

berikut hasinya:

sebelum cursor menyentuh link: