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


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
?
1
2
3
4
5
6
7
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
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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_numbertransparent
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
lengthinherit

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-widthinherit
outline-color menentukan warna outline color_name
hex_number
rgb_numberinvert
inherit
outline-style menentukan gaya outline none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
outline-width menentukan lebar outline thin
medium
thick
lengthinherit

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:
?
1
2
3
4
5
6
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
%
Read More »

CSS dan Penerapanya Pada HTML


CSS adalah singkatan dari Cascading Style Sheet, digunakan untuk mengatur style atau tampilan dari dokumen HTML. Menurut wikipedia, CSS adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu website, baik tata letak, jenis huruf, warna, dan semua yang berhubungan dengan tampilan atau gaya suatu web.


Penggunaan CSS merupakan standar untuk web-web modern (Web 2.0). Sebagian pembaca mungkin sudah tau bahwa implementasi CSS, Table Less dan Semantik tapi tidak Divitis (maniak div) merupakan standarisasi web yang baik. Saya sendiri sebetulnya tidak peduli apakah CSS adalah Standar Web ataupun Bukan, menurut saya kita memang harus melakukan implementasi CSS untuk setiap perancangan website kita karena dengan CSS kita tidak akan melakukan hal-hal yang terus diulangi dalam menerapkan suatu gaya pada tag HTML yang kita buat, cukup satu kode untuk semua mark up yang sama.


Ada dua cara yang bisa diterapkan untuk menggunakan CSS pada web. Cara yang pertama adalah dengan membuat CSS langsung didalam satu file HTML kita (internal / inline style sheet). Cara yang kedua adalah dengan cara memanggil CSS tersebut dari file CSS tersendiri (external style sheet). selanjutnya mari kita langsung praktek silahkan buka dreamweaver anda atau text editor, dsb :

1. Internal Style Sheet

Cara membuat internal Style Sheet adalah dengan menambahkan tag <style type="text/css" media="screen"> pada bagian header tag HTML kita. Setelah selesai menambahkan tag maka selanjutnya tag tersebut kita tutup lagi dengan </style> sehingga kode HTML menjadi sebagai berikut
?
1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
<!-- disini kode CSS -->
</style>
</head>
<body>
<!-- disini content HTML -->
</body>
</html>
Ok, sekarang anda paham kan dimana kita harus menerapkan CSS dengan cara internal Style Sheet.. Tapi saya tau anda tidak puas kalau saya hanya menerangkan dimana saya harus meletakan CSS nya. kurang seru tanpa praktek membuat web CSS, betul tidak?! Ha... karena itu mari kita mulai membuat website dengan teknik CSS. berikut gambar proyek web table less dengan penerapan CSS kita kali ini

Bagaimana cara membuatnya ?!
Pertama-tama kita buat tag html sebagai berikut :
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS Pertamaku</title>
<style type="text/css">
  <!-- disini kode CSS -->
</style>
</head>
<body>
  
<!-- Navigasi Menu -->
<ul class="navbar">
    <li><a href="index.html">Home</a>
    </li><li><a href="about.html">About</a>
    </li><li><a href="gallery.html">Gallery</a>
    </li><li><a href="links.html">Links</a>
</li></ul>
   
<!-- Conteny Utama -->
<h1>CSS Pertamaku</h1>
<p>Selamat datang di Web CSS ku</p>
<p>Halo ini website CSS ku, mungkin tidak ada gambar
  disini tapi setidaknya ini punya gaya</p>
<p>Harusnya ada lebih gaya markup disini tapi saya tidak
  tahu bagaimana membuatnya,
  apakah ada yang bisa memberitahu?!</p>
   
<p>hubungi saya kalo ada yang bisa karena
saya sedang mati gaya</p>
<address>Made 12 Juni 2009<br> by myself.</address>
</body>
</html>
Tag HTML tersebut akan menghasilkan document website yang dapat dilihat pada gambar sebagai berikut


Uek, jelek bukan hasilnya, maka dari itu sekarang mari kita tambahkan gaya untuk tag HTML tersebut dan menambahkan mark up CSS pada tag HTML, ganti tulisan <!-- disini kode CSS --> dengan markup sebagai berikut
?
1
2
3
4
5
6
body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: white;
    background-color: #555555
}
Kegunaan dari tag diatas adalah untuk memberi jarak lapisan (padding), warna dan jenis font yang kita gunakan serta warna latar dari web ( body HTML ). Untuk Warna anda bisa dengan langsung menambahkan jenis warna seperti black, white, purple, yellow, red, dsb, atau jika warnanya unik anda bisa menambahkan kode warna seperti #8c1f1f ( untuk merah tua ). Kode warna ini bisa anda dapatkan dari photoshop.

Sekarang kita mark up CSS untuk tag HTML ul. bila anda perhatikan tag UL mengandung class : <ul class="navbar">, class merupakan atribut tag html yang bisa kita didefinisikan nama-namanya untuk dihubungkan dengan mark up CSS, selain class ada juga atribut yang bernama id tapi tentang class dan id ini sebaiknya kita bahas lebih lanjut lagi di bagian artikel CSS saya yang kedua, supaya kali ini kita lebih fokus ke dasar CSS nya duou. Ok Selanjutnya tambahkan saja kode berikut :
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em
}
ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid #FF6600
}
ul.navbar a {
    text-decoration: none
}
ul.navbar a:hover {
    color: #FF0000
}
Selanjutnya mark up juga tag h1 (heading ), p (paragraph), addres (alamat), a (text yang mengandung link ), a:hover (text yang mengandung link dan sedang ditunjuk mouse), a:visited (text yang mengandung link dan linknya telah dikunjungi ). tambahkan kode dibawah :
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
h1 {
    font-family: Helvetica, Geneva, Arial,
    Sans-Regular, sans-serif;
}
a:link {
    color: #00CC66
}
a:visited {
    color: purple;
}
address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted;
}
Dengan demikian markup CSS dengan cara inline style sheet untuk semua Tag HTML telah selesai, Hasil akhir tag adalah sebagai berikut
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS Pertamaku</title>
<style type="text/css">
   body {
        padding-left: 11em;
        font-family: Georgia, "Times New Roman", Times, serif;
        color: white;
        background-color: #555555
    }
   ul.navbar {
        list-style-type: none;
        padding: 0;
        margin: 0;
        position: absolute;
        top: 2em;
        left: 1em;
        width: 9em;
    }
   ul.navbar li {
        background: white;
        margin: 0.5em 0;
        padding: 0.3em;
        border-right: 1em solid #FF6600;
    }
   ul.navbar a {
        text-decoration: none;
    }
   h1 {
        font-family: Helvetica, Geneva, Arial,
        Sans-Regular, sans-serif
    }
   a:link {
        color: #00CC66
    }
   a:visited {
        color: purple
    }
   address {
        margin-top: 1em;
        padding-top: 1em;
        border-top: thin dotted
    }
</style>
</head>
<body>
<!-- Navigasi Menu -->
<ul class="navbar">
    <li><a href="index.html">Home</a>
    </li><li><a href="about.html">About</a>
    </li><li><a href="gallery.html">Gallery</a>
    </li><li><a href="links.html">Links</a>
</li></ul>
<!-- Conteny Utama -->
<h1>CSS Pertamaku</h1>
<p>Selamat datang di Web CSS ku</p>
<p>Halo ini website CSS ku, mungkin tidak ada gambar
disini tapi setidaknya ini punya gaya</p>
<p>Harusnya ada lebih gaya markup disini tapi saya
tidak tahu bagaimana membuatnya,
  apakah ada yang bisa memberitahu?!</p>
<p>hubungi saya kalo ada yang bisa karena saya
sedang mati gaya</p>
<address>Made 12 Juni 2009<br>  by myself.</address>
</body>
</html>

2. External Style Sheet

Menuliskan Mark up CSS untuk external Style Sheet sama saja dengan cara diatas, bedanya penulisan Markup tidak ditempatkan didalam HTML melainkan dibuat file sendiri dengan ekstensi .css, Silahkan buat file text baru kemudian save as style.css dan simpan di direktori yang sama.

Langkah selanjutnya buat markup sebagai berikut pada file style.css yang baru kita buat
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: white;
    background-color: #555555 }
ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid #FF6600 }
ul.navbar a {
    text-decoration: none }
h1 {
    font-family: Helvetica, Geneva, Arial,
    Sans-Regular, sans-serif }
a:link {
    color: #00CC66 }
a:visited {
    color: purple }
address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
Untuk menghubungkan file HTML dengan CSS maka pada tag header HTML diganti menjadi sebagai berikut :
?
1
2
3
4
5
6
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>CSS Pertamaku</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
</head>
penerapan external maupun internal CSS yang saya jelaskan diatas akan menghasilkan dokumen web dengan gaya yang sama


sumber : w3function.com
Read More »

Pengantar CSS

CSS (Cascading Style Sheet) dibuat oleh World Wide Web Consortium (W3C) untuk menyelesaikan masalah yang timbul pada saat dokumen HTML masih versi 3.2. HTML versi 3.2 ini merupakan mimpi buruk untuk para Pengembang Web karena untuk memberi style pada document HTML para pengembang harus membuat tag-tag tersendiri misalkan tag <font>, tag atribut warna dan lain sebagainya pada setiap dokumen HTML yang akhirnya membuat pengembangan web dengan skala besar menjadi lebih kompleks, rumit dan mahal. 

Dokumen HTML pada awal dibuat memang tidak di maksudkan untuk memformat dokumen sedemikian rupa, HTML di maksudkan untuk mendefinisikan suatu isi dari dokumen. CSS mulai dikembangkan pada HTML versi 4, semua format tag-tag tadi mulai di hilangkan, di ganti, dan di simpan pada file yang diberi nama CSS secara terpisah dan sekarang semua jenis browser sudah mendukung CSS.

CSS  memudahkan pembuatan website dalam mendefinisikan bagaimana element-element yang ada di dokumen HTML di tampilkan. Style dokumen HTML nanti disimpan dalam file berekstensi .css. Dengan penerapan style secara external pada satu file css kita dapat merubah penampilan dan layout semua halaman website tanpa harus membuka setiap file HTML dan meng-editnya.

Contoh coding CSS adalah sebagai berikut :

h1 { color :blue; font-size:18px; }

  • h1 disebut sebagai selector atau tag elemen HTML yang di pilih untuk di format.
  • Color merupakan properti CSS
  • blue adalah nilai dari properti CSS
  • Setiap deklarasi atau statement CSS di buat didalam tanda kurawa {   }
  • Setiap properti diakhiri dengan tanda titik koma ;
Seperti halnya dalam penulisan kode program (PHP, Java, dan lainnya), JavaScript, atau tag HTML, dalam CSS kita juga bisa membuat comment yang tidak akan dieksekusi oleh browser. CSS comment di mulai dengan tanda /* dan di akhiri dengan tanda */
?
1
2
3
/* comment : membuat heading */
h1 { color :blue; font-size:18px; }
Untuk melakukan formating elemen-elemen HTML, selain menuliskan nama elemennya langsung seperti h1 (heading), div (divide), p (paragraph), CSS juga memperbolehkan kita untuk menspesifikasikan selector khusus yang disebut class dan id.

selector id digunakan untuk menempatkan style pada element yang unik (catatan penting : pada satu dokumen HTML tidak diperbolehkan elemen HTML memiliki selector id yang sama) attribut id dari elemen HTML di definisikan dengan tanda pagar #. contoh penggunaanya misalkan kita memiliki sebuah tag HTML sebagai berikut :
?
1
<p id="parameter">ini paragraph</p>
definisi id diatas pada CSS akan ditulis sebagai berikut :
?
1
2
3
4
5
6
#parameter {
    text-align:center;
    color:red;
    font-size:12px;
    font-weight:bold;
}

Apabila selector id ditujukan untuk elemen yang unik, maka selector class digunakan untuk mendefiniskan sebuah grup elemen HTML. Selector class seringkali digunakan untuk memberi gaya pada beberapa elemen HTML. Attribut class dari elemen HTML di definisikan CSS dengan tanda titik .. Contoh penggunaan misalkan kita memiliki beberapa elemen HTML sebagai berikut:
?
1
2
3
<h1 class="center">ini paragraph</h1>
<p class="center">ini paragraph</p>
<a href="http://www.w3function.com/" class="center">ini link</a>
Dengan penerapan CSS berikut maka semua text didalam elemen HTML yang memiliki class="center" akan berada di tengah-tengah
?
1
.center {text-align:center;}
Sebuah elemen HTML diperbolehkan memiliki lebih dari satu selector class namun penamaan class tidak boleh di awali angka, cara penerapan class lebih dari satu adalah dipisahkan dengan spasi misalnya
?
1
<h1 class="center blue largefont">ini paragraph</h1>
Semua definisi css di bawah akan diterapkan pada tag HTML diatas
?
1
2
3
.center {text-align:center;}
.blue {color:blue;}
.largefont{ font-size:18px; }
Cara penulisan selector id dan class selain dengan cara yang saya jelaskan di atas juga bisa ditempatkan didepan nama elemen HTML. berikut merupakan contoh penulisannya
?
1
2
3
p.center {text-align:center;}
h1.blue {color:blue;}
a#largefont{ font-size:18px; 
www.w3function.com
Read More »
Langganan: Postingan (Atom)