Materi Tentang CSS Part 3
Styling Link Pada CSS
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 :
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 :
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 :
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 :
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 :
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 :
Nah jadi seperti itu cara mengubah link pada CSS mudah bukan. Dan terimakasih kepada sahabat blogger yang sudah mengunjungi blog ini semoga bermanfaat.....
Comments
Post a Comment