Tutorial Elektronika dan Komputer

Padding adalah area bebas yang berada didalam elemen dan terletak diantara border dengan isi. Berbeda dengan margin, padding terpengaruh oleh warna background. Padding dipakai untuk memberi jarak isi elemen agar enak dilihat, tidak terlalu sempit dan berimpit dengan garis border.

Cara Mengatur Padding

Untuk mengatur padding, kita menggunakan properti CSS padding. Nilai dari properti padding bisa diset beberapa cara, yaitu :

• panjang, artinya memberi nilai padding dengan satuan panjang seperti px, pt, cm dan lain-lain. Nilai default adalah 0px.
• persen (%), artinya nilai padding diambil dari persentase lebar dari isi elemen.

Contoh penggunaan CSS padding :

p {      
   padding : 3px;      
} 

Cara diatas merupakan cara singkat dalam mengatur padding. Dengan perintah diatas kita menentukan padding sebesar 3px untuk tiap sisi.

Mengatur padding secara individual

Seperti margin, kita juga bisa mengatur nilai padding dengan nilai yang berbeda untuk setiap sisi dengan cara sebagai berikut :

Mengatur padding individual dengan penulisan singkat

Dengan cara ini kita mengatur padding secara individual tiap sisi dengan menuliskan beberapa nilai pada properti padding. Ada beberapa cara yang bisa dilakukan, perhatikan contoh berikut ini :

p {  
   padding : 5px 3px 2px 4px;      
}   

Artinya kita mengatur nilai padding :

• padding atas = 5px 
• padding kanan = 3px 
• padding bawah = 2px 
• padding kiri = 4px

p {  
   padding : 5px 3px 2px;      
}   

Artinya kita mengatur nilai padding :

• padding atas = 5px 
• padding kanan dan kiri = 3px 
• padding bawah = 2px

p {  
   padding : 5px 3px;      
} 

Artinya kita mengatur nilai padding :

• padding atas dan bawah = 5px
• padding kanan dan kiri= 3px

Kita bisa berlatih CSS padding individual secara langsung disini >>

Mengatur padding individual dengan penulisan properti tersendiri

Selain penulisan diatas, kita bisa mengatur padding tiap sisi dengan properti tersendiri.
Ada empat properti CSS yang disediakan untuk mengatur padding tiap sisi, yaitu : 

• padding-top, untuk mengatur padding sisi atas
• padding-right, untuk mengatur padding sisi kanan
• padding-bottom, untuk mengatur padding sisi bawah
• padding-top, untuk mengatur padding sisi kiri

Contoh penggunaan CSS padding secara individual dengan properti :

p {
    padding-top: 10px;
}

Kita bisa berlatih CSS padding individual dengan properti disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• //www.w3schools.com/css/css_padding.asp

Margin adalah area bebas yang berada diantara beberapa elemen pada halaman html. Margin bisa juga diartikan sebagai jarak/spasi antara dua elemen atau lebih. Posisi margin berada diluar border dan merupakan area yang transparan serta tidak bisa diberi warna background.

Cara Mengatur Margin

Untuk mengatur margin kita menggunakan properti CSS margin. NIlai dari properti margin bisa diset beberapa cara, yaitu :

• auto, artinya browser memperkirakan sendiri nilai margin. Jika satu elemen maka akan diletakkan ditengah-tengah atau semetris antara atas, bawah, kiri dan kanan.
• panjang, artinya memberi nilai margin dengan satuan panjang seperti px, pt, cm dan lain-lain. Nilai default adalah 0px.
• persen (%), artinya nilai margin diambil dari persentase lebar dari isi elemen.
• inherit/pewarisan, artinya nilai margin diambil dari turunan nilai margin elemen induk.

Contoh penggunaan CSS margin :

p {    
   margin : 5px;    
} 

Cara diatas merupakan cara singkat dalam mengatur margin. Contoh diatas berarti kita menentukan margin sebesar 5px untuk tiap sisi elemen.

Mengatur margin secara individual

Cara yang telah disebutkan diatas adalah mengatur margin dengan nilai yang sama (5px) untuk setiap sisi.

Selain itu kita juga bisa mengatur nilai margin dengan nilai yang berbeda untuk setiap sisi dengan cara sebagai berikut :

Mengatur margin individual dengan penulisan singkat

Dengan cara ini kita mengatur margin secara individual tiap sisi dengan menuliskan beberapa nilai pada properti margin. Ada beberapa cara yang bisa dilakukan, perhatikan contoh berikut ini :

p {
   margin : 5px 3px 2px 4px;    
} 

Artinya kita mengatur nilai margin :

• margin atas = 5px
• margin kanan = 3px
• margin bawah = 2px
• margin kiri = 4px

p {
   margin : 5px 3px 2px;    
} 

Artinya kita mengatur nilai margin :

• margin atas = 5px
• margin kanan dan kiri = 3px
• margin bawah = 2px

p {
   margin : 5px 3px;    
} 

Artinya kita mengatur nilai margin :

• margin atas dan bawah = 5px
• margin kanan dan kiri= 3px

Kita bisa berlatih CSS margin individual secara langsung disini >>

Mengatur margin individual dengan penulisan properti tersendiri

Selain penulisan diatas, kita bisa mengatur margin tiap sisi dengan properti tersendiri. Ada empat properti CSS yang disediakan untuk mengatur margin tiap sisi, yaitu :

• margin-top, untuk mengatur margin sisi atas
• margin-right, untuk mengatur margin sisi kanan
• margin-bottom, untuk mengatur margin sisi bawah
• margin-top, untuk mengatur margin sisi kiri

Contoh penggunaan CSS margin secara individual dengan properti :

p {    
   margin-left : 5px;    
} 

Kita bisa berlatih CSS margin individual dengan properti disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• //www.w3schools.com/css/css_margin.asp

Outline adalah sebuah garis tepi diluar border. Outline terpisah dari elemen, hal ini berbeda dengan border yang measih merupakan bagian dari sebuah elemen. Garis outline dibentuk melingkari elemen dan membuat elemen berada didalam area outline.

Pada CSS disediakan beberapa properti untuk mengatur style outline diantaranya outline-style, outline-color dan outline-width. Penggunaan properti ini mirip dengan penggunaan CSS pada border.

Berikut ini beberapa properti CSS untuk outline dan penjelasannya :

1.outline-style

Adalah properti CSS yang digunakan untuk mengatur style outline. Ini merupakan properti utama dan merupakan syarat agar properti yang lain dapat bekerja.

Ada beberapa nilai yang bisa diset untuk outline-style, yaitu :

Nilai	Keterangan
none	tanpa outline
hidden	garis outline tersembunyi
dotted	garis outline titik-titik ..
dashed	garis outline strip-strip —
solid	outline garis penuh
double	outline dengan dua garis penuh
groove	garis outline efek alur 3D
ridge	garis outline dengan efek bukit / bubungan *
inset	garis outline dengan efek menjorok ke dalam *
outset	garis outline dengan efek menjorok ke luar *

Note :
* efek groove, risge, inset dan outset bergantung pada penggunaan warna pada properti outline-color.

Contoh penggunaan CSS outline-style :

div {
    outline-style: dotted;
}

Kita bisa berlatih CSS ouline-style disini >>

2. outline-width

Adalah properti CSS yang digunakan untuk mengatur lebar outline. Nilai properti width dinyatakan dalam px (pixel atau bisa juga dengan tiga preset outline thin, medium, dan thick. Seperti yang telah dijelaskan tadi, bahwa untuk menggunakan css border-width harus setelah border-style.

Contoh penggunaan CSS outline-width :

div {
    outline-style: dotted;
    outline-width: 1px;
}

Kita bisa berlatih CSS outline-width disini >>

3. outline-color

Adalah properti CSS yang digunakan untuk mengatur warna outline. Seperti outline-width, sebelum menggunakan properti outline-color harus diset dulu properti outline-style.

Ada tiga cara dalam menentukan nilai warna, yaitu :

• menggunakan nama warna seperti red, blue, green dan sebagainya
• menggunakan kode heksa warna seperti #ff0000 untuk warna merah dan #0000ff untuk warna biru, dan seterusnya.
• menggunakan nilai RGB seperti rgb(255,0,0) untuk warna merah, rgb(0,0,255) untuk warna biru dan seterusnya.

Contoh penggunaan CSS outline-color :

div {
    outline-style: dotted;
    outline-color: #f9c566;
}

Kita bisa berlatih CSS outline-color disini >>

6. outline 

Adalah properti yang merupakan penggabungan dari masing-masing properti diatas. Ini merupakan cara singkat untuk menulis CSS outline.

Contoh penggunaan CSS outline :

div {
   outline: 2px dotted #f9c566;
}

Kita bisa berlatih CSS outline disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• //www.w3schools.com/css/css_outline.asp

Border adalah garis tepi sebuah elemen html seperti box, tabel, image dan sebagainya. Border dalam kehidupan sehari-hari mirip dengan bingkai. Pada CSS disediakan beberapa properti untuk membuat dan mengatur style tampilan border. Properti-properti tersebut meliputi memilih style border, menentukan ukuran lebar border, warna border dan beberapa elemen border.

Berikut ini beberapa properti CSS untuk border dan penjelasannya :

1.border-style

Adalah properti CSS yang digunakan untuk mengatur style sebuah border. Properti ini merupakan properti utama dan merupakan syarat agar properti yang lain dapat bekerja.

Ada beberapa nilai yang bisa diset untuk border-style, yaitu :

Nilai	Keterangan
none	tanpa garis border
dotted	garis border titik-titik ..
dashed	garis border strip-strip —
solid	garis border penuh
double	border dengan dua garis penuh
groove	garis border efek alur 3D
ridge	garis border dengan efek bukit / bubungan *
inset	garis border dengan efek menjorok ke dalam *
outset	garis border dengan efek menjorok ke luar *

Note :
* efek groove, risge, inset dan outset bergantung pada penggunaan warna pada properti border-color.

Contoh penggunaan CSS border-style :

div {
    border-style: solid;
}

Kita bisa berlatih CSS border-style disini >>

2. border-width

Adalah properti CSS yang digunakan untuk mengatur lebar border. Nilai properti width dinyatakan dalam px (pixel atau bisa juga dengan tiga preset border thin, medium, dan thick. Seperti yang telah dijelaskan tadi, bahwa untuk menggunakan css border-width harus setelah border-style.

Contoh penggunaan CSS border-width :

div {
    border-style: solid;
    border-width: 1px;
}

Kita bisa berlatih CSS border-width disini >>

3. border-color

Adalah properti CSS yang digunakan untuk mengatur warna border. Seperti border-width, sebelum menggunakan properti border-color harus diset dulu properti style.

Ada tiga cara dalam menentukan nilai warna, yaitu :

• menggunakan nama warna seperti red, blue, green dan sebagainya
• menggunakan kode heksa warna seperti #ff0000 untuk warna merah dan #0000ff untuk warna biru, dan seterusnya.
• menggunakan nilai RGB seperti rgb(255,0,0) untuk warna merah, rgb(0,0,255) untuk warna biru dan seterusnya.

Contoh penggunaan CSS border-color :

div {
    border-style: solid;
    border-color: #98bf21;
}

Kita bisa berlatih CSS border-color disini >>

4. border-style individual

Adalah properti CSS yang digunakan untuk mengatur style tiap-tiap sisi border. Ada dua cara dalam menuliskan CSS border-style individual yaitu dengan cara langsung pada border style atau dengan properti tersendiri.

Cara langsung bisa dikakukan pada properti border-style dengan cara memisahkan masing-masing nilai dengan spasi. Urutan sisi pada penulisan nilai adalah atas, kanan, bawah dan kiri.

Contoh penggunaan CSS border-style individual secara langsung :

div {
    border-style: solid dashed dotted dashed;
}

Kita bisa berlatih CSS border-style individual langsung disini >> 

Cara kedua dilakukan dengan mengeset langsung dengan properti tersendiri.

Ada empat properti border-style individual :

• border-top-style, untuk mengatur sisi atas
• border-right-style, untuk mengatur sisi kanan
• border-bottom-style, untuk mengatur sisi bawah
• border-left-style, untuk mengatur sisi kiri

Contoh penggunaan CSS border-style individual :

div {
    border-top-style: solid;
    border-right-style: dashed;
    border-bottom-style: dotted;
    border-left-style: dashed;
}

Kita bisa berlatih CSS border-style individual tidak langsung disini >>

5. border 

Adalah properti yang merupakan penggabungan dari masing-masing properti diatas. Ini merupakan cara singkat untuk menulis CSS border.

Contoh penggunaan CSS border :

div {
   border: 1px solid #98bf21;
}

Kita bisa berlatih CSS border disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• //www.w3schools.com/css/css_border.asp

Dalam membuat design layout sebuah halaman website, kita membagi halaman menjadi beberapa area. Masing-masing area ini didefinisikan sebagai box model dan bisa ditempatkan diantara elemen html. Misalnya kita membagi halamman web menjadi 4 bagian utama , yaitu header, menu, content dan footer. Kemudian bagian content (isi) kita bagi lagi menjadi 2 bagian yaitu main-content dan sidebar.

Bagian tersebut kita buat dengan tag <div> dengan menggunakan atribut pengenal id, seperti <div id=”header”> atau <div id=”content”>. Saat membuat box model dengan div kita bisa menetapkan lebar box dengan properti width dan tinggi box dengan properti height. Agar lebih fleksibel, tinggi box juga bisa diatur dengan properti min-height atau max-height.

Didalam box tersebut kita bisa menaruh isi berupa text atau elemen html yang lain dan juga bisa membuat sebuat border untuk box. Kemudian kita juga bisa mengatur jarak antar box menggunakan properti margin dan mengatur jarak antara border box dengan isi menggunakan properti padding.

Perhatikan gambar ilustrasi dari content, border, margin dan padding pada box model berikut ini:

Dan berikut ini penjelasan beberapa properti yang digunakan untuk membuat box model dengan div :

1. width

Adalah properti CSS yang digunakan untuk mengatur lebar sebuah box model. Nilai properti ini lazim dinyatakan dalam px (pixel) atau % (persen).
Contoh penggunaan CSS width pada box model :

div {
    width: 300px;
}

2. height

Adalah properti CSS yang digunakan untuk mengatur tinggi sebuah box model. Nilai properti ini juga lazim dinyatakan dalam px (pixel) atau % (persen).
Contoh penggunaan CSS height pada box model :

div {
    height: 300px;
}

3. min-height

Adalah properti CSS yang digunakan untuk mengatur tinggi minimum sebuah box model. Biasanya kita gunakan ini untuk menjaga tampilan agar tetap proporsional tidak terpengaruh dari tinggi isi halaman. Nilai properti min-height dinyatakan dalam px (pixel) atau % (persen).
Contoh penggunaan CSS min-height pada box model :

div {
    min-height: 300px;
}

4. max-height

Adalah properti CSS yang digunakan untuk mengatur tinggi maksimal sebuah box model. Biasanya kita gunakan ini untuk menjaga tampilan agar tetap proporsional tidak melebihi ukuran yang ditetapkan. Nilai properti max-height juga dinyatakan dalam px (pixel) atau % (persen).
Contoh penggunaan CSS max-height pada box model :

div {
    min-height: 300px;
}

5. border

Adalah properti CSS yang digunakan untuk menetapkan border sebuah box-model. Dalam mengatur border kita menetapkan beberapa nilai berikut :

• ketebalan garis border, dengan satuan px misalnya 1px. style
• garis border, misalnya solid (garis penuh), dotted (titik-titik) atau dashed (strip-strip) 
• warna garis border, misalnya red, blue atau #ff0000. 

Contoh penggunaan CSS border pada box model :

div {  
   border: 1px solid #fa5698;  
}

6. margin

Ada properti CSS yang digunakan untuk mengatur jarak box model terhadap box model atau elemen lain disamping kiri, kanan atau sebelah atas atau bawah. Urutan nilai margin adalah atas, kanan, bawah dan kiri.

Jadi jika diset “10px 2px 5px 3px” artinya :

• margin atas = 10px
• margin kanan = 2px
• margin bawah = 5px
• margin kiri = 3px

Contoh penggunaan CSS margin pada box model:

div {  
   margin : 10px 2px 5px 3px;  
}  

Selain itu kita juga bisa menetapkan margin khusus untuk bagian tertentu saja misalnya atas seperti contoh berikut ini :

div {  
   margin-top : 10px;  
}  

Jika nilai margin sama untuk tiap bagian, cukup ditulis sekali saja seperti ini :

div {  
   margin : 10px;  
}  

7. padding

Ada properti CSS yang digunakan untuk mengatur jarak antara box model dengan isi. Urutan nilai dari padding sama dengan margin, yaitu atas, kanan, bawah dan kiri.

Contoh penggunaan CSS padding pada box model:

div {  
   padding : 2px 2px 2px 2px;  
}  

Selain itu kita juga bisa menetapkan padding khusus untuk bagian tertentu saja misalnya atas seperti contoh berikut ini :

div {  
   padding-top : 1px;  
}  

Jika nilai padding sama untuk tiap bagian seperti contoh diatas, cukup ditulis sekali saja seperti ini :

div {  
   padding : 2px;  
}  

Kita bisa berlatih CSS box model disini >>

Note :
Kita juga bisa menerapkan properti-properti CSS untuk elemen html pada isi box seperti pada text, list atau tabel yang telah kita pelajari sebelumnya.

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• //www.w3schools.com/css/css_boxmodel.asp

Dengan CSS kita juga dapat mengatur style sebuah tabel agar tampak lebih cantik dan menarik. Tersedia beberapa properti untuk mengatur style tabel diantaranya untuk mengatur border, warna background, warna teks, margin dan padding serta tak lupa properti untuk mengatur lebar kolom dan tinggi baris.

Selain properti dasar diatas, kita juga bisa menetapkan style tabel pada kondisi tertentu misalnya kondisi hover, yaitu saat ada mouse berada diatas baris. Kita juga bisa menetapkan font tertentu dengan mamanfaatkan selector table.

Dalam mengatur style sebuah tabel, kita juga bisa mengatur style untuk bagian-bagian tabel seperti tr, th dan td. Ada beberapa properti yang hanya bekerja pada tabel dan baris (tr) seperti height dan ada juga properti yang hanya bekerja pada tabel dan kolom (th atau td) seperti width.

Berikut ini beberapa properti dasar untuk mengatur style tabel :

1. border

Adalah properti CSS yang digunakan untuk menetapkan border sebuah tabel. Dalam mengatur border kita menetapkan beberapa nilai berikut :

• ketebalan garis border, dengan satuan px misalnya 1px.
• style garis border, misalnya solid (garis penuh), dotted (titik-titik) atau dashed (strip-strip)
• warna garis border, misalnya red, blue atau #ff0000.

Contoh penggunaan CSS border pada tabel :

table, th, td {
   border: 1px solid #ffff00;
}

Kita bisa berlatih CSS border disini >>

2. border-collapse

Adalah properti CSS yang digunakan untuk menetapkan sebuah border antar cell dilebur jadi satu border atau dipisah jadi dua border.

Contoh penggunaan CSS border-collapse pada tabel :

table {
   border-collapse: collapse;
}

Kita bisa berlatih CSS border-collapse disini >>

3. width

Ada properti CSS yang digunakan untuk menetapkan lebar tabel atau lebar kolom pada tabel. Jadi properti width hanya bekerja pada selector table dan th atau td saja. Nilai width bisa berupa px (pixel) atau % (persen)

Contoh penggunaan CSS width pada tabel dengan px:

table {
   width: 500px;
}

Contoh penggunaan CSS width pada tabel dengan px:

table {
   width: 100%;
}

Contoh penggunaan CSS width pada th atau td:

th,td {
   width: 100px;
}

Kita bisa berlatih CSS width disini >>

4. height

Ada properti CSS yang digunakan untuk menetapkan tinggi tabel atau tinggi baris pada tabel. Jadi properti height hanya bekerja pada selector table dan tr saja. Nilai height untuk tabel bisa dinyatakan dalam px (pixel).= atau % (persen) sedangkan nilai height untuk tr biasanya dinyatakan dalam px (pixel).

Contoh penggunaan CSS height pada tabel:

table {
   height: 500px;
}

Contoh penggunaan CSS height pada tr:

tr {
   height: 25px;
}

Kita bisa berlatih CSS height disini >>

5. text-align

Ada properti CSS yang digunakan untuk mengatur alignment text pada tabel. Nilai properti ini bisa diset left, right, center.

Contoh penggunaan CSS text-align pada th:

th {
   text-align: center ;
}

Kita bisa berlatih CSS text-align disini >>

6. vertical-align

Ada properti CSS yang digunakan untuk mengatur posisi vertikal alignment text pada tabel. Nilai peopert ini bisa diset top atau bottom. Jika tidak diset maka otomatis vertikal alignment pada posisi tengah. Untuk menempatkan text pada posisi tertentu bisa digunakan properti padding.

Contoh penggunaan CSS vertical-align pada th:

td {
   vertical-align: bottom ;
}

Kita bisa berlatih CSS vertical-align disini >>

7. margin

Ada properti CSS yang digunakan untuk mengatur jarak tabel terhadap elemen lain disamping kiri, kanan atau sebelah atas atau bawah. Urutan nilai margin adalah atas, kanan, bawah dan kiri.

Jadi jika diset 10px 2px 5px 3px artinya :

• margin atas = 10px
• margin kanan = 2px
• margin bawah = 5px
• margin kiri = 3px

Contoh penggunaan CSS margin pada tabel:

table {
   margin : 10px 2px 5px 3px;
}

Kita bisa berlatih CSS margin disini >>

8. padding

Ada properti CSS yang digunakan untuk mengatur jarak antara border tabel dengan isi tabel. Urutan nilai dari padding sama dengan margin, yaitu atas, kanan, bawah dan kiri. Sebaiknya kita menggunakan padding hanya pada th atau td saja.

Contoh penggunaan CSS padding pada td:

td {
   padding : 10px 2px 5px 3px;
}

Kita bisa berlatih CSS padding disini >>

9. color

Ada properti CSS yang digunakan untuk mengatur warna text pada isi tabel. Nilai color bisa berupa nama color, nilai hexa atau nilai RGB seperti telah dijelaskan pada tulisan sebelumnya tentang CSS format text.

Contoh penggunaan CSS color pada th:

table {
   color : #ff9834;
}

Kita bisa berlatih CSS color disini >>

10. background-color

Ada properti CSS yang digunakan untuk mengatur warna background cell pada tabel. Nilai color juga bisa berupa nama color, nilai hexa atau nilai RGB seperti telah dijelaskan pada tulisan sebelumnya tentang CSS format text.

Contoh penggunaan CSS background-color pada tabel:

table {
   background-color : #23df94;
}

Kita bisa berlatih CSS background-color disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• //www.w3schools.com/css/css_table.asp