BOLDER COLOR
COLOR
<h1 style="border:2xp solid Tomato;">Hello Wordl</h1>
<h1 stly="color:Tomato;">Hello World</h1>
<h1 style="background-color:DodgerBlue;">Hello World</h1>
RGB
rgb(merah, hijau, biru)
Setiap parameter (merah, hijau, dan biru) menentukan intensitas warna dengan nilai antara 0 dan 255.
Ini berarti ada 256 x 256 x 256 = 16777216 warna yang mungkin!
Sebagai contoh, rgb(255, 0, 0) ditampilkan sebagai merah, karena merah diatur ke nilai tertinggi (255), dan dua parameter lainnya (hijau dan biru) diatur menjadi 0.
Contoh lain, rgb(0, 255, 0) ditampilkan sebagai hijau, karena hijau diatur ke nilai tertinggi (255), dan dua parameter lainnya (merah dan biru) diatur menjadi 0.
Untuk menampilkan hitam, atur semua parameter warna menjadi 0, seperti ini: rgb(0, 0, 0).
Untuk menampilkan putih, atur semua parameter warna menjadi 255, seperti ini: rgb(255, 255, 255).
COLOR VALUES
<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>
HEX Color Values
Di mana rr (merah), gg (hijau), dan bb (biru) adalah nilai heksadesimal antara 00 dan ff (sama seperti desimal 0-255).
Sebagai contoh, #ff0000 ditampilkan sebagai merah, karena merah diatur ke nilai tertinggi (ff), dan dua parameter lainnya (hijau dan biru) diatur menjadi 00.
Contoh lain, #00ff00 ditampilkan sebagai hijau, karena hijau diatur ke nilai tertinggi (ff), dan dua parameter lainnya (merah dan biru) diatur menjadi 00.
Untuk menampilkan hitam, atur semua parameter warna menjadi 00, seperti ini: #000000.
Untuk menampilkan putih, atur semua parameter warna menjadi ff, seperti ini: #ffffff.
HSL Color Values
HSL merupakan singkatan dari hue (tona), saturation (saturasi), dan lightness (kecerahan).
Nilai warna HSLA adalah perluasan dari HSL dengan saluran Alpha (kejernihan).
Nilai Warna HSL
Dalam HTML, sebuah warna dapat ditentukan menggunakan tona, saturasi, dan kecerahan (HSL) dalam bentuk:
hsl(tona, saturasi, kecerahan)
Tona adalah derajat pada roda warna dari 0 hingga 360. 0 adalah merah, 120 adalah hijau, dan 240 adalah biru.
Saturasi adalah nilai persentase. 0% berarti warna abu-abu, dan 100% adalah warna penuh.
Kecerahan juga adalah nilai persentase. 0% adalah hitam, dan 100% adalah putih.
CSS
Apa itu CSS?
Cascading Style Sheets (CSS) digunakan untuk memformat tata letak halaman web.
Dengan CSS, Anda dapat mengontrol warna, jenis huruf, ukuran teks, jarak antara elemen, cara elemen ditempatkan dan diatur, gambar latar belakang atau warna latar belakang yang digunakan, tampilan yang berbeda untuk perangkat dan ukuran layar yang berbeda, dan banyak lagi!
CSS dapat ditambahkan ke dokumen HTML dengan 3 cara:
1. Inline - dengan menggunakan atribut style di dalam elemen HTML.
2. Internal - dengan menggunakan elemen <style> di bagian <head>.
3. Eksternal - dengan menggunakan elemen <link> untuk menghubungkan ke file CSS eksternal.
1. Inline CSS
CSS inline digunakan untuk menerapkan gaya unik pada satu elemen HTML.
CSS inline menggunakan atribut style dari elemen HTML.
Contoh berikut mengatur warna teks elemen <h1> menjadi biru, dan warna teks elemen <p> menjadi merah
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
contoh :
2. Internal CSS
Internal CSS
CSS internal digunakan untuk mendefinisikan gaya untuk satu halaman HTML.
CSS internal didefinisikan di bagian <head> dari halaman HTML, di dalam elemen <style>.
Contoh berikut mengatur warna teks SEMUA elemen <h1> (pada halaman tersebut) menjadi biru, dan warna teks SEMUA elemen <p> menjadi merah. Selain itu, halaman akan ditampilkan dengan warna latar belakang "powderblue":
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CONTOH :
3. External CSSExternal style sheet digunakan untuk mendefinisikan gaya untuk banyak halaman HTML.
Untuk menggunakan external style sheet, tambahkan tautan ke dalam bagian <head> setiap halaman HTML.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Contoh :
RINGKASAN :
1. Gunakan atribut style HTML untuk gaya inline.
2. Gunakan elemen HTML <style> untuk mendefinisikan CSS internal.
3. Gunakan elemen HTML <link> untuk merujuk ke file CSS eksternal.
4. Gunakan elemen HTML <head> untuk menyimpan elemen <style> dan <link>.
5. Gunakan properti warna CSS untuk warna teks.
6. Gunakan properti font-family CSS untuk jenis huruf teks.
7. Gunakan properti font-size CSS untuk ukuran teks.
8. Gunakan properti border CSS untuk batas.
9. Gunakan properti padding CSS untuk ruang di dalam batas.
10. Gunakan properti margin CSS untuk ruang di luar batas.
