Belajar CSS Outline (Shorthand)

Setelah kita mempelajari penulisan CSS untuk outline, sekarang kita lihat penulisan outline dengan teknik shorthand. Penulisan CSS outline dengan teknikshorthand ini ini sangat dianjurkan, selain efisian kita juga ngga perlu nulis style CSS panjang-panjang

penulisan property outline shorthand(singkat)

seperti ini

?

1	outline:value-outline-color(spasi)value-outline-style(spasi)value-outline-width;

dengan teknik ini, kita sudah tidak mengenal property outline-style, outline-width, outline-color

outline

outline:value; fungsinya untuk membuat sekeliling bidang/tag/box memiliki style garis pinggir, sedangkan value masing-masing sisi akan bernilai sama!

contoh kode CSS dengan Metode Biasa

?

1 2 3 4 5 6 7 8 9 10 11

<div style="background-color:blue;width:300px;height: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>

jika dibuat dengan teknik CSS shorthand akan menjadi seperti ini

?

1 2 3 4 5 6 7 8 9 10 11

<div style="background-color:blue;width:300px;height:300px;outline:red solid 5px;">   k i t a   s e d a n g   b e l a j a r   c s s   </div>

Tampilanya akan sama seperti versi biasanya. Jadi, gunakan teknik CSS outline shorthand ini sesering mungkin ya. Selamat belajar CSS.