Skip to main content

B.4.1.1. Color

Sekarang kita akan belajar terkait satu properti di dalamProperty color di CSS digunakan untuk mengatur warna teks pada elemen HTML.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>B.4.1.1. Color Property</title>

  <!-- Connected into CSS -->
  <link rel="stylesheet" href="style.css">

</head>

<body>
  <h1 class="hello-text">
    Hello, My name is Muhamad Firly Ramadan
  </h1>
</body>

</html>

Pada kode di atas kita menggunakan class selector untuk menyeleksi elemen <h1> dan kita menggunakan properti color pada CSS untuk mengubah warnanya menjadi berwarna green .

Properti color memiliki nilai yang dapat kita gunakan diantaranya:

  • Nama warna (misalnya: red, blue, green).
  • Nilai heksadesimal (misalnya: #ff0000 untuk merah).
  • Nilai RGB (misalnya: rgb(255, 0, 0)).
  • Nilai RGBA (misalnya: rgba(255, 0, 0, 0.5) untuk merah dengan transparansi 50%).
  • Nilai HSL (misalnya: hsl(0, 100%, 50%))

Temen-temen bisa sesuaikan dengan preferensi masing-masing ya untuk memberikan nilai warna ini ke properti color ini.

Jika temen-temen membuka file tadi di web browser maka akan menampilkan output seperti:

Output

Bisa dilihat, ada tulisan Hello, My name is Muhamad Firly Ramadan yang sudah di ubah warnanya menjadi hijau dengan menggunakan properti color pada CSS.

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.4-properti-css/B.4.1-text-styling/B.4.1.1-color