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:

• outline-color
• outline-style
• outline-width
• outline(shorthand)

value outline-style antara lain:

• solid
• double
• dotted
• dashed
• groove
• ridge
• inset
• outset

value outline-color antara lain:

• hex color
• red, blue, pink, silver, dan lain lain
• rgb color

value outline-width:

• angka(panjang/length) dalam px misal (1px, 2px, 3px, 4px dst)
• medium

contoh code

?

1 2 3 4 5 6 7 8 9 10 11

<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).

Stay tuned.