CSS Color Properties

Styling warna pada CSS secara umum mencakup tiga hal, yaitu background, text-color, dan border-color.

Styling warna dapat di definisikan dengan format color-name, atau dengan nilai RGB, HEX, HSL, RGBA, HSLA

Warna dalam CSS dapat dideklarasikan berdasarkan nama nya (Predefined color name ) sebagai value pada property color atau background-color di bagian declaration CSS. Contohnya seperti ini:

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1> 

Hasilnya sbb:

Background Color

Warna latar atau background bisa di setting dengan property background-color pada bagian declaration CSS. Misalnya kita akan memberikan background-color pada dokumen HTML dibawah ini dengan warna DodgerBlue pada elemen h1 dan warna Tomato pada element p nya.

Maka CSS nya kita tulis sbb:

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">Lorem ... </p>

Hasilnya sbb:

Text Color

Property color digunakan untuk memanipulasi warna teks pada dokumen HTML. Misalnya saja pada contoh diatas kita ingin merubah warna tulisan atau text nya menjadi Tomato dan DodgerBlue, maka CSS nya sbb:

<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>

Hasilnya sbb:

Border Color

Bagaimana kalau kita ingin menambahkan border dengan warna tertentu pada sebuah elemen HTML ?

Mudah saja, misalnya kita akan memberi border dengan warna tertentu pada elemen h1 dibawah ini :

Kita gunakan property CSS border sbb:

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Hasilnya akan seperti ini:

 

Referensi : w3schools.com

Prev. Chapter	Next Chapter
Cara Penulisan CSS