Ads by Yasya El Hakim
Tutorial CSS Tingkat Dasar: Warna - Bagian 3

CSS dapat menampilkan kuranng lebih 16 Juta warna kedalam tampilan elemen HTML. Warna tersebut dapat berupa RGB (Red, Green, Blue), Kode Hex, maupun hanya berupa nama.

Nilai warna berikut dapat menentukkan warna yang sama tetapi dengan metode yang berbeda:
  • red
  • rgb(255,0,0)
  • rgb(100%,0%,0%)
  • #ff0000
  • #f00

Selain itu, kalian juga dapat menggunakan warna berdasarkan nama (Bahasa Inggris) seperti aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow, dan masih banyak lagi.

Pengecualian nama warna black (hitam) dan white (putih) karena merupakan suatu pembatasan.

Terdapat tiga nilai pada RGB yaitu dari angka 0 sampai 255, 0 merupakan angka terendah (tidak berwarna merah, misalnya), dan 255 merupakan angka tertinggi (berwarna merah, misalnya). Nilai tersebut juga dapat berupa presentase "%".

Hexadesimal (Hexadecimal atau Sexadecimal) merupakan sistem angka base-16. Biasanya, kita menggunakan angka desimal (base-10, 0 sampai 9), tetapi Hexadesimal memiliki 16 digit, dari 0 sampai f.

Angka Hex (Hexadecimal) dapat ditentukan dengan tanda pagar (#) dan berjumlah tiga sampai enam digit. Biasanya, versi tiga digit merupakan angka konversi dari versi enam digit (#ff0000 menjadi #f00, #cc9966 menjadi #c96, dll). Versi tiga digit sangat jelas dan mudah untuk diuraikan serta dipahami (Digit pertama, sama seperti nilai pertama pada warna RGB yaitu merah, dan digit kedua berwarna hijau, dan digit ketiga berwarna biru) tetapi versi enam digit dapat kalian gunakan jika kalian ingin menentukan serta mengontrol warna dengan tepat.

Pada CSS3 (Iterasi terbaru dari CSS). Kalian juga dapat menggunakan warna HSL (Hue, Saturation, dan Lightness).

color dan background-color

Kalian dapat menentukan warna dengan menggunakan property color dan background-color (Perhatikan bahwa property tersebut menggunakan Bahasa inggris Amerika, color bukan colour).

Berikut adalah contoh kode untuk mengubah Background menjadi warna biru serta teks menjadi berwarna kuning:

h1 {
    color: yellow;
    background-color: blue;
}


Contoh penetapan warna diatas mungkin terlalu tajam. Untuk itu, kalian bisa mengubahnya sesuai dengan keinginan kalian pada file CSS, Contoh:

body {
    font-size: 14px;
    color: navy;
}

h1 {
    color: #ffc;
    background-color: #009;
}


Simpan file CSS diatas dan muat ulang (Refresh) Browser. Kalian akan melihat Heading (Elemen h1) akan berubah menjadi berwarna kuning soft serta background yang berwarna biru gelap.

Kalian dapat menetapkan property color dan background-color pada semua elemen HTML, termasuk pada body.

Sebelumnya: Tutorial CSS Tingkat Dasar: Selector, Property, dan Nilai - Bagian 2
Selanjutnya: Tutorial CSS Tingkat Dasar: Teks - Bagian 4
Daftar isi: Tutorial CSS Tingkat Dasar

0Komentar

Sebelumnya Selanjutnya