Berikut adalah Contoh penggunaan CSS pada HTML
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: red;
text-align: center;
}
p {
font-family: Arial, sans-serif;
font-size: 16px;
}
.container {
width: 80%;
margin: 0 auto;
}
.button {
background-color: blue;
color: white;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
}
.button:hover {
background-color: darkblue;
}
</style>
</head>
<body>
<div class="container">
<h1>Selamat Datang di Website Kami</h1>
<p>Ini adalah contoh paragraf dengan gaya CSS.</p>
<a href="#" class="button">Klik Disini</a>
</div>
</body>
</html>Dalam contoh di atas, kita menggunakan CSS untuk mengatur tampilan elemen-elemen HTML. Beberapa properti CSS yang digunakan antara lain:
background-color: Mengatur warna latar belakang elemen.color: Mengatur warna teks.text-align: Mengatur penataan teks.font-family: Mengatur jenis font teks.font-size: Mengatur ukuran font teks.width: Mengatur lebar elemen.margin: Mengatur margin elemen.padding: Mengatur padding elemen.border-radius: Mengatur sudut melengkung pada elemen.text-decoration: Mengatur dekorasi teks.
Output:
See the Pen Contoh penggunaan CSS pada HTML by De Orchids (@De-Orchids) on CodePen.
Dengan menggunakan CSS, kita dapat mengubah tampilan elemen-elemen HTML sesuai dengan kebutuhan dan preferensi desain kita.
Leave a Reply