• Program Baru W3function

    Online Courses

    Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan, publikasi website di internet sampai dengan tekhnik SEO

    Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

    Mendaftar
  • Paket Toko Online

    W3function Store ®

    Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

    Selengkapnya
  • Desain dan Pengembangan Web

    Custom Project

    Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

    Selengkapnya

Penjelasan menggunakan Styling CSS untuk Model Persegi Kolom - Box Model : Border, Padding, Margin, Outline

23‘11
February

noimg.jpg

Semua bentuk elemen di HTML seperti div, p, h, ul, li dan lain sebagainya pada dasarnya adalah sebuah kolom kotak yang membungkus isi (content) HTML. Ada beberapa property dalam box model CSS diantaranya Border, Padding, Margin dan content HTML itu sendiri. Setiap box model ini memungkinkan kita untuk membuat jarak antara yang satu dengan yang lainya, jadi dengan box model ini setiap kolom bisa di beri ukuran jarak antara satu dengan yang lainya sehingga kotak-kotak kolom tidak tampil menyatu dan tampak lebih bagus untuk di lihat.


Apabila box model kita gambarkan mungkin anda bisa lebih paham, berikut ini saya tampilkan sebuah illustrasi box model


box model


penjelasan:

  • Margin - memungkinkan kita untuk memberi jarak batas antara kolom kotak satu dengan yang lainya. margin tidak memiliki background warna (transparan)
  • Border - sama halnya dengan border memungkinkan kita memberi jarak bedanya border kita bisa mendefinisikan warna background
  • Padding - memungkinkan kita untuk membuat lapisan pada contet HTML, memiliki background tapi tergantung dari warna background content
  • Content - adalah isi seperti text dan gambar yang ada di kolom elemen HTML seperti div, p, h, dan lainnya

Bila anda menggunakan CSS box model untuk suatu elemen HTML maka aturan lebar dan tinggi dari content bisa berubah, misalnya anda menuliskan Kode CSS berikut pada sebuah div yang berukuran lebar 300px dan tinggi 200px

div.column {
	width:300px;
    height:200px;
    margin:10px;
    border:5px solid #000;
    padding:10px;
}

berdasarkan kode diatas maka lebar dan tinggi kotak div bukanlah 300 pixel x 200 pixel, melainkan 350 pixel x 250 pixel

  • Lebar : 300 px + batas kiri (margin:10px + border:5px + padding:10px) + batas kanan (margin:10px + border:5px + padding:10px)
  • Tinggi : 200 px + batas atas (margin:10px + border:5px + padding:10px) + batas bawah (margin:10px + border:5px + padding:10px)
  • Total lebar 350px dan tinggi 250px

Maaf hanya untuk pecinta i.e ukurannya tidak akan 250 pixel, box model adalah apa yang menjadi sebuah dilema untuk banyak pengembang web mengenai kompatibiltas browser. Design CSS yang sudah mulus di browser lain banyak sekali berantakan di i.e dan sedikit yang tau untuk menyelesaikan masalah ini

i.e secara otomatis menyertakan lebar dan tinggi pada setiap elemen yang kita buat, supaya i.e tidak seenaknya menambah atau mengurangi komposisi lebar dan tinggi komposisi elemen maka tambahkan tag berikut di awal pembuatan HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div.column {
	width:300px;
    height:200px;
    margin:10px;
    border:5px solid #000;
    padding:10px;
}
</style>
</head>
<body>
<div class="column"> Test </div>
</body>
</html>

Penggunaan Border

Pada border terdapat property Border Width, Border Color, dan Border Style. Proprty border-width digunakan untuk menentukan lebar dari border, border-color untuk warna dan border-style digunakan untuk gaya borrder itu sendiri misalnya membentuk garis lurus, putus-putus, atau garis titik-titik.


Cara menuliskan border adalah sebagai berikut:


div.column {
	width:200px;
    height:20px;
    border-width:5px;
	border-color:#39F;
	border-style:solid;
}

/* CSS border diatas bisa juga dituliskan seperti ini*/

div.column {
	width:200px;
    height:20px;
    border:5px #39F solid;
}

Hasilnya dari penerapan border diatas :


Sample

Property dari border dan masing-masing nilainya dapat dilihat pada tabel di bawah


Property Keterangan Nilai
border Menentukan semua gaya border dalam satu deklarasi border-width
border-style
border-color
border-bottom menentukan semua gaya border bawah dalam satu deklarasi border-bottom-width
border-bottom-style
border-bottom-color
border-bottom-color menentukan warna border bawah border-color
border-bottom-style menentukan gaya border bawah border-style
border-bottom-width menentukan lebar border bawah border-width
border-color menentukan warna kolom border color_name
hex_number
rgb_number
transparent
inherit
border-left menentukan semua gaya border kiri dalam satu deklarasi border-left-width
border-left-style
border-left-color
border-left-color menentukan warna border kiri border-color
border-left-style menentukan gaya border kiri border-style
border-left-width menentukan lebar border kiri border-width
border-right menentukan semua gaya border kanan dalam satu deklarasi border-right-width
border-right-style
border-right-color
border-right-color menentukan warna border kanan border-color
border-right-style menentukan gaya border kanan border-style
border-right-width menentukan lebar border kanan border-width
border-style menentukan gaya dari keseluruhan kolom border none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
border-top menentukan semua gaya border atas dalam satu deklarasi border-top-width
border-top-style
border-top-color
border-top-color menentukan warna border kanan border-color
border-top-style menentukan gaya border kanan border-style
border-top-width menentukan lebar border kanan border-width
border-width menentukan lebar dari keseluruhan kolom border thin
medium
thick
length
inherit

Penggunaan Outline

Outline jarang di gunakan tapi fungsinya untuk membuat elemen terlihat dan berada di luar garis border sangat tipis. Penulisan Outline tidak jauh berbeda dengan penulisan border, sedangkan property dari outline dapat dilihat pada tabel dibawah


  Keterangan Nilai
outline Menentukan semua opsi outline dalam satu deklarasi outline-color
outline-style
outline-width
inherit
outline-color menentukan warna outline color_name
hex_number
rgb_number
invert
inherit
outline-style menentukan gaya outline none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
outline-width menentukan lebar outline thin
medium
thick
length
inherit

Penggunaan Margin

Margin memberikan ruang atau jarak di sekitar elemen HTML, apabila anda menguasai microsoft office atau open office pasti lah tau apa itu margin, prinsipnya sama saja. Penulisan margin sama saja seperti penulisan HTML lainnya sedangkan property margin pada CSS dapat di lihat pada tabel di bawah.


  Keterangan Nilai
margin digunakan untuk memnentukan jarak margin pada satu deklarasi margin-top
margin-right
margin-bottom
margin-left
margin-bottom menentukan jarak margin bawah auto
length
%
margin-left menentukan jarak margin kiri auto
length
%
margin-right menentukan jarak margin kanan auto
length
%
margin-top menentukan jarak margin atas auto
length
%

Penggunaan Padding

memungkinkan kita untuk membuat lapisan pada contet HTML, memiliki background tapi tergantung dari warna background content berikut saya berikan sampel penggunaan padding dan border bersamaan:

div.column {
	width:200px;
    height:20px;
    padding 20px;
    border:5px #39F solid;
}

Hasilnya akan seperti kolom berikut, kalau anda bandingkan dengan contoh pada border diatas akan terlihat perbedaanya:


Sample

Property dari padding dan masing-masing nilainya dapat dilihat pada tabel di bawah


Property Description Values
padding Menentukan keseluruhan opsi padding dalam satu deklarasi padding-top
padding-right
padding-bottom
padding-left
padding-bottom menentukan lapisan padding bawah length
%
padding-left menentukan lapisan padding kiri length
%
padding-right menentukan lapisan padding kanan length
%
padding-top menentukan lapisan padding atas length
%

Baca-baca saja gak ada gunanya kalo gak di coba :)

Anda juga mungkin suka dengan artikel ini :

  1. Tutorial Membuat Desain Website Responsif Bagian 2 - Content Website dan Tampilan Iklan Responsif
  2. Pengertian CSS dan Cara Penerapan CSS pada HTML
  3. Pengertian dan Tutorial Dasar CSS untuk Pemula (Newbie)
  4. Belajar Cara Membuat Website Tanpa Table (tableless) dengan Photoshop dan Dreamweaver Bagian 2
  5. Penerapan Berbagai Style pada Tampilan Gambar dengan menggunakan CSS 3

Komentar

  • super zam (27 Oct 2015 04:24:29)

    Saya buat border-style di wordpress, pada mode edit page preview muncul garis2 di tepi kotak, tapi setelah disave dan hasilnya di view garis-garis kotak tidak muncul. Mengapa ini yah?

  • super zam (27 Oct 2015 04:06:40)

    Saya buat border-style di wordpress, pada mode edit page preview muncul garis2 di tepi kotak, tapi setelah disave dan hasilnya di view garis-garis kotak tidak muncul. Mengapa ini yah?

  • darz (11 Sep 2015 02:05:32)

    gan... caranya buat pilihan menu itu gimana... newbie

  • Jual Sextoys Pria Wanita (06 Nov 2014 12:52:03)

    wah gan masih bingung cara penerapannya pada wordpress

  • kodewebsite (19 Aug 2014 02:30:25)

    Sangat membantu gan, kalau agan bersedia agan bisa berbagi demo tutorial agan di alamat ini.mari cerdaskan bangsa kita :D

    http://kodewebsite.com/

» Muat Komentar Sebelumnya (9 komentar) loading

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.

loading

Usulan Kontribusi dan Saran

Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com ini terbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi. Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

Pemberitahuan Disclaimer © Copyright

Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributor artikel lain

Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecuali ada statement khusus yang di cantumkan.

Social Stuff