Selain menggunakan selector elemen, class dan id pada CSS kita juga bisa menggunakan selector atribut. Dengan cara ini kita bisa mengatur style hanya pada elemen dengan atribut tertentu yang dipilih pada selector. Untuk menggunakan atribut pada selector kita menempatkan atribut setelah elemen dengan diapit oleh tanda [].

Kita juga bisa menambahkan nilai/value pada selector dengan beberapa operator seperti =, ~=, |= dan lainnya. Dengan cara ini kita bisa mengatur style komponen form tertentu seperti input type=text atau input type=submit.

Berikut ini beberapa cara menggunakan selector atribut pada CSS:

1. selector [atribut]

Digunakan untuk selector elemen dengan atribut tertentu.

Berikut ini contoh selector untuk elemen <a> dengan atribut target :

a[target] {
    background-color: blue;
}

Kita belajar selector [atribut] disini >>

2. selector [atribut=value]

Digunakan untuk selector elemen dengan atribut dan value tertentu.

Berikut ini contoh selector untuk elemen <input> dengan atribut “type” dengan value “text”:

input[type="text"] {
    background-color: green;
}

Kita belajar selector [atribut=value] disini >>

3. selector [atribut~=value]

Digunakan untuk selector elemen dengan atribut yang mempunyai value berisi kata tertentu.

Berikut ini contoh selector untuk elemen <title> yang mempunyai value berisi kata “buku” :

[title~="buku"] {
    border: 3px solid red;
}

Contoh diatas akan mengenai elemen dengan title=”buku”, title=”nulis buku”, title=”buku tulis” namun tidak untuk title=”buku-saya” atau title=”bukuku”.

Kita belajar selector [atribut~=value] disini >>

4. selector [atribut|=value]

Digunakan untuk selector elemen dengan atribut yang mempunyai value dengan kata depan tertentu.

Berikut ini contoh untuk selector elemen <title> dengan value yang diawali dengan kata depan “buku”:

[class|="buku"] {
    background: red;
}

Kita belajar selector [atribut|=value] disini >>

5. selector [atribut^=value]

Digunakan untuk selector elemen dengan atribut yang mempunyai value yang diawali kata tertentu.

Berikut ini contoh untuk selector elemen <title> dengan value yang diawali dengan kata “buku”:

[class^="buku"] {
    background: green;
}

Kita belajar selector [atribut^=value] disini >>

6. selector [atribut$=value]

Digunakan untuk selector elemen dengan atribut yang mempunyai value yang diakhiri kata tertentu.

Berikut ini contoh untuk selector elemen <title> dengan value yang diawali dengan kata “tulis”:

[class$="tulis"] {
    background: blue;
}

Kita belajar selector [atribut$=value] disini >>

7. selector [atribut*=value]

Digunakan untuk selector elemen dengan atribut yang mempunyai value berisi nilai tertentu (tidak harus berupa kata).

Berikut ini contoh selector untuk elemen <title> yang mempunyai value berisi kata “bu”:

[class*="bu"] {
    background: yellow;
}

Kita belajar selector [atribut*=value] disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi:

• http://www.w3schools.com/css/css_attribute_selectors.asp

Pseudo elemen adalah elemen semu berupa keyword yang ditambahkan pada selector dengan tujuan untuk mengatur style dari sebagian elemen saja. Beberapa pseudo elemen hanya bisa dipakai pada elemen blok saja, seperti div dan p.

Kegunaan dari pseudo elemen diantaranya adalah untuk mengatur tampilan baris pertama sebuah paragraf atau sekedar menambahkan dekorasi image pada akhir paragraf.

Cara penulisan pseudo elemen

Untuk menuliskan pseudo elemen, kita menggunakan tanda dobel titik dua (::) diantara selector elemen dan pseudo elemen.

selector::pseudo-element {
    property:value;
}

Berikut ini beberapa pseudo elemen dan penjelasannya :

1. ::after

Adalah pseudo elemen yang dipakai untuk menambahkan sesuatu pada akhir elemen.

p::after {
    content: url(splitter.gif);
}

Pada contoh diatas berarti kita menambahkan gambar splitter.gif pada akhir paragraf.

Kita bisa belajar pseudo elemen ::after disini >>.

2. ::before

Adalah pseudo elemen yang dipakai untuk menambahkan sesuatu pada awal elemen.

p::before {
    content: url(heading.gif);
}

Pada contoh diatas berarti kita menambahkan gambar heading.gif pada akhir paragraf.

Kita bisa belajar pseudo elemen ::before disini >>.

3. ::first-letter

Adalah pseudo elemen yang dipakai untuk mengatur style dari huruf pertama dari text sebuah elemen. Pseudo elemen ::first-letter hanya bisa dipakai pada blok elemen saja.

p::first-letter {
    color: #0000FF;
    font-size: 20px;
}

Pada contoh diatas berarti kita menampilkan huruf pertama dari text pada paragraf dengan warna biru dengan ukuran font 20px.

Kita bisa belajar pseudo elemen ::first-letter disini >>.

4. ::first-line

Adalah pseudo elemen yang dipakai untuk mengatur style dari baris pertama pada sebuah elemen. Pseudo elemen ::first-line hanya bisa dipakai pada blok elemen saja.

p::first-line {
    color: #00FF00;
    font-variant: small-caps;
}

Pada contoh diatas berarti kita menampilkan baris pertama pada paragraf dengan warna hijau dengan varian font small-caps.

Kita bisa belajar pseudo elemen ::first-line disini >>.

5. ::selection

Adalah pseudo elemen yang dipakai untuk mengatur style dari bagian elemen yang diselect oleh user. Properti yang bisa diterapkan pada pseudo elemen ::selection adalah color, background, cursor, dan outline.

::selection {
    color: #FF0000;
    background: yellow;
}

Pada contoh diatas berarti kita mengubah tampilan obyek yang diselect oleh pengguna dengan warna merah dengan background kuning.

Kita bisa belajar pseudo elemen ::selection disini >>.

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi:

• http://www.w3schools.com/css/css_pseudo_elements.asp

Pseudo Class adalah keyword yang ditambahkan pada selector untuk mendefinisikan  kondisi kondisi tertentu yang terjadi pada sebuah elemen. Kondisi tersebut misalnya pada link adalah saat dikunjungi, saat ada cursor mouse diatasnya atau saat berada dalam kondisi normal.

Dalam CSS ada banyak sekali pseudo class yang bisa dipilih. Untuk menuliskan pseudo class pada sebuah selector elemen kita menggunakan tanda baca titik dua ( :), contoh a :hover adalah menunjukkans selector untuk elemen link (a) saat ada mouse diatasnya (hover).

Cara penulisan pseudo class :

selector:pseudo-class {
    property: value;
}

Contoh penggunaan pseudo class untuk elemen a :

/* link belum dikunjungi*/
a:link {
    color: #FF0000;
}

/* link sudah dikunjungi */
a:visited {
    color: #00FF00;
}

/* ada cursor mouse diatas link */
a:hover {
    color: #FF00FF;
}

/* link yang terpilih */
a:active {
    color: #0000FF;
}

Berikut ini beberapa pseudo class dan penjelasannya :

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• http://www.w3schools.com/css/css_pseudo_classes.asp

Dalam menggunakan CSS, kita bisa menggunakan kombinasi beberapa selector yang digabung dengan sebuah combinator CSS. Combinator CSS ini menjelaskan bagaimana hubungan antara beberapa selector tersebut.

Ada empat kombinator CSS yang bisa dipakai, yaitu :

1. descendant selector
2. child selector
3. adjacent sibling selector
4. general sibling selector

Berikut ini penjelasan beberapa combinator tersebut :

1. descendant selector

Adalah kombinasi selector turunan. Artinya selector yang pertama merupakan elemen utama dan selector berikutnya merupakan elemen turunan yang berada dalam blok elemen utama. Jadi deklarasi CSS pada descendant selector berlaku untuk semua elemen turunan yang ada dalam blok elemen utama.

Untuk menggunakan kombinasi descendant selector kita gunakan operator dengan karakter spasi.

Contoh penggunaan descendant selector :

div p {
    background-color: yellow;
}

Untuk lebih jelas, kita bisa berlatih descendant selector disini >>.

2. child selector

Adalah kombinasi selector anak. Artinya selector yang pertama merupakan elemen induk dan selector berikutnya merupakan elemen anak dari elemen utama. Jadi semua deklarasi CSS pada child selector berlaku untuk semua elemen anak yang ada dalam blok elemen induk.

Perbedaan child selector dengan descendant selector adalah:

• kombinasi child selector berlaku pada elemen yang berada secara langsung dibawah elemen induk dan tidak berlaku untuk elemen yang berada dibawah elemen lain walaupun masih didalam blok elemen induk.
• kombinasi descendant selector berlaku untuk semua elemen turunan yang ada dalam elemen induk

Untuk menggunakan kombinasi child selector kita gunakan operator dengan karakter >.

Contoh penggunaan child selector :

div > p {
    background-color: yellow;
}

Untuk lebih jelas, kita bisa berlatih child selector disini >>.

3. adjacent sibling selector

Adalah kombinasi CSS untuk elemen yang berdekatan dan berada tepat setelah blok elemen pertama. Jadi elemen kedua tidak berada didalam elemen pertama.

Untuk menggunakan kombinasi adjacent sibling selector kita gunakan operator dengan karakter +.

Contoh penggunaan adjacent sibling selector :

div + p {
    background-color: yellow;
}

Untuk lebih jelas, kita bisa berlatih adjacent sibling selector disini >>.

4. general sibling selector

Adalah kombinasi CSS untuk elemen yang berdekatan. Deklarasi CSS berlaku untuk semua elemen yang dituju oleh selector kedua yang berada setelah elemen pertama. Seperti adjacent sibling, elemen kedua harus tidak berada didalam elemen pertama.

Untuk menggunakan kombinasi general sibling selector kita gunakan operator dengan karakter ~.

Contoh penggunaan general sibling selector :

div ~ p {
    background-color: yellow;
}

Untuk lebih jelas, kita bisa berlatih general sibling selector disini >>.

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• http://www.w3schools.com/css/css_combinators.asp

Ada beberapa cara yang bisa dipakai untuk mengatur alignment sebuah elemen blok secara horizontal. Seperti diketahui, untuk mengatur alignment sebuah teks kita bisa menggunakan properti text-align. Namun properti ini tidak bisa diterapkan pada elemen blok. Untuk itu kita bisa menggunakan beberapa kombinasi properti untuk mengatur elemen sebuah elemen blok.

Elemen blok adalah sebuah elemen yang bisa mengambil keseluruhan lebar halaman dan memiliki line break sebelum dan sesudahnya. Beberapa contoh elemen blok diantaranya <h1>, <p> dan <div>.
Untuk mengatur layout halaman kita memerlukan pengaturan alignment pada tiap-tiap elemen blok ini.

Berikut ini akan dijelaskan beberapa cara untuk mengatur elemen blok secara horizontal :

1. Membuat alignment rata tengah dengan properti margin.

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.

Kita bisa membuat sebuah elemen blok berada ditengah dengan menetapkan nilai auto pada properti margin atau kombinasi dari margin-left dan margin-right. Syarat yang harus diperhatikan agar cara ini bisa bekerja adalah kita harus menetapkan width dibawah 100%.

Contoh penggunaan properti margin untuk membuat alignment rata tengah :

.center {
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}

Kita bisa belajar penggunaan properti margin untuk membuat alignment rata tengah disini >>

2. Membuat alignment rata kiri atau rata kanan dengan properti position.

Posisi sebuah elemen dapat diatur menggunakan CSS misalnya kita mau tempatkan diatas, kiri, kanan atau dibawah. Kita juga bisa menempatkan sebuah elemen secara bertumpuk (ovelap) dimana satu elemen berada diatas elemen yang lain. Dengan CSS kita juga bisa membuat aturan posisi saat elemen terlalu besar pada halaman html.

Kita bisa membuat sebuah elemen blok berada di kiri atau di kanan dengan menetapkan nilai absolute pada properti position. Kemudian untuk membuat rata kiri kita tetapkan nilai 0px pada properti left dan untuk membuat rata kanan kita tetapkan nilai 0px pada properti right.

Contoh penggunaan properti position untuk membuat alignment rata kiri :

.left {
    position: absolute;
    left: 0px;
    width: 500px;
}

Contoh penggunaan properti position untuk membuat alignment rata kanan :

.right {
    position: absolute;
    right: 0px;
    width: 500px;
}

Kita bisa belajar penggunaan properti position untuk membuat alignment rata kiri atau kanan disini >>

3. Membuat alignment rata kiri atau rata kanan dengan properti float.

Selain properti position, kita juga bisa menggunakan properti float untuk membuat sebuah blok elemen rata kiri atau rata kanan. Floating elemen adalah menempatkan elemen secara mengambang pada halaman dengan mengacu pada sebuah titik tambatan berada dikiri atau dikanan.

Contoh penggunaan properti float untuk membuat alignment rata kiri :

.left {
    float: left;
    width: 500px;
}

Contoh penggunaan properti float untuk membuat alignment rata kanan :

.right {
    float: right;
    width: 500px;
}

Kita bisa belajar penggunaan properti float untuk membuat alignment rata kiri atau kanan disini >>

Mengatasi perbedaan tampilan pada lain browser

Ketika kita mengatur alignment sebuah blok elemen dengan cara seperti ini, sebaiknya kita tetapkan dulu nilai margin dan padding untuk elemen <body> misal sebesar 0px. Ini mencegah perbedaan tampilan pada beberapa browser yang berbeda.

Contoh penulisan properti margin dan padding pada elemen body :

body {
    margin: 0;
    padding: 0;
}

.container {
    position: relative;
    width: 100%;
}

.right {
    position: absolute;
    right: 0px;
    width: 500px;
}

Pada browser IE8 dan sebelumnya kita menjumpai saat menggunakan properti position dan float. Masalah tersebut adalah saat sebuah container elemen memiliki lebar tertentu dan deklarasi !DOCTYPE tidak ada maka pada halaman browser IE8 dan sebelumnya akan ditambahkan margin sebesar 17px pada sisi kanan.

Ini terlihat seperti spasi untuk sebuah scrol bar. Untuk mengatasi hal itu pastikan kita deklarasikan !DOCTYPE sebelum menggunakan properti position atau float.

Contoh penulisan DOCTYPE pada halaman HTML :

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
 <html>  
 <head>  
 ... isi head  
 </head>  
 <body>  
 ... isi body  
 </body>  
 </html  

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• http://www.w3schools.com/css/css_align.asp

Floating elemen adalah menempatkan elemen secara terapung pada halaman dengan mengacu pada sebuah titik tambatan berada dikiri atau dikanan. Untuk membuat floating elemen kita menggunakan propert CSS float. Penggunaan CSS Float biasanya dipakai untuk menampilkan image, namun kadang dipakai juga oleh elemen lain terutama saat membuat layout.

Dengan CSS float, sebuah elemen bisa dipaksa untuk berada dikiri atau berada di kanan. Elemen hanya floating secara horizontal ke kiri atau ke kanan, tidak bisa ke atas atau ke bawah. Elemen yang dikenakan CSS float akan bergerak ke kiri atau kekanan pada suatu area tertentu pada elemen contain.

Elemen sebelum floating elemen tidak terkena efek CSS, namun elemen sesudahnya akan ditampilkan mengikuti alur dari floating elemen. Sebagai contoh jika sebuah image kita float ke kanan maka teks sesudahnya akan mengikutinya disebelah kiri.

Contoh penggunaan CSS float :

img {
    float: right;
}

Kita bisa belajar CSS float disini >>

Merangkai Floating Elemen

Kita bisa menyusun elemen secara rapi dengan memanfaatkan CSS floating. Caranya adalah dengan menetapkan properti width dan height pada tiap elemen yang akan disusun tersebut. Kemudian untuk membuat jarak antar elemen kita gunakan properti margin.

Contoh penggunaan CSS float untuk merangkai elemen:

.preview {
    float: left;
    width: 100px;
    height: 80px;
    margin: 4px;
}

Kita bisa belajar CSS float untuk merangkai disini >>

Menghilangkan efek floating

Untuk menghilangkan efek floating pada elemen sesudah floating elemen kita menggunakan properti CSS clear, seperti contoh berikut ini :

.text_note {
    clear: both;
}

Kita bisa belajar menghilangkan efek CSS float disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• http://www.w3schools.com/css/css_float.asp

Posisi sebuah elemen dapat diatur menggunakan CSS misalnya kita mau tempatkan diatas, kiri, kanan atau dibawah. Kita juga bisa menempatkan sebuah elemen secara bertumpuk (ovelap) dimana satu elemen berada diatas elemen yang lain. Dengan CSS kita juga bisa membuat aturan posisi saat elemen terlalu besar pada halaman html.

Untuk mengatur posisi elemen, kita bisa menggunakan properti CSS top, bottom, left dan right. Namun properti-properti ini akan bekerja hanya jika sebelumnya kita mengeset properti position untuk menentukan metode position.

Metode CSS dalam menentukan posisi sebuah elemen ada empat macam, yaitu :

• Static Positioning
• Fixed Positioning
• Relative Positioning
• Absolute Positioning
• Ovelapping Elements

Berikut ini penjelasan dari beberapa metode dalam mengatur posisi sebuah elemen :

1. Static Positioning

Adalah cara menempatkan elemen secara statis bergantung dari posisi penempatannya secara default pada sebuah halaman. Metode penemptan secara static tidak terpengaruh properti top, bottom, left dan right.

Contoh penempatan elemen secara static :

 <html>  
 <head>  
  <title>Contoh Penempatan Elemen Statis</title>  
 </head>  
 <body>  
  <p>Tulisan paling atas</p>  
  <p>Tulisan dibawahnya</p>  
 </body>  
 </html>

Pada contoh diatas kita membuat penempatan secara statis untuk paragraf pertama pada posisi paling atas dan paragraf kedua yang berada dibawah paragraf pertama.

2. Fixed Positioning

Adalah cara penempatan elemen secara tetap (fixed) pada sebuah area pada browser. Posisi elemen tidak akan berubah meskipun kita men-scroll browser.

Penempatan elemen secara Fixed membuat elemen keluar dari struktur penempatan elemen pada sebuah halaman. Halaman akan menganggap elemen terebut tidak ada dan akibatnya elemen dengan fixed position dapat mengoverlap elemen lain pada halaman tersebut.

Contoh penempatan elemen secara fixed :

p.pos_fixed {
    position: fixed;
    top: 50px;
    right: 10px;
}

Kita bisa berlatih CSS Fixed Position disini >>

3. Relative Positioning

Adalah cara menempatkan elemen secara relatif dari posisi elemen tersebut pada sebuah halaman. Jadi kita menempatkan elemen dengan jarak tertentu dari posisi elemen tersebut.

Sebuah isi dengan relative position dapat saja mengoverlap elemen yang lain namun space-nya tetap mengacu pada aturan halaman normal. Relative Positioning biasanya digunakan sebagai container block untuk elemen yang diposisikan secara absolut.

Contoh penempatan elemen secara relative :

h2.pos_left {
    position: relative;
    left: -50px;
}

h2.pos_right {
    position: relative;
    right: 30px;
}

h2.pos_top {
    position: relative;
    top: -50px;
}

Kita bisa berlatih CSS Relative Position disini >>

4. Absolute Positioning

Adalah Cara penempatan elemen secara absolute yaitu mengacu pada posisi relatif dari elemen induk pertama yang memiliki posisi lain selain statis. Jika tidak ditemukan, maka acuan elemen adalah <html>.

Contoh penempatan elemen secara absolute :

h2 {
    position: absolute;
    left: 120px;
    top: 100px;
} 

Elemen dengan absolute position keluar dari struktur penempatan elemen pada sebuah halaman. Halaman akan menganggap elemen terebut tidak ada dan akibatnya elemen dengan absolute position dapat mengoverlap elemen lain pada halaman tersebut.

Kita bisa berlatih CSS Absolute Position disini >>

5. Overlapping Elements

Adalah cara untuk mengatur overlap elemen karena berada diluar penempatan elemen pada halaman html. Properti yang digunakan untuk mengatur penempatan overlap elemen adalah z-index.

Nilai z-index bisa berupa nilai positif atau negatif. Nilai z-index yang lebih kecil akan berada dibawah elemen yang nilai z-indexnya lebih besar.

Contoh penggunaan z-index pada overlap elemen :

img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

Kita bisa berlatih Overlap elemen disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• http://www.w3schools.com/css/css_positioning.asp

Dengan CSS, kita bisa mengatur bagaimana sebuah elemen ditampilkan pada halaman html. Ada dua properti yang bisa dipakai, yaitu display dan visibility. Sebagai contoh untuk menyembunyikan elemen kita gunakan properti visibility dengan nilai hidden, sementara untuk membuat elemen agar tidak ditampilkan (tidak memakan ruang) kita gunakan properti display dengan nilai none.

Berikut ini penjelasan tentang CSS display dan visibility:

1.visibility:hidden

Adalah cara untuk membuat sebuah elemen tersembunyi pada halaman html. Dengan cara ini elemen tetap berada pada suatu ruang pada halaman namun tidak ditampilkan.

Contoh penggunaan visibility:hidden :

h1.hidden {
    visibility: hidden;
}

Kita bisa belajar CSS visibility:hidden disini >>

2. display:none

Artinya kita membuat sebuah elemen tidak ditampilkan dan tidak memakan ruang pada halaman. Dengan cara ini kita membuat sebuah object seolah tidak ada pada halaman.

Contoh penggunaan display:none :

h1.hidden {
    display: none;
}

Kita bisa belajar CSS display:none disini >>

3. display:inline

Adalah cara untuk membuat sebuah elemen ditampilkan pada bagian tertentu dalam satu baris. Inline artinya sebuah elemen hanya mengambil sebagian kecil dari lebar area yang tersedia. Sebagai contoh sebuah ul atau ol jika dikenakan CSS display inline maka akan ditampilkan dalam satu baris saja.

Contoh penggunaan display:inline :

li {
    display: inline;
}

Kita bisa belajar CSS display:inline disini >>

4. display:block

Adalah cara untuk membuat sebuah elemen ditampilkan dalam satu blok baris penuh dengan mengambil keseluruhan lebar yang tersedia.

Contoh penggunaan display:block :

a {
    display: block;
}

Kita bisa belajar CSS display:block disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• http://www.w3schools.com/css/css_display_visibility.asp

Kita bisa menentukan dimensi ukuran panjang dan lebar terhadap suatu elemen html dengan menggunakan CSS. Ada beberapa properti yang disediakan, diantaranya width untuk mengatur lebar dan dan height untuk mengatur tinggi. Selain itu ada properti untuk mengeset nilai minimum dan maksimum untuk dimensi lebar dan tinggi.

Berikut ini beberapa properti CSS untuk menentukan dimensi ukuran dan penjelasannya :

1. width

Adalah properti CSS yang digunakan untuk menentukan lebar sebuah elemen. Nilai width ini merupakan lebar elemen tidak termasuk padding, border dan margin.

Nilai dari properti width bisa diset beberapa cara, yaitu :

• auto, artinya browser memperkirakan sendiri nilai width.
• panjang, artinya nilai width ditentukan dengan satuan panjang seperti px, pt, cm dan lain-lain. Nilai default adalah 0px.
• persen (%), artinya nilai width diambil dari persentase lebar elemen.
• inherit/pewarisan, artinya nilai width diambil dari turunan nilai elemen induk.
• initial, artinya nilai width diset default value yang telah diset sebelumnya.

Contoh penggunaan CSS width :

p {
    width: 150px;
}

Kita bisa berlatih CSS width disini >>

2. min-width

Adalah properti CSS yang digunakan untuk menentukan lebar minimum sebuah elemen.

Nilai dari properti min-width bisa diset beberapa cara, yaitu :

• panjang, artinya nilai min-width ditentukan dengan satuan panjang seperti px, pt, cm dan lain-lain. Nilai default adalah 0px.
• persen (%), artinya nilai min-width diambil dari persentase lebar elemen.
• inherit/pewarisan, artinya nilai min-width diambil dari turunan nilai elemen induk.
• initial, artinya nilai min-width diset default value yang telah diset sebelumnya.

Contoh penggunaan CSS min-width :

p {
    min-width: 100px;
}

Kita bisa berlatih CSS min-width disini >>

3. max-width

Adalah properti CSS yang digunakan untuk menentukan lebar maksimum sebuah elemen.

Nilai dari properti max-width bisa diset beberapa cara, yaitu :

• none/kosong, artinya nilai maksimum tidak diset. Ini adalah nilai default jika properti max-width tidak diset
• panjang, artinya nilai max-width ditentukan dengan satuan panjang seperti px, pt, cm dan lain-lain. Nilai default adalah 0px.
• persen (%), artinya nilai max-width diambil dari persentase lebar elemen.
• inherit/pewarisan, artinya nilai max-width diambil dari turunan nilai elemen induk.
• initial, artinya nilai max-width diset default value yang telah diset sebelumnya.

Contoh penggunaan CSS min-width :

p {
    min-width: 200px;
}

Kita bisa berlatih CSS max-width disini >>

4. height

Adalah properti CSS yang digunakan untuk menentukan tinggi sebuah elemen. Nilai height ini merupakan tinggi elemen tidak termasuk padding, border dan margin.

Nilai dari properti height bisa diset beberapa cara, yaitu :

• auto, artinya browser memperkirakan sendiri nilai height.
• panjang, artinya nilai height ditentukan dengan satuan panjang seperti px, pt, cm dan lain-lain. Nilai default adalah 0px.
• persen (%), artinya nilai height diambil dari persentase tinggi elemen.
• inherit/pewarisan, artinya nilai height diambil dari turunan nilai elemen induk.
• initial, artinya nilai height diset default value yang telah diset sebelumnya.

Contoh penggunaan CSS height :

p {
    height: 150px;
}

Kita bisa berlatih CSS height disini >>

5. min-height

Adalah properti CSS yang digunakan untuk menentukan tinggi minimum sebuah elemen.

Nilai dari properti min-height bisa diset beberapa cara, yaitu :

• panjang, artinya nilai min-height ditentukan dengan satuan panjang seperti px, pt, cm dan lain-lain. Nilai default adalah 0px.
• persen (%), artinya nilai min-height diambil dari persentase tinggi elemen.
• inherit/pewarisan, artinya nilai min-height diambil dari turunan nilai elemen induk.
• initial, artinya nilai min-height diset default value yang telah diset sebelumnya.

Contoh penggunaan CSS min-height :

p {
    min-height: 100px;
}

Kita bisa berlatih CSS min-height disini >>

6. max-height

Adalah properti CSS yang digunakan untuk menentukan tinggi maksimum sebuah elemen.

Nilai dari properti max-height bisa diset beberapa cara, yaitu :

• none/kosong, artinya nilai maksimum tidak diset. Ini adalah nilai default jika properti max-height tidak diset
• panjang, artinya nilai max-height ditentukan dengan satuan panjang seperti px, pt, cm dan lain-lain. Nilai default adalah 0px.
• persen (%), artinya nilai max-height diambil dari persentase tinggi elemen.
• inherit/pewarisan, artinya nilai max-height diambil dari turunan nilai elemen induk.
• initial, artinya nilai max-height diset default value yang telah diset sebelumnya.

Contoh penggunaan CSS min-height :

p {
    max-height: 200px;
}

Kita bisa berlatih CSS max-height disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• http://www.w3schools.com/css/css_dimension.asp

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 :

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