Belajar CSS Outline

By Adhi P. - Last updated: Monday, February 6, 2012 - Save & Share - Comments

banner438kursus Belajar CSS Outline

Tutorial belajar CSS kali ini akan membahas tentang outline CSS. Outline CSS adalah salah satu property dalam css yang berfungsi untuk memberi garis atau batas bagian luar pada bidang / box / tag html.

Namun, outline CSS ini berbeda dengan border CSS. Apa bedanya?

Outline CSS tidak memiliki outline individu (outline-top, outline-right, outline-bottom, outline-left). Outline juga tidak berpengaruh terhadap width, misal jika membuat style dengan width 300px lalu menambahkan outline-width 20px, maka style awal tadi tetap memiliki width sebesar 300px. lain halnya jika menambahkan border-width 20px, maka style tadi akan memiliki width (lebar) 340px (300px +2 x  20px).  Outline ini bisa kita tentukan bentuk/tampilanya, seperti warna, ketebalan, serta style/gaya.

Ok, kali ini kita akan belajar css tentang outline.

property outline antara lain:

value outline-style antara lain:

value outline-color antara lain:

value outline-width:

contoh code


<div style="background-color:blue;width:300px;outline-style:solid;outline-color:red;outline-width:5px;">

k i t a

s e d a n g

b e l a j a r

c s s

</div>

Kode ini akan menampilkan tulisan putih dengan latar belakang kotak berwarna biru.

Penulisan style outline seperti diatas sebenarnya tidak disarankan, karena kita harus menulis propertinya satu persatu. Nah, pada tutorial berikutnya kita akan melihat versi shortandnya (singkat).

Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek! KLIK DI SINI!.

Stay tuned.

 

 

Posted in Belajar CSS • Tags: Top Of Page