Senin, 09 Maret 2015
Ok kawan, masih semangat kan buat belajar CSS? masih dong yaaa! xD . Kali ini saya akan melanjutkan materi CSS yang kemarin, makanya saya beri nama pada judul post ini "Part2" karena ini kelanjutan dari materi sebelumnya (Part1), di materi sebelumnya kan kita sudah membahas tentang pengertian CSS, bagian-bagiannya, manfaat menggunakan CSS, atribute ID dan Class dsb. Nah, sekarang kita akan membahas mengenai margin, padding, CSS-shorthand, dan border.
Margin~
Property margin digunakan untuk memberi jarak antar elemen HTML. Sehingga terlihat bagus dan rapih. Langsung saja kita mencoba menulis script nya, disini saya menggunakan Notepad++. Inilah cara menggunakan property margin :
Pertama-tama seperti biasa membuat tag <html> ... </html> seperti html dasar. Bisa dilihat pada Screenshot dibawah ini
dari script pada SS diatas akan membuat halaman web seperti ini
Sekarang kita akan membuat tulisan Kotak Pertama dan Kotak Kedua agar menjadi disebuah kotak, untuk mengedit nya menggunakan tag <style>. akan saya perlihatkan Screenshot nya dibawah ini
Sebelumnya saya akan sedikit menjelaskan fungsi yang berkaitan pada script diatas,
1.background-color:blue;
Memberi warna kotak yang akan dibuat sesuai keinginan kita, disini saya memilih warna biru
2.color:yellow;
Memberi warna pada tulisan sesuai keinginan kita, dan saya memilih warna kuning.
3.width:100px;
Memberi ukuran kotak lebih tepatnya bagian panjang.
4.height:50px;
Memberi ukuran kotak lebih tepatnya bagian lebar atau tinggi.
5.margin-bottom:10px;
Memberi jarak antara kotak pertama dan kedua dari bagian bawah, disini saya memberi jarak 10px sehingga tidak terlalu jauh jaraknya. Apabila akan menambahkan jarak menggunakan magin-top:10px; (dari atas), margin-right:10px; (dari kanan) , dan margin-left:10px; (dari kiri), tinggal disesuaikan dengan kebutuhan.
Setelah itu save lalu kita refresh halaman web sobat tercinta . Dan akan menghasilkan halaman web seperti ini
Padding~
Property padding digunakan untuk memberikan jarak antara konten elemen dengan elemen tersebut. Bila diperhatikan pada tulisan "Kotak Pertama" maupun "Kotak Kedua" sangat mepet dekat dengan garis pinggir kotak tersebut, oleh karena itu gunakanlah padding agar memberi jarak sehingga tidak terlalu mepet. Yang saya gunakan yaitu padding-left dan padding-right saja. Disini padding juga sama seperti margin yang sama-sama memiliki value.
-Padding-top (atas)
-Padding-right (kanan)
-Padding-bottom (bawah)
-Padding-left (kiri)
Langsung saja kita coba
Seperti biasa di save lalu refresh pada halaman web sobat tercinta. Ok hasilnya akan seperti ini
Hasilnya sesuai dengan fungsi yang sudah dijelaskan diatas bukan?
CSS-shorthand~
Sesuai namanya 'short', yang berarti pendek. Dari property margin dan padding memiliki value yang sama. Sehingga apabila kita akan menggunakan seluruh property tersebut, akan terlalu panjang. Disini terdapat CSS-shorthand yang berfungsi untuk menggabungkan seluruh value (top, right, bottom, left) agar menjadi satu property.
Dari property margin kita akan menggunakan CSS-shorthand, yang memiliki nilai yang searah dengan jarum jam dan diawali dengan margin-top maka seperti contoh dibawah ini :
==>> margin:10px 10px 10px 10px;
Sehingga masing-masing dari 4 nilai tersebut adalah
==>> margin:top right bottom left;
Tetapi penggunaan shorthand ini tidak selalu 4 nilai lhoo.. Terus kalau kurang dari 4 nilai bagaimana? Gampang ko, jadi gini sobat
-Bila kita masukkan 1 nilai artinya nilai tersebut akan memberikan seluruh sisi (top,right,bottom,left).
Contoh :
==>> margin:10px;
Sehingga nilai dari margin-top, right, bottom, left adalah 10px. Lebih simple bukan?
-Bila kita masukkan 2 nilai artinya nilai berikutnya sama dengan nilai sebelumnya.
Contoh :
==>> margin:10px 20px; (nilai top dan right)
Sehingga margin-bottom sama seperti margin-top, dan margin-left sama seperti margin-right.
-Bila kita masukkan 3 nilai artinya nilai yang tidak diisi akan sama seperti nilai yang diisi seperti pada '2 nilai' .
Contoh :
==>> margin:10px 20px 30px; (nilai top, right, dan bottom)
Sehingga margin-left akan sama dengan margin-right yaitu 2opx.
Border~
Property border digunakan untuk memberikan garis pinggir pada elemen. Pada property ini terdapat 3 set yang harus kita ketahui, yaitu width, style, color. Langsung saja kita coba
Disini saya menggunakan width sebesar 5px, style nya solid dan color nya red. Sehingga akan menghasilkan border seperti ini
-Bila kita masukkan 1 nilai artinya nilai tersebut akan memberikan seluruh sisi (top,right,bottom,left).
Contoh :
==>> margin:10px;
Sehingga nilai dari margin-top, right, bottom, left adalah 10px. Lebih simple bukan?
-Bila kita masukkan 2 nilai artinya nilai berikutnya sama dengan nilai sebelumnya.
Contoh :
==>> margin:10px 20px; (nilai top dan right)
Sehingga margin-bottom sama seperti margin-top, dan margin-left sama seperti margin-right.
-Bila kita masukkan 3 nilai artinya nilai yang tidak diisi akan sama seperti nilai yang diisi seperti pada '2 nilai' .
Contoh :
==>> margin:10px 20px 30px; (nilai top, right, dan bottom)
Sehingga margin-left akan sama dengan margin-right yaitu 2opx.
Border~
Property border digunakan untuk memberikan garis pinggir pada elemen. Pada property ini terdapat 3 set yang harus kita ketahui, yaitu width, style, color. Langsung saja kita coba
Disini saya menggunakan width sebesar 5px, style nya solid dan color nya red. Sehingga akan menghasilkan border seperti ini
Nah kan lebih terlihat keren dan cantik seperti saya, gimana mudah bukan? Yooo langsung saja dipraktekan ya sobat xD
Ok sampai sini dulu saja nanti kita lanjutkan ke materi berikutnya di part3. Sekian semoga bermanfaat =) ^^
Ok sampai sini dulu saja nanti kita lanjutkan ke materi berikutnya di part3. Sekian semoga bermanfaat =) ^^
