Materi Tentang CSS Part 3

Styling Link Pada CSS

Materi Tentang CSS Part 3

Fungsi dari style link ini adalah untuk mengatur atau mengubah sebuah link yang sudah kita buat. Lalu bagaimana caranya untuk mengatur atau mengubah sebuah link. Sebelumnya kita sudah belajar bagaimana cara membuat link pada html di part ke 3 dan itu hanyalah sebuah link biasa. Dan kali ini saya akan memberikan contohnya kepada kalian, contoh ini lumayan simple dan mudah di mengerti. Dan Berikut adalah contoh untuk mengatur link di CSS.

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>

a {color: red;}

</style>
</head>


<body>
<a href="pilipmulyadi.blogspot.com"> PilipMulyadi.Blogspot.com </a>
</body>
</html>

Fungsi dari styling di atas adalah untuk merubah warna pada link. Supaya terlihat menarik dan elegan. Kalian bisa mengubah warnya sesuai selera dan ke sukaan warna kalian.

Hasil :


Materi Tentang CSS Part 3



Font Weight
Apa sih fungsi font weight ini ? Ya tentu saja untuk menebalkan text link yang sudah kita buat.

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>

a {color: red;
     font-weight: bold;}

</style>
</head>


<body>
<a href="pilipmulyadi.blogspot.com"> PilipMulyadi.Blogspot.com </a>
</body>
</html>

Hasil :


Materi Tentang CSS Part 3



Border Dan Border Radius
Perbedaan dari dua suku ini adalah :

Border = Untuk membuat sebuah bingkai.

Border Radius = Untuk mengatur ketajaman pada border.

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>

a {color: red;
     font-weight: bold;
     border: 7px solid blue;
     border-radius: 30px;}

</style>
</head>


<body>
<a href="pilipmulyadi.blogspot.com"> PilipMulyadi.Blogspot.com </a>
</body>
</html>

Hasil :


Materi Tentang CSS Part 3



Text Decoration
Fungsi dari text decoration ini adalah untuk menghilangkan garis bawah pada link.

contoh :

<!DOCTYPE html>
<html>
<head>
<style>

a {color: red;
     font-weight: bold;
     border: 7px solid blue;
     border-radius: 30px;
     text-decoration: none;}

</style>
</head>


<body>
<a href="pilipmulyadi.blogspot.com"> PilipMulyadi.Blogspot.com </a>
</body>
</html>

Hasil :


Materi Tentang CSS Part 3



Background Color
Fungsi dari background color ini adalah untuk membuat sebuah warna pada latar belakang text.

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>

a {color: red;
     font-weight: bold;
     border: 7px solid blue;
     border-radius: 30px;
     text-decoration: none;
     background-color: orange;}

</style>
</head>


<body>
<a href="pilipmulyadi.blogspot.com"> PilipMulyadi.Blogspot.com </a>
</body>
</html>

Hasil :


Materi Tentang CSS Part 3



Line Height
Untuk mengatur jarak.

Contoh :

<!DOCTYPE html>
<html>
<head>
<style>

a {color: red;
     font-weight: bold;
     border: 7px solid blue;
     border-radius: 30px;
     text-decoration: none;
     background-color: orange;
     line-height: 75px;}

</style>
</head>


<body>
<a href="pilipmulyadi.blogspot.com"> PilipMulyadi.Blogspot.com </a>
</body>
</html>

Hasil :


Materi Tentang CSS Part 3


Nah jadi seperti itu cara mengubah link pada CSS mudah bukan. Dan terimakasih kepada sahabat blogger yang sudah mengunjungi blog ini semoga bermanfaat.....

Comments

Popular posts from this blog

Cara Membuat Absen Dengan HTML Dan CSS

Cara membuat kalkulator dengan HTML dan CSS

Materi Tentang JavaScript Lengkap