A. PENDAHULUAN
- Pengertian
- Latar belakang masalah
B. MAKSUD DAN TUJUAN
Dapat menguasai CSS dan tujuannya setelah menguasai CSS bisa masuk ke jenjang berikutnya untuk bisa membangun sebuah template yang nantinya akan di buat website.
C. BATASAN DAN RUANG LINGKUP PEKERJAAN
D. TARGET DAN HASIL YANG DIHARAPKAN
Mengetahui dan memahami CSS margins, CSS padding, CSS Height/width, CSS Box model.
E. METODE PELAKSANAAN
- Membaca referensi
- Mempraktikkan dengan mengerjakan Try It Your Self
F. ALAT DAN BAHAN
- Laptop
- Koneksi internet
G. TARGET WAKTU
08.00 - 16.00
H. TAHAPAN PELAKSANAAN
Margin di gunakan untuk membuat ruang di sekitar elemen, di luar batas yang di tentukan.
contoh :
CSS :
div {
margin: 50px;
border: 1px solid #4CAF50
}
HTML :
<div>Ini adalah bermargin 50px</div>
Hasilnya :
Properti CSS margin digunakan untuk membuat ruang di sekitar elemen, di luar batas yang di tentukan.
Dengan CSS, Anda memiliki kontrol penuh atas margin. Ada properti untuk mengatur margin untuk setiap sisi elemen (atas, kanan, bawah, dan kiri).
Margin - Sisi individu
- CSS memiliki properti untuk menentukan margin untuk setiap sisi elemen :
margin-top
margin-right
margin-bottom
margin-left
Semua properti margin dapat memiliki niai berikut :
otomatis - browser menghitung margin
panjang- menentukan margin dalam px, pt, c, dll
% - menentukan margin dalam % dari lebar elemen yang mengandung.
Contoh :
CSS =
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
HTML =
<p>untuk yang margin bagian atas 100px, margin bagian tengah 100px, margin bagian kanan 150px, margin bagian kiri 80px</p>
Hasilnya :
Margin - Properti Singkatan
Untuk mempersingkat kode, dimungkinkan untuk menentukan semua properti margin dalam satu properti.
properti margin adalah properti singkatan untuk properti margin individu(permasing-masing bagian) berikut :
- margin-top
- margin-right
- margin-bottom
- margin left
Jadi inilah cara kerjannya :
Jika margin properti memiliki empat nilai
contoh :
- margin: 25px 50px 75px 100px;
maka = margin atas adalah 25px
margin kanan adalah 50px
magin bawah adalah 75px
margin kiri adalah 100px
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px 75px 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Margin yang memiliki 4 nilai</h2>
<div>margin atas 25px, margin kanan 50px, margin bawah 75px, margin kiri 100px.</div>
<hr>
</body>
</html>
Hasilnya :
Jika margin memiliki tiga nilai
contoh :
- margin: 20px 50px 80px;
Maka = margin atas 20px
margin kanan dan kiri 50px
margin bawah 80px
Jika margin memiliki dua nilai
Contoh :
- margin: 20px 50px;
Maka = margin atas dan bawah adalah 20px
margin kanan dan kiri adalah 50px
Jika margin memiliki properti satu nilai :
Contoh = margin: 25px;
Maka : keempat margin bernilai 25px
Nilai Otomatis
Anda dapat mengatur properti margin ke auto yang nantinya akan memusatkan secara horizontal di bawah wadahnya. Elemen kemudian akan mengambil lebar yang di tentukan, dan ruang yang tersisa akan di bagi antara margin kiri dan kanan.
Contoh : menggunakan margin otomatis
CSSNYA :
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
HTMLNYA :
<div>Hallo nama Saya Adelwin Nugroho Liandy, Salam kenal semua....!</div>
Hasilnya :
Nilai yang diwarisi
Contoh ini memungkinkan margin kiri elemen <p class="adel"> diwarisi dari elemen <div> :
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid red;
margin-left: 140px;
}
p.ex1 {
margin-left: inherit;
}
</style>
</head>
<body>
<h2>Menggunakan margin yang mewarisi</h2>
<p>Dengan margin properti inherit ini bisa mewarisi css sebelumnya</p>
<div>
<p class="ex1">Disini elemen margin pada elemen paragrag mewarisi margin elemen div.</p>
</div>
</body>
</html>
Hasilnya :
- CSS Padding
CSS padding ini kurang lebih seperti CSS margin perbedaannya jika margin mengukur luar agar tidak beredempetan dengan elemen lain, jika padding mengukur ruang didalam kotak.
Dasarnya, margin adalah ruang di sekitar elemen dan padding mengacu pada ruang antara elemen dan konten didalamnnya.
Jika kalian lihat gambar di atas simplenya jadi ada 2 buah kotak yang didalamnya terdapat teks, nah jika kamu ingin memberikan jarak antara teks dengan kotaknya, sehingga terdapat ruang di dalam kotak, itulah padding. Jika kamu ingin memberikan jarak antara kedua buah kotak tersebut, sehingga tidak berdempetan, itulah margin.
- CSS Height dan width
CSS height dan Width digunakan untuk mengatur tinggi dan lebar suatu elemen.
Properti tinggi dan lebar tidak termasuk bantalan, batas, atau margin. Ini mengatur tinggi/lebar area didalam padding, border, dan margin elemen.
Nilai tinggi dan lebar CSS
Properti height dan width mungkin memiliki nilai berikut :
- auto : ini default. Browser menghitung tinggi dan lebar.
- length : mengidentifikasi tinggi/lebar dalam px, cm, dll
- % : mendefinisikan tinggi dan lebar dalam persen dari blok yang mengandung
- initial : Mengatur tinggi/lebar ke nilai defaultnya.
- inherit : Tinggi dan lebar akan diwarisi dari nilai induknya.
Contoh tinggi dan lebar pada CSS :
CSSNYA :
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
HTMLNYA :
<div>Di div elemen ini tingginya 200px dan untuk lebarnya 50%.</div>
Hasil :
Catatan : Ingatlah bahwa properti height dan width tidak menyertakan padding, border, atau margin mereka mengatur tinggi/lebar area di dalam padding, border, dan margin elemen.
- CSS Box mode
Di CSS, istilah "model kotak" digunakan ketika berbicara tentang desain dan tata letak.
Model kotak CSS pada dasarnya adalah kotak yang membungkus setiap elemen HTML. Ini terdiri dari: margin, border, padding, dan konten aktual.
I. TEMUAN PERMASALAHAN DAN PENYELESAIANNYA
-
J. REFERENSI
- W3Schools
