Tutorial CSS : Menggunakan Color CSS

Color dalam CSS berfungsi untuk meberikan warna pada element HTML. Jika kalian ingin memberikan warna pada div, text atau element lainnya maka sintak color ini jawabannya.

Warna dalam CSS bisa di definisikan dengan memanggil warnanya langsung, misalnya red, black, green. Dalam bahasa Inggris ya.

Selain itu color dalam css bisa di panggil dalam format RGB, HEX, HSL, RGBA, HSLA.

Background Color

Penggunaan Color dalam CSS yang pertama adalah dalam menentukan background color.

Sintaknya adalah background-color: color_name. Fungsinya adalah memberikan warna pada background element di html kamu.

div {
  background-color: red;
}

div {
  background-color: #fefefe;
}

Text Color

Fungsi kedua adalah memberikan warna pada text. Jadi jika kalian ingin memberikan warna pada text caranya adalah dengan sintak color: color_name.

Contohnya:

p {
  color: red;
}

.p {
  color: green;
}
.p {
  color: #ffffff;
}

Hasilnya:

Text Merah

Text Hijau

Border Color

Jika kalian ingin memberikan warna pada border sebuah element, maka gunakan sintak border color.

Secara default, border color berwarna hitam. Namun untuk memberikan warna pada border gunakan sintak: border: 1px solid #fcfcfc.

Contohnya:

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

Hello World

Hello World

Hello World

CSS Color Value

Untuk memanggil color di CSS, bisa menggunakan nama colornya langsung, atau menggunakan RGB values, HEX values, HSL values, RGBA values, and HSLA values.

Untuk color name yang di support bisa di dicek disini: https://www.w3schools.com/colors/colors_names.asp

Untuk list color hex bisa dicek disini: https://www.w3schools.com/colors/colors_hex.asp

RGB & RGBA Color

Selain color name dan hex value, color css bisa di state sebagai RGB value.

rgb(Red, Green, Blue)

Jadi rgb ini adalah kombinasi dari Red, Green dan Blue color untuk menghasilkan warna baru.

Contohnya:

rgb(255, 32, 71) Hasilnya: rgb(255, 32, 71)

Berbeda dengan rgb, rgba adalah rgb color dengan pilihan opacity. Nilai opacity dari 0 sampai 1.

Contohnya:

rgba(255, 32, 71, 0.5) Hasilnya: rgba(255, 32, 71, 0.5)

Oke guys, kita sudah belajar tentang color dalam CSS. Sekarang kita sudah bisa membarikan warna di dalam element HTML kamu. Semoga bisa dimengerti ya.

Tetap ikuti tutorial lainnya tentang belajar css di ngide.net ya!