Tutorial CSS

RUMAH CSS Pengenalan CSS Sintaks CSS Pemilih CSS CSS Bagaimana caranya? Komentar CSS Warna CSS Latar Belakang CSS Batas CSS Margin CSS Lapisan CSS Tinggi/Lebar CSS Model Kotak CSS Garis Besar CSS Teks CSS Font CSS Ikon CSS Tautan CSS Daftar CSS Tabel CSS Tampilan CSS CSS Max-lebar Posisi CSS indeks Z CSS CSS Meluap CSS Float CSS Inline-blok Perataan CSS Penggabung CSS Kelas Pseudo CSS CSS Pseudo-elemen Opasitas CSS Bilah Navigasi CSS Dropdown CSS Galeri Gambar CSS Sprite Gambar CSS Pemilih Attr CSS Formulir CSS Penghitung CSS Tata Letak Situs Web CSS Unit CSS Kekhususan CSS CSS !penting Fungsi Matematika CSS

CSS Lanjutan

Sudut Bulat CSS Gambar Perbatasan CSS Latar Belakang CSS Warna CSS Kata Kunci Warna CSS Gradien CSS Bayangan CSS Efek Teks CSS Font Web CSS Transformasi 2D CSS Transformasi 3D CSS Transisi CSS Animasi CSS Tips Alat CSS Gambar Gaya CSS Refleksi Gambar CSS Kesesuaian objek CSS Posisi objek CSS Penyamaran CSS Tombol CSS Paginasi CSS CSS Beberapa Kolom Antarmuka Pengguna CSS Variabel CSS Ukuran Kotak CSS Kueri Media CSS Contoh MQ CSS CSS Flexbox

CSS Responsif

Perkenalan RWD Area Pandang RWD Tampilan Kotak RWD Kueri Media RWD Gambar RWD Video RWD Kerangka RWD Template RWD

Kotak CSS

Pengenalan kisi-kisi Wadah Kotak Item Kotak

CSS SASS

Tutorial SASS

Contoh CSS

Template CSS Contoh CSS kuis css Latihan CSS Sertifikat CSS

Referensi CSS

Referensi CSS Pemilih CSS Fungsi CSS Referensi CSS Aural Font Aman Web CSS CSS Animasi Unit CSS Konverter CSS PX-EM Warna CSS Nilai Warna CSS Nilai Default CSS Dukungan Peramban CSS

Warna CSS


Warna ditentukan menggunakan nama warna yang telah ditentukan sebelumnya, atau nilai RGB, HEX, HSL, RGBA, HSLA.


Nama Warna CSS

Di CSS, warna dapat ditentukan dengan menggunakan nama warna yang telah ditentukan:

Tomat
jeruk
DodgerBlue
MediumLautHijau
Abu-abu
SlateBiru
Ungu
Abu-abu muda

CSS/HTML mendukung 140 nama warna standar .


Warna Latar Belakang CSS

Anda dapat mengatur warna latar belakang untuk elemen HTML:

Halo Dunia


Rasa sakit itu sendiri adalah cinta Itulah mengapa untuk hal sekecil apa pun yang akan datang, siapa yang ditanggung oleh latihan normal kita untuk mengambil keuntungan dari konsekuensinya

Contoh

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


Warna Teks CSS

Anda dapat mengatur warna teks:

Halo Dunia

Rasa sakit itu sendiri adalah cinta

Itulah mengapa untuk hal sekecil apa pun yang akan datang, siapa yang ditanggung oleh latihan normal kita untuk mengambil keuntungan dari konsekuensinya

Contoh

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

Warna Perbatasan CSS

Anda dapat mengatur warna batas:

Halo Dunia

Halo Dunia

Halo Dunia

Contoh

<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>

Nilai Warna CSS

Di CSS, warna juga dapat ditentukan menggunakan nilai RGB, nilai HEX, nilai HSL, nilai RGBA, dan nilai HSLA:

Sama seperti nama warna "Tomat":

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

Sama seperti nama warna "Tomat", tapi 50% transparan:

rgba (255, 99, 71, 0,5)
hsla (9, 100%, 64%, 0,5)

Contoh

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Pelajari lebih lanjut tentang Nilai Warna

Anda akan mempelajari lebih lanjut tentang RGB , HEX dan HSL di bab-bab selanjutnya.