Halo sobat Artikel Multimedia, pada postingan kali ini kita akan membahas seputar CSS lagi yaitu bagaimana cara mengatur warna font atau teks di dalam dokumen html. Properti css yang digunakan untuk mengatur warna font adalah properti color. Untuk penulisan nama warna tentu saja sobat harus menggunakan bahasa inggris agar bisa terbaca di dalam dokumen html. Caranya seperti berikut:
1. Menggunakan Inline CSS
<h1 style="color: red">Teks Heading 1 ini berwarna merah</h1>
2. Menggunakan Internal CSS
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mengatur Warna Font</title>
</head>
<style>
h2 {
color: brown
}
</style>
<body>
<h2>Teks Heading 2 ini berwarna coklat</h2>
</body>
</html>
3. Menggunakan Eksternal CSS
Jika sobat menggunakan cara yang ketiga
ini, maka sobat harus membuat file html dan css secara terpisah.
- kode di file html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mengatur Warna Font</title>
</head>
{{-- Tag link ini digunakan untuk menghubungkan file dokumen html dengan file css --}}
<link rel="stylesheet" href="css/style.css">
<body>
<h3 class="highlight">Teks Heading 3 ini berwarna hijau</h3>
</body>
</html>
- kode di file css:
color: green;
}
Selain menggunakan nama warna
secara langsung seperti red, brown, atau green sobat juga bisa menggunakan cara
lainnya seperti berikut:
1. Menggunakan kode heksadesimal
Kode ini menggunakan bilangan
heksadesimal yang terdiri dari gabungan 16 digit angka dan huruf. Digit angka
terdiri dari 0-9 kemudian dilanjutkan huruf alphabet A-F, dimana A=10, B=11,
C=12, D=13, E=14, dan F=15. Berikut contoh penulisannya:
<h4 style="color:
#ff6600">Teks ini berwarna orange</h4>
2. Menggunakan kode rgb (red,
green, blue)
Kode ini adalah kode penulisan
warna dengan menggunakan angka yang dimulai dari angka 0-255. Berikut contoh
penulisannya:
<h5 style="color:
rgb(255, 0, 255)">Teks Heading 5 ini berwarna magenta</h5>
3. Menggunakan kode hsl (hue,
saturation, lightness)
Kode ini adalah kode penulisan
warna dengan gabungan nilai derajat (hue) dari 0-360 dan nilai persen
(saturation, lightness) dari 0% - 100%. Berikut contoh penulisannya:
<h6 style="color:
hsl(240, 100%, 50%);">Teks Heading 6 ini berwarna biru</h6>
Berikut ini adalah gambaran hasilnya:
Sekian pembahasan tentang cara mengatur warna font di dalam dokumen html. Jika sobat tertarik dengan artikel seputar multimedia silakan kunjungi postingan kami lainnya di blog ini. Terima kasih …
0 Komentar
Terima kasih telah mengunjungi website ini semoga bermanfaat untuk anda