Belajar Koding HTML & CSS Bagian 24: Membuat Text Color
.png)
Pengertian
Text Color
Text
color adalah warna teks, yaitu warna yang diterapkan pada huruf / karakter
dalam elemen HTML.
Pengertian
HTML & CSS
HTML
(HyperText Markup Language)
HTML adalah bahasa markup (bukan bahasa pemrograman) yang digunakan untuk menyusun struktur konten halaman web: teks, gambar, tautan, formulir, dan sebagainya.
HTML menggunakan “tag” atau elemen (misalnya <h1>, <p>, <a>, <img>, dan lain-lain) untuk menandai bagian konten sebagai judul, paragraf, link, gambar, dll.
Browser (seperti Chrome, Firefox,
Safari) membaca dokumen HTML dan menampilkan kontennya sesuai struktur yang
ditandai oleh tag HTML.
CSS (Cascading Style Sheets)
CSS adalah bahasa stylesheet yang digunakan untuk mengatur tampilan visual elemen HTML: warna, ukuran font, margin, padding, layout, background, dan lain-lain.
Dengan CSS, kita memisahkan konten (HTML) dari gaya tampilan (CSS), sehingga lebih mudah merawat dan mengubah desain.
Konsep “cascading” artinya
gaya-khusus lebih spesifik bisa “menimpa” gaya umum; aturan selektor, urutan,
dan konflik antar aturan CSS diatur agar yang paling relevan berlaku.
Contoh Koding Sederhana Text Color
CSS
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color: hsl(0, 100%, 50%);
Contoh Koding Lengkap HTML & CSS
Membuat Coding Text Warna
Simpan sebagai text-color-demo.html
lalu buka di browser:
<!doctype html>
<html>
<head>
<meta
charset="utf-8">
<title>Demo
Text Color</title>
<style>
:root {
--primary:
#0a74da;
--muted: rgba(0,0,0,0.6);
}
body {
font-family: Arial, sans-serif; color: #222; padding: 20px; }
h1 { color:
var(--primary); }
h2 { color:
#ff6347; } /* HEX */
p { color:
var(--muted); }
.rgb { color:
rgb(34,139,34); } /* rgb() */
.hsl { color:
hsl(260, 60%, 40%);} /* hsl() */
.semi { color:
rgba(0,0,0,0.45); } /* rgba() */
a { color:
currentColor; text-decoration: underline; text-decoration-color: currentColor;
}
</style>
</head>
<body>
<h1>Judul —
menggunakan CSS variable</h1>
<h2>Subjudul
— HEX</h2>
<p
class="rgb">Ini teks berwarna hijau (rgb).</p>
<p
class="hsl">Ini teks berwarna ungu (hsl).</p>
<p
class="semi">Ini teks semi-transparan (rgba).</p>
<p>Paragraf
biasa dengan warna default. <a href="#">Link mengikuti warna
teks</a></p>
</body>
</html>
Contoh Output HTML & CSS Membuat Coding Text Warna
Referensi
https://developer.mozilla.org/en-US/docs/Web/CSS/color
https://css-tricks.com/almanac/properties/c/color/
https://www.w3schools.com/css/css_text.asp
https://www.freecodecamp.org/news/how-to-change-text-color-in-html/
0 Response to "Belajar Koding HTML & CSS Bagian 24: Membuat Text Color "
Post a Comment