Mudah Belajar CSS Part 12: CSS Outline

Assalamu'alaikum W.W
Pada kesempatan kali ini kita akan membahas Mudah Belajar  CSS Part 12: CSS Outline, langsung aja ke Tkp.

Judul
Mudah Belajar  CSS Part 12: CSS Outline

Pengertian

Menurut Wikipedia CSS adalah “kode yang digunakan untuk mendefenisikan desain dari bahasa markup”.Salah satu bahasa markup lainnya HTML.

Secara umum CSS (Cascading Style Sheet) adalah kumpulan kode yang digunkanan untuk memformat halaman web yang ditulis dengan HTML maupun XHTML.

Latar Belakang

CSS merupakan salah satu modal dasar jika ingin menjadi web developer. Oleh karena itu, CSS sangat penting untuk dipahami dan dimengerti.

Maksud dan Tujuan
Bisa, mengerti dan memahami sintak-sintak CSS

Alat dan Bahan
Text Editor dan PC

Jangka Waktu
1 Jam

Pembahasan
CSS Outline berfungsi untuk memberi batas/garis pada bagian luar suatu bidang/box.

Properti outline antara lain:

• outline-style
• outline-color
• outline-width
• outline-offset
• outline

Outline Style
Jenis-jenis outline antara lain:

• dotted -> garis putus-putus
• dashed -> garis putus-putus (lebih tebal)
• solid -> garis solid
• double -> garis ganda
• groove -> garis 3d blur
• ridge -> garis 3d bergerigi
• inset -> garis inset 3d
• outset -> garis outset 3d
• none -> tidak ada garis
• hiden -> garis tersembunyi

Contoh :

Outline Color
Properti ini digunakan untuk mengatur warna garis.
Value outline-color antara lain:

• Name => red dll
• RGB => rgb(255,0,0)
• Hex => #ff000
• Invert  

Contoh :

Outline-Width
Properti digunakan untuk menentukan lebar garis.
Valuenya anatara lain:

• thin (1px)
• medium (3px)
• thick (5px)
• size (px, pt, cm, em, etc)

Contoh:

Cara Menyingkat Penulisan Outline
Penulisannya mencakup hal dibawah ini, tetapi urutannya tidak masalah.

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

Contoh :

p.ex3 {outline: 5px solid yellow;}

Kesimpulan
Css Outline berfungsi untuk mengatur batas atau garis bagian luar darai suatu bidang

Referensi

https://www.w3schools.com/css/css_outline.asp

Share this post