Pada tutorial kali ini akan dibahas bagaimana cara mengatur teks pada CSS agar sesuai dengan kebutuhan atau keinginan kita. CSS memiliki properti format teks seperti alignment, color, spacing, direction dan lain-lain. Properti yang akan di bahas pada tutorial ini adalah apa fungsi text-color dan background-color dan bagaimana cara penggunaanya.
Sebelumnya berikut ini adalah contoh formatting teks pada CSS dengan menggunakan alingment, spacing, decoration dan transformation yang nantinya akan kita pelajari lebih lanjut.
<!DOCTYPE html> <html> <head> <style> div { border: 1px solid gray; padding: 8px; } h1 { text-align: center; text-transform: uppercase; color: #4CAF50; } p { text-indent: 50px; text-align: justify; letter-spacing: 3px; } a { text-decoration: none; color: #008CBA; } </style> </head> <body> <div> <h1>Mengatur Teks pada CSS</h1> <p>Teks ini menggunakan Style dengan beberapa properti format teks pada CSS. Judul menggunakan properti text-align, text-transform, dan color. Paragraf diberi indentation, alignment, dan letter spacing secara spesifik. </p> </div> </body> </html>
Section Artikel
Text Color
Properti color pada CSS berfungsi untuk mengatur warna teks sesuai dengan kebutuhan atau keinginan kita. Menentukan warna pada properti color dapat dilakukan dengan:
- Menuliskan nama warna (dalam bahasa inggris) – seperti “red”, “blue”, “yellow” dan lain-lain sesuai kebutuhan.
- Menuliskan nilai HEX dari warna yang di inginkan – seperti “# ff0000” untuk warna merah.
- Menuliskan nilai RGB dari warna yang di inginkan – seperti “rgb (0,0,255)” untuk warna biru.
Untuk memberi warna teks pada sebuah halaman, properti color dituliskan pada body selector.
Contoh :
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: blue;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>Ini heading 1</h1>
<p>Ini adalah paragraf biasa. Perhatikan bahwa teks ini berwarna biru. Warna teks default untuk halaman ini ditentukan pada body selector.</p>
<p>Paragraf lain.</p>
</body>
</html>Color dan Background Color
Properti background-color pada CSS digunakan untuk memberi warna pada latar background teks.
Berikut ini adalah contoh dari penerapan properti background-color dan color sekaligus.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h1>Heading ini berwarna hitam dengan teks berwarna putih</h1>
<p>Halaman ini memiliki warna background abu-abu dan teks biru.</p>
<p>Paragraf baru.</p>
</body>
</html>Sekian bahasan dan contoh penggunaan color dan background color pada CSS, semoga bermanfaat.
