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:

Cara Penulisan CSS

Saat browser membaca sebuah style sheet, maka browser akan melakukan formating terhadap dokumen HTML sesuai dengan informasi yang di berikan oleh Style sheet.

Maksudnya begini, misalnya didalam style sheet terdapat informasi bahwa sebuah elemen HTML pada halaman web harus di tampilkan dengan background-color: black; dan color:white;. Maka saat style sheet tersebut di baca oleh browser, browser akan menampilkan elemen tersebut di dalam web page dengan background warna hitam dan tulisan warna putih.

Lalu Bagaimana cara Menuliskan CSS kedalam Dokumen HTML ?

Ada tiga cara dalam penulisan CSS, yaitu dengan cara External, Internal, dan Inline.

External CSS

Lebih Jauh Tentang CSS

CSS adalah kepanjangan dari Cascading Style Sheet. CSS ini merupakan sebuah mekanisme sederhana yang mengatur gaya/ style pada halaman web. Style disini bisa berupa warna, ukuran, posisi, dll.

Dengan kata lain, CSS ini adalah sebuah bahasa yang berfungsi untuk melakukan styling terhdap sebuah halama web. CSS mengontrol bagaimana sebuah elemen HTML akan ditampilkan, selain itu dengan menggunakan CSS juga akan menghemat waktu kerja karena CSS ini dapat mengontrol layout dari banyak halaman web secara bersamaan.

Penyesuaian layout halaman web pada berbagai device dan layar pun dapat di tangani dengan CSS ini. Ini lah kenapa CSS mutlak diperlukan dalam pembuatan sebuah halaman web.

Pada contoh dibawah ini, sebuah halaman web akan di atur sbb :

• Background halaman di beri warna lightblue.
• Elemen h1 diatur posisinya menjadi rata tengah dengan warna putih.
• dan Elemen p ditulis dengan font verdana dengan ukuran 20px.

<!DOCTYPE html>

<html>

<head>

    <style>

        body {
                      background-color: lightblue;
        }

        h1 {
                  color: white;
                  text-align: center;
        }

        p {
                  font-family: verdana;
                  font-size: 20px;
        }

    </style>

</head>

<body>

    <h1>Hello World</h1>

    <p>This is a paragraph.</p>

</body>

<html>

Hasilnya seperti ini : 

Syntax

Struktur CSS terdiri dari 2 bagian, yaitu bagian Selector dan Blok Deklarasi.

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.

Pengantar CSS

Sebuah dokumen HTML tanpa CSS itu menurut saya ibaratnya sebuah masakan tanpa bumbu, tidak ada variasi rasa yang bisa kita nikmati.

Karena memang betul, apa-apa yang ditampilkan dari elemen HTML adalah konten dasar dari dokumen HTML tersebut. Tidak ada style, layout, pengaturan font, dan sebagainya.

Sekarang anda bisa lihat, misalnya pada dokumen HTML berikut :

<!DOCTYPE html>

< html >

<head>

</head>

<body>

<h1>Hello World!</h1>

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

</p>

</body>

</html>

Jalankan script tersebut, maka hasilnya akan seperti ini :

Hello World!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.