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 :

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

Kita bisa mengatur style list pada ordered lists(ol) dan unordered lists(ul) dengan CSS. Ada beberapa properti yang disediakan seperti untuk mengatur tanda item list pada ordered lists dan unordered lists dan membuat tanda item list ordered lists dan unordered lists dengan gambar. Selain itu kita juga bisa mengatur penempatan tanda list pada oldan ul.

Sebelumnya perlu diingat kembali tentang List pada HTML ada dua, yaitu ordered lists dan unordered lists. Ordered lists adalah list dengan tanda item list berupa angka atau huruf sedangkan unordered lists adalah list dengan tanda item list berupa bullet/dot.

Ada dua cara dalam mengatur tampilan list OL dan UL dengan CSS, yaitu mengatur tampilan list dengan menggunakan properti list-style-type dan list-style-image.

1. list-style-type

Adalah properti CSS yang digunakan untuk mengatur tampilan tanda list UL dan OL menggunakan library dari CSS. Ada beberapa model yang bisa dipilih seperti circle (lingkaran) atau square (kotak) untuk tampilan unordered lists dan upper-roman atau lower-alpha untuk tampilan ordered lists.

Contoh penggunaan CSS list-style-type untuk ordered lists(ol) :

ul.x {
    list-style-type: circle;
}

ul.y {
    list-style-type: square;
}

Contoh penggunaan CSS list-style-type untuk unordered lists(ul) :

ol.x {
    list-style-type: upper-roman;
}

ol.y {
    list-style-type: lower-aplha;
}

Kita bisa berlatih CSS list-style-type disini >>

Berikut ini beberapa model yang bisa dipilih untuk tampilan ordered lists(ol) dan unordered lists(ul)

2. list-style-image

Adalah properti CSS yang digunakan untuk mengatur tampilan tanda list UL dan OL menggunakan gambar.

Contoh penggunaan CSS list-style-image :

 ul {  
   list-style-type: none;  
   padding: 0px;  
   margin: 0px;  
 }  
   
 ul li {  
   background-image: url(dot.gif);  
   background-repeat: no-repeat;  
   background-position: 0px center;   
   padding-left: 15px;   
 }  

Kita bisa berlatih CSS list-style-image disini >>

3. list-style-position

Adalah properti CSS yang digunakan untuk mengatur penempatan tanda list pada UL dan OL. Posisi tanda bisa ditaruh didalam list atau diluar list. Untuk didalam list diberi nilai inside dan diluar list diberi nilai outside.

Contoh penggunaan CSS list-style-position :

 ul {  
   list-style-position: inside;  
 }    

Kita bisa berlatih CSS list-style-position disini >>

2. list-style

Adalah properti CSS yang digunakan untuk mengatur tampilan tanda list UL dan OL dengan penulisan secara singkat yang mencakup keseluruhan properti diatas.

Contoh penggunaan CSS list-style :

ul {
    list-style: circle inside url("dot.gif");
}

Kita bisa berlatih CSS list-style disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

• //www.w3schools.com/css/css_list.asp
• //www.w3schools.com/cssref/pr_list-style-type.asp
• //www.w3schools.com/cssref/pr_list-style-position.asp

Link adalah sebuah tautan yang bisa menghubungkan kita ke halaman lain. Secara default biasanya tampilan link dibuat bergaris bawah (underline). Namun dengan CSS kita bisa mengatur tampilan link dengan beberapa properti pada text seperti color, font-family, font-size dan lain-lain. Selain itu kita juga biasa mengatur background dengan CSS untuk mengatur background seperti background-color.

Contoh penggunaan CSS untuk link :

a {
    color: blue;
}

Selain mengatur tampilan link, kita juga bisa membuat tampilan berbeda-beda untuk tiap kondisi link. Untuk menyatakan kondisi sebuah link kita menggunakan tanda titikdua (:) setelah tag link a. Dan deklarasi CSS ditulis setelah kondisi dengan cara seperti penulisan deklarasi CSS pada umumnya.

Ada empat kondisi link yang bisa dibuat CSS-nya, yaitu :

• a:link, yaitu link dalam kondisi normal, belum dikunjungi
• a:visited, yaitu link yang sudah dikunjungi
• a:hover, yaitu kondisi link saat mouse mengenai link/mouse berada diatas link tapi belum diklik.
• a:active, yaitu kondisi link pada saat diklik.

Contoh penggunaan CSS untuk beberapa kondisi link :

1. Link dalam kondisi normal

a {
    color: blue;
}

2. Link telah dikunjungi (Visited)

a:visited {
    color: green;
}

3. Link saat ada mouse diatasnya (Hover)

a:hover {
    color: red;
}

4. Link saat diklik

a:active {
    color: yellow;
}

Kita bisa berlatih CSS link disini >>

Penting dalam menulis CSS untuk beberapa kondisi Link

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

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

Font adalah sekumpulan bentuk huruf pada komputer. Ada banyak jenis font yang bisa kita pakai dan beragam bentuknya. CSS menyediakan beberapa properti untuk mengatur font pada halaman html. Beberapa properti yang bisa digunakan adalah mengatur famili font, ukuran font, style font, varian font dan ketebalan font.

Berikut ini properti untuk font dan penjesannya :

1. font-family

Adalah properti CSS yang digunakan untuk mengeset nama font yang digunakan pada elemen html. Pada CSS terdapat dua cara mendeskripsikan font-family yaitu dengan nama generic dan nama family.

Generic font ada tiga jenis, yaitu :

• Serif, adalah jenis font yang memiliki akhiran garis kecil pada huruf
• Sans-serif, adalah jenis font tanpa akhiran garis kecil pada huruf. Kata Sans-berarti tanpa.
• Monospace, adalah jenis font yang mempunyai lebar yang sama untuk tiap-tiap huruf.

Sedangkan nama family font ada banyak sekali seperti font-font yang biasa kita pakai saat membuat dokumen melalui ms word atau libre office writer. Namun font-font ini bisa dikelompokkan kedalam tiga nama generic tadi.

Contoh pengelompokan font family :

• Times New Roman, Georgia , termasuk kelompok Serif
• Arial, Verdana , termasuk kelompok Sans-Serif
• Courier New, Lucida Console, termasuk kelompok Monospace.

Contoh penggunaan CSS font-family :

body {
    font-family: "Times New Roman", Times, serif;
}

Kita bisa berlatih CSS font-family disini >>

2. font-style

Adalah properti CSS yang digunakan untuk mengatur style font seperti cetak miring-italic, cetak miring-oblique atau normal. Normal berarti font ditampilkan secara normal tanpa style italic atau oblique.

Sekilas antara italic dan oblique tidak ada perbedaan. Style italic berarti mengambil font-family italic, jadi sudah miring dari asalnya. Sedangkan style oblique mengambil font-family true type lalu di tampilkan miring (condong). Pada beberapa font, penggunaan style oblique akan diperoleh kemiringan font yang lebih baik.

Contoh penggunaan CSS font-style :

p {
    font-style: italic;
}

Kita bisa berlatih CSS font-style disini >>

3. font-size

Adalah properti CSS yang digunakan mengatur ukuran font. Ada beberapa jenis satuan ukuran font yang bisa dipakai misalnya px (pixel) dan em.

Ada dua cara dalam menentukan ukuran font, yaitu absolute size dan relative size. Absolute size berarti mengeset ukuran font pada ukuran tertentu dan tidak mengijinkan user untuk mengubahnya, pada semua browser. Sedangkan relative adalah mengeset ukuran font kepada elemen sekitarnya. Relative font mengijinkan user mengubah ukuran font pada browser.

Contoh penggunaan CSS font-size secara absolute dengan pixel :

h1 {
    font-size: 16px;
}

Kita bisa berlatih CSS font-size absolute dengan pixel disini >>

Contoh penggunaan CSS font-size secara relative dengan em :

h1 {
    font-size: 1em;
}

Note : 
Ukuran em mengacu pada ukuran font current pada browser, yaitu sebesar 16px. namun ukuran em mengijinkan browser untuk mengubah ukuran font dengan setting default font pada browser. penggunaan em lebih direkomendasikan dan banyak dipakai oleh beberapa developer web.

Kita bisa berlatih CSS font-size absolute dengan em disini >>

4. font-weight

Adalah properti CSS yang digunakan untuk mengatur ketebalan font. Secara default, font weight akan diset normal. Nilai properti font-wight bisa diset normal, bold, bolder, lighter atau dengan angka seperti 100, 200 dan seterusnya.

Contoh penggunaan CSS font-weight :

p {
    font-weight: bold;
}

Kita bisa berlatih CSS font-weight disini >>

5. font-variant

Adalah properti CSS yang digunakan untuk mengatur varian font, seperti normal atau small caps. Dengan small caps akan membuat membuat lowercase menjadi uppercase. Selain itu juga bisa diset dengan nilai initial atau inherit.

Contoh penggunaan CSS font-variant :

p {
    font-variant: small-caps;
}

Kita bisa berlatih CSS font-variant disini >>

6. font

Adalah properti CSS yang merupakan penggabungan dari beberapa properti. Penggunaan properti font akan meringkas penulisan CSS font.

Contoh penggunaan CSS font :

p {
    font: italic bold 12px arial, sans-serif;
}

Kita bisa berlatih CSS font disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

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