Styling Warna Pada Elemen HTML

Elemen pada dokumen HTML juga bisa kita beri styling warna. Ini berarti kita bisa memberi warna pada kontent agar tampak lebih menarik.

Bagian elemen yang bisa di beri styling warna secara umum adalah background, teks, dan border. Dalam prosesnya, kita menggunakan attribute style dengan property dan values nya CSS.

Jika kita tuliskan, strukturnya seperti ini :

<tagname attribute="property:value;"></tagname>

Contohnya misal kita akan memberi warna latar (background) pada elemen heading 1 (tag <h1>) dengan warna DodgerBlue. Maka script nya seperti ini :

<h1 style="background-color:DodgerBlue;">This is a Heading</h1>

Hasilnya seperti ini :

This is a Heading

Dalam pendeklarasian warnanya sendiri, bisa dilakukan dengan 2 cara yaitu dengan nama nya (color names) atau dengan nilainya (color values).

Deklarasi Warna Berdasarkan Namanya.

Warna dideklarasikan dengan menggunakan Predefined color name nya, contohnya : Tomato, orange, DodgerBlue, MediumSeaGreen, Gray, Slateblue, Violet, Lightgray, dll.

Contoh diatas adalah contoh pendeklarasian warna dengan metode ini. Seakarang misalnya kita akan mengembangkan contoh diatas, selain warna latarnya, kita juga akan mencoba mewarnai teksnya dengan warna tertentu, misalnya menjadi warna putih.

Maka Script nya kita tulis seperti ini :

<h1 style="background-color:DodgerBlue;color:white;">This is a Heading</h1>

Lihat, setelah property dan value "background-color:DodgerBlue" kita tambahkan juga property color dengan value white "color:white;" dipisahkan dengan titik koma (;).

Hasilnya akan seperti ini :

This is a Heading

Selanjutnya kita coba beri border dengan warna Tomato terhadap contoh diatas, kita tulis seperti ini :

<h1 style="background-color:DodgerBlue;color:white;border:3px solid tomato;">This is a Heading</h1>

Kita menambahkan property "border" dengan value "3px solid tomato", artinya kita menginstruksikan kepada browser untuk memberikan border terhadap elemen <h1> dengan spesifikasi :

• tebal garis 3 pixel
• bentuk garis solid
• warna garis tomato

kita bisa lihat hasilnya seperti ini :

This is a Heading

Deklarasi Warna Berdasarkan Value nya.

Warna dideklarasikan dengan format RGB, HLS, HEX, RGBA, atau HSLA. Sekarang kita coba implementasikan contoh diatas dengan metode color value ini.

Sebagai contoh, misalnya kita menggunakan format rgb maka script pada cotntoh sebelumnya kita tulis seperti ini :

<h1 style="background-color:rgb(30, 144, 255);color:rgb(255, 255, 255);border:3px solid rgb(255, 99, 71);">This is a Heading</h1>

Kita akan lihat hasilnya seperti ini :

This is a Heading

Lho kok hasilnya sama ?!

Memang betul hasilnya akan sama, karena sebetulnya perintahnya juga sama hanya saja menggunakan metode yang berbeda. Jadi begini :

• rgb(30, 144, 255) ada format RGB untuk warna DodgerBlue
• rgb(255, 255, 255) format RGB untuk warna putih
• rgb(255, 99, 71) format RGB untuk warna Tomato.

RGB sendiri adalah sebuah metode pengkombinasian nilai warna RED, GREEN, dan BLUE untuk menghasilkan kombinasi berbagai warna baru.

Prev. Chapter	Next Chapter
KUTIPAN dan ELEMEN TANDA KUTIP	HTML Image Tag