Mengatur Warna Tulisan Dengan CSS

View Categories

Mengatur Warna Tulisan Dengan CSS

CSS memiliki banyak properti untuk memberikan style pada tulisan.

Warna Tulisan

Properti color digunakan untuk mengatur warna tulisan. Warna ditentukan oleh:

  • nama warna – seperti “red”
  • nilai HEX – seperti “#ff0000”
  • nilai RGB – seperti “rgb(255,0,0)”

Warna tulisan default untuk satu halaman dapat ditentukan menggunakan selector body.

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: blue;
}

h1 {
  color: green;
}
</style>
</head>
<body>

<h1>Ini judul 1</h1>
<p>Ini adalah paragraf biasa. Perhatikan bahwa teks ini berwarna biru. Warna teks default untuk halaman ditentukan di selector body.</p>
<p>Paragraf lainnya.</p>

</body></html>

Jalankan Contoh

Warna Tulisan dan Warna Latar Belakang

Dalam contoh ini, diperlihatkan cara pemakaian properti background-color dan properti color:

Contoh

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

div {
  background-color: blue;
  color: white;
}
</style>
</head>
<body>

<h1>Ini adalah Judul</h1>
<p>Halaman ini memiliki warna latar belakang abu-abu dan teks biru.</p>
<div>Ini adalah div.</div>

</body></html>

Jalankan Contoh

Properti Color CSS

Contoh

Menetapkan warna tulisan untuk elemen yang berbeda:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: red;
}

h1 {
  color: #00ff00;
}

p.ex {
  color: rgb(0,0,255);
}
</style>
</head>
<body>

<h1>Ini judul 1</h1>

<p>Ini adalah paragraf biasa. Perhatikan bahwa teks ini berwarna merah. Warna teks default untuk halaman ditentukan di selector body.</p>

<p class="ex">Ini adalah paragraf dengan class="ex". Teks ini berwarna biru.</p>

</body></html>

Jalankan Contoh

Definisi dan Penggunaan

Properti color menentukan warna tulisan.

Catatan: Gunakan warna latar belakang yang dipadukan secara tepat dengan warna tulisan yang membuat tulisan mudah dibaca.

Contoh

Menetapkan warna tulisan dengan nilai HEX:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: #92a8d1;
}
</style>
</head>
<body>

<h1>Ini judul 1</h1>

<p>Warna teks dapat ditentukan dengan nilai heksadesimal.</p>

</body></html>

Jalankan Contoh

Contoh

Menetapkan warna tulisan dengan nilai RGB:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: rgb(201, 76, 76);
}
</style>
</head>
<body>

<h1>Ini judul 1</h1>

<p>Warna teks dapat ditentukan dengan nilai RGB.</p>

</body></html>

Jalankan Contoh

Contoh

Menetapkan warna tulisan dengan nilai RGBA:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: rgba(201, 76, 76, 0.6);
}
</style>
</head>
<body>

<h1>Ini judul 1</h1>

<p>Warna teks dapat ditentukan dengan nilai RGBA.</p>

</body></html>

Jalankan Contoh

Contoh

Menetapkan warna tulisan dengan nilai HSL:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: hsl(89, 43%, 51%);
}
</style>
</head>
<body>

<h1>Ini judul 1</h1>

<p>Warna teks dapat ditentukan dengan nilai HSL.</p>

</body></html>

Jalankan Contoh

Contoh

Menetapkan warna tulisan dengan nilai HSLA:

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: hsla(89, 43%, 51%, 0.6);
}
</style>
</head>
<body>

<h1>Ini judul 1</h1>

<p>Warna teks dapat ditentukan dengan nilai HSLA.</p>

</body></html>

Jalankan Contoh

Tutorial sebelumnya : CSS Outline
Tutorial setelahnya : Perataan Tulisan Dengan CSS
Semua Tutorial CSS : Tutorial CSS

Tinggalkan Balasan