Pada tutorial kali ini kita akan membahas bagaimana cara mengatur teks di CSS agar sesuai dengan kebutuhan atau keinginan kita. CSS memiliki properti format teks seperti perataan, warna, spasi, arah dan lain-lain. Properti yang akan dibahas dalam tutorial ini adalah apa itu fungsi text-color dan background-color dan bagaimana cara menggunakannya
Sebelumnya, berikut adalah contoh pemformatan teks di CSS menggunakan perataan, spasi, dekorasi, dan transformasi yang akan kita pelajari nanti.
< a href="//dosenit.com/html/tutorial-html"html/a> 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; }Mengatur Teks pada CSS
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.
Bagian Artikel
Warna teks
Properti color pada CSS berfungsi untuk mengatur warna teks sesuai kebutuhan atau keinginan kita. Menentukan warna pada properti color dapat dilakukan dengan
Color atau warna pada HTML dapat didefinisikan dengan nama warna yang telah ditentukan sebelumnya, atau dengan nilai RGB, HEX, HSL, RGBA, atau HSLA
Bagian Artikel
Nama Warna
Dalam HTML, warna dapat ditentukan menggunakan nama warna
Contoh
_Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray
Warna latar belakang
Dalam HTML kita bisa mengatur warna backgorund [warna latar belakang] untuk elemen HTML
Contoh
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Warna teks
Pada HTML kita dapat mengatur warna teks sesuai dengan keinginan kita
Contoh
Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Warna Perbatasan
Kami juga dapat menentukan warna perbatasan dalam HTML
Contoh
_Hello World
Hello World
Hello World
Nilai Warna
Dalam HTML, warna juga dapat ditentukan menggunakan nilai RGB, nilai HEX, nilai HSL, nilai RGBA, dan nilai HSLA
Menambahkan warna ke teks HTML Anda itu mudah. Dalam tutorial singkat ini kita akan membahas cara mengubah warna teks HTML Anda menggunakan kode warna Hex, nama warna HTML, nilai RGB dan HSL
Warna teks menggunakan kode warna Hex
Cara paling umum untuk mewarnai teks HTML adalah dengan menggunakan kode warna heksadesimal [singkatnya kode Hex]. Cukup tambahkan atribut gaya ke elemen teks yang ingin Anda warnai – paragraf dalam contoh di bawah ini – dan gunakan properti warna dengan kode Hex Anda
HTML
Red paragraph text
Demo di CodePen
Tidak punya kode Hex?
Warna teks menggunakan nama warna HTML
Cara lain untuk mewarnai teks situs web Anda adalah dengan menggunakan nama warna HTML. Kode HTMLnya mirip, tinggal ganti kode Hex dari langkah sebelumnya dengan nama warna yang ingin digunakan [warna merah pada contoh kita]. Ada 140 nama warna untuk dipilih, dan kami telah menyusun daftar yang dapat Anda lihat di sini
HTML
Red paragraph text
_Demo di CodePen
Warna teks menggunakan nilai warna RGB
Menggunakan nilai RGB sangat populer akhir-akhir ini, tetapi semudah kode Hex atau nama warna. Masukkan nilai RGB Anda di dalam parameter rgb[] mengikuti properti warna. Anda dapat menggunakan pemilih warna kami untuk mendapatkan nilai RGB selain kode Hex
HTML
Red paragraph text
Demo di CodePen
Saat menggunakan nilai RGB di situs web Anda, Anda juga dapat menentukan opacity. Alih-alih rgb[] gunakan rgba[] – a adalah untuk alfa, saluran warna yang mengontrol opacity – dan setelah tiga nilai warna Anda tambahkan keempat untuk opacity, pada skala dari 0 – 1 [0 untuk transparan sepenuhnya, 1 untuk benar-benar buram]
HTML
Red paragraph text
_Demo di CodePen
Warna teks menggunakan nilai warna HSL
Metode keempat untuk menambahkan warna adalah dengan menggunakan nilai HSL. Mirip dengan sintaks RGB yang dijelaskan di atas, HSL menggunakan awalan hsl[], dan tiga nilai untuk hue, saturation, dan lightness. Hue direpresentasikan dalam skala 0 – 360, sementara saturasi dan kecerahan masing-masing merupakan persentase antara 0% dan 100%
HTML
Red paragraph text
_Demo di CodePen
Sama seperti RGB, saat menggunakan HSL Anda dapat mengubah opasitas warna langsung di properti warna. Gunakan awalan hsla[] dan sertakan nilai keempat antara 0 dan 1 untuk tingkat opasitas yang Anda perlukan