Asalammualaikum Wr. Wb.
Hari ini saya belajar mengulang kembali tentang dasar dasar css di W3School agar saya lebih memahaminya yaitu tentang Border, margin dan padding.
Border adalah tepi dapat digunakan untuk banyak hal, misalnya sebagai elemen dekoratif atau untuk memberi garis batas pemisah dari dua hal.
contoh :
Margin adalah ruang disekitar elemen/konten. Margin akan membentuk daerah (ruang) vertikal dan horizontal antara elemen. Jika elemen/konten tidak memilki margin, maka elemen-elemen tersebut akan rapat bertemu terhadap satu sama lain. Agar margin bekerja dengan baik, elemen biasanya diikuti oleh posisi float atau diposisikan relative. Style ini sering diterapkan untuk dapat memindahkan elemen lain di sekitarnya
contoh :
p.one {
border: 7px solid red;
background-color: yellow;
margin-top: 80px;
margin-bottom: 80px;
margin-right: 80px;
margin-left: 80px;
padding-top: 100px;
padding-right: 50px;
padding-bottom: 100px;
padding-left: 80px;
}
</style>
Keterangan :
margin-bottom = jarak bawah dengan yang tengah.
margin-top = jarak atas dengan yang tengah
margin-right =jarak kanan dengan yang tengah
margin-left = jarak kiri dengan yang tengah
padding adalah ruang horizontal dan vertikal yang diatur di sekitar area isi/konten dari elemen yang ditargetkan. Jadi padding di bagian dalam kotak, bukan di luar.
contoh :
<style>
p.one {
border: 7px solid red;
background-color: yellow;
margin-top: 80px;
margin-bottom: 80px;
margin-right: 80px;
margin-left: 80px;
padding-top: 100px;
padding-right: 50px;
padding-bottom: 100px;
padding-left: 80px;
}
</style>
Keterangan :
padding-top = jarak atas dengan margin
padding-right = jarak kanan dengan margin
padding-bottom = jarak bawah dengan margin
padding-left = jarak kiri dengan margin
Hasil saya belajar css border,margin dan padding yang sudah sedikit saya edit :
<!DOCTYPE html>
<html>
<head>
<style>
p.css{
background-color: green ;
border: 6px solid yellow ;
border-top-right-radius: 5em;
border-top-left-radius: 5em;
border-bottom-left-radius: 5em;
border-bottom-right-radius: 5em;
margin-top: 80px;
margin-bottom: 80px;
margin-right: 80px;
margin-left: 80px;
padding-top: 100px;
padding-right: 80px;
padding-bottom: 100px;
padding-left: 120px;
border-style: solid;
}
</style>
</head>
<body>
<h2> Belajar CSS border,margin and Padding :</h2>
<p class="css">Di sini adalah tempat padding</p>
<p class="one"></p>
</body>
</html>
ini hasil script yang di atas bila sudah di jalankan di browser :
saya punya sedikit contoh contoh untuk mengedit hasil css yang di atas ini :
1. Memberi background warna.
<style>
body {
background-color: lightblue;
}
</style>
2. Menambahkan lebar dan panjang.
<style>
div {
width: 700px;
height: 200px;
border: 3px solid blue;
}
</style>
3. Memberi garis bawah pada text.
<style>
h3 {
text-decoration: underline;
}
</style>
4. Merubah bentuk tulisan.
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
5. Membuat tulisan berwarna pink.
<style>
a {
color: hotpink;
}
</style>
Kalau kurang puas silahkan belajar sendiri di W3School sekian dulu postingan dari saya semoga bermanfaat bagi anda semua.
Wassalammulaikum Wr. Wb.
0 komentar:
Posting Komentar