Cara Merubah Warna Teks dengan CSS
Perintah CSS yang digunakan untuk mengubah warna text HTML adalah dengan menggunakan property color, berikut contoh penulisannya:h1 { color: blue;}p { color: #99FFAA;}Sebagai nilai untuk property color, bisa berupa keyword warna (seperti: red, blue, yellow, dll), bisa juga berupa notasi angka hexadesimal RGB (seperti: #112233, #ABCDEF) atau dalam bentuk desimal (seperti: rgb(0, 160, 255) atau rgb(0%, 63%, 100%)).
Sebagai contoh tutorial, berikut adalah kode HTML dan CSS dengan penggunaan property color:
<!DOCTYPE html><html><head><title>Belajar Property Color CSS</title><style type="text/css"> .pertama { color: green; } .kedua { color: #335599; } .ketiga { color: rgb(200,200,0); }</style></head><body> <h2>Belajar Property Color CSS:</h2> <h3>color: green</h3> <p class="pertama">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet.</p> <h3>color: #335599</h3> <p class="kedua">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet.</p> <h3>color: rgb(200,200,0)</h3> <p class="ketiga">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget, fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet.</p></body></html>
Cara Merubah Warna Teks untuk warna RGBA dan HSLA
Untuk penggunaan lebih lanjut, kita juga bisa menggunakan kode warna yang lebih advanced dengan kode warna RGBA atau HSLA seperti: rgba(0,0,255,0.2) dan hsla(240,100%,60%,0.8).Dengan kode warna RGBA dan HSLA, CSS menyediakan fitur yang memungkinkan kita untuk mengatur tingkat ke-transparanan warna. Namun fitur ini tidak bisa digunakan untuk web browser Internet Explorer dibawah versi ke-8. Karena IE 6 atau 7 tidak mengerti RGBA, maka warna text tidak dapat ditampilkan. Untuk mengatasi hal ini, kita akan menggunakan 2 buah property color, dan memanfaatkan sifat prioritas (cascading) dari CSS.
Idenya adalah jika web browser mendukung warna RGBA atau HSLA, maka web browser tersebut akan menampilkan warna tersebut berikut dengan fitur ‘transparan’-nya, namun jika web browser tidak mengerti kode warna RGBA (seperti IE 6 dan 7), maka web browser akan menampilkan warna tanpa efek transparan.
Sebagai contoh, untuk membuat warna text berwarna biru dengan efek transparan (alpha channel) sebesar 80%, maka kita bisa menulisnya sebagai berikut:
p { color: #0000FF; // properti ini hanya akan digunakan pada IE6 dan IE7 color: rgba(0,0,255,0.8); // web browser modern akan menggunakan warna ini} |
Dengan memanfaatkan fitur cascading dari CSS, web browser modern seperti Google Chrome dan Firefox, akan menampilkan teks berwarna biru dengan efek transparant 80%. Hal ini karena urutan color terakhir adalah kode warna untuk RGBA yang akan menimpa kode warna RGB yang berada diatasnya.
Namun untuk IE 6 atau 7, warna akan tetap ditampilkan dengan warna biru (tanpa efek transparan) yang berasal dari perintah color pada baris pertama (karena kode color untuk baris kedua tidak “dimengerti” oleh web browser tersebut).
Kode warna RGBA dan HSLA lebih cocok digunakan untuk desain web yang saling menimpa (overlap), sehingga kita bisa membuat efek modern transparan. Namun perlu menjadi catatan bahwa tidak semua web browser mendukungnya. Sebaiknya efek warna RGBA dan HSLA hanya digunakan untuk fitur desain yang tidak berisi konten. Karena walaupun kita menggunakan 2 buah property color seperti diatas, pada web browser IE6 dan IE7, warna yang dihasilkan akan menutupi teks di bawahnya.
Cara Mengatur Lebar Spasi Antar Huruf dengan CSS
Sesuai dengan namanya, properti CSS letter-spacing digunakan untuk mengatur spasi atau jarak antar huruf. Nilai yang digunakan bisa berupa pixel, persen, em atau satuan ukuran text lainnya (pernah kita bahas dalam Mengenal Satuan Nilai (Value) dalam CSS).Jika kita memberikan nilai positif untuk letter-spacing, spasi antar karakter akan semakin menjauh. Untuk membuat spasi antar karakter semakin berdekatan, gunakan nilai negatif.
Berikut adalah contoh penulisan properti letter-spacing:
h1 { letter-spacing: 2px;}h2 { letter-spacing: -3px;}Nilai letter-spacing: normal bisa digunakan untuk membuat spasi antar karakter kembali ke nilai awal (nilai default).
Cara Mengatur Lebar (spasi) Antar Kata
Selain pengaturan spasi antar karakter, CSS juga menyediakan cara untuk mengatur jarak atau spasi antar kata dengan properti word-spacing. Sama seperti letter-spacing, kita bisa menggunakan nilai positif atau negatif untuk memperlebar atau memperkecil spasi antara sebuah kata dengan kata lainnya.Berikut adalah contoh penulisan properti word-spacing:
h1 { word-spacing: 20px;}h2 { word-spacing: -30px;}Nilai word-spacing: normal bisa digunakan untuk membuat spasi antar kata kembali ke nilai awal (nilai default).
Tutorial Cara Mengatur Lebar Antar Huruf dan Kata
Sebagai tutorial, berikut adalah contoh kode HTML dan CSS untuk penggunaan letter-spacing dan word-spacing:<!DOCTYPE html><html><head><title>Belajar letter-spacing dan word-spacing</title><style type="text/css"> .letter-5{ letter-spacing: -5px; } .letter-1{ letter-spacing: -1px; } .letter1 { letter-spacing: 1px; } .letter5 { letter-spacing: 5px; } .word-5{ word-spacing: -5px; } .word-1{ word-spacing: -1px; } .word1 { word-spacing: 1px; } .word5 { word-spacing: 5px; } </style></head><body> <h2>Belajar CSS: letter-spacing dan word-spacing</h2> <p class="letter-5"> Sebuah kalimat dengan nilai letter-spacing negatif : -5px </p> <p class="letter-1"> Sebuah kalimat dengan nilai letter-spacing negatif: -1px </p> <p class="letter1"> Sebuah kalimat dengan nilai letter-spacing positif: 1px </p> <p class="letter5"> Sebuah kalimat dengan nilai letter-spacing positif: 5px </p> <p class="word-5"> Sebuah kalimat dengan nilai word-spacing negatif: -5px </p> <p class="word-1"> Sebuah kalimat dengan nilai word-spacing negatif: -1px </p> <p class="word1"> Sebuah kalimat dengan nilai word-spacing positif: 1px </p> <p class="word5"> Sebuah kalimat dengan nilai word-spacing positif: 5px </p></body></html>
Mengatur Rata Teks dengan Property: text-align
Untuk mengatur rata text HTML dengan CSS, kita menggunakan property text-align. Property text-align memiliki 4 nilai yang bisa dipilih, yakni: left, right, center, atau justify. Sesuai dengan namanya, kita menggunakan text-align: left dan text-align: right untuk membuat rata teks kiri dan rata teks kanan. Untuk membuat text berada di tengah, kita mengunakan: text-align: center.Perintah text-align: justify digunakan untuk membuat text rata kiri dan kanan. Namun efek justify ini perlu menjadi catatan. Membuat text rata kiri dan kanan sekaligus akan membuat web browser menambah jarak (spasi) antar kata, terutama untuk kata yang panjang. Hal ini bisa membuat tulisan akan susah dibaca, terutama jika diakses dari smartphone yang memiliki layar kecil. Efek justify lebih cocok jika digunakan untuk media cetak seperti buku atau majalah.
Tutorial Cara Mengatur Rata Teks dengan CSS
Dalam tutorial kali ini saya akan membuat teks HTML sederhana, yang terdiri dari 4 paragraf menggunakan tag <p>. Masing-masing paragraf ini memiliki kode CSS text-align yang ‘ditempelkan’ menggunakan class selector.Berikut adalah contoh penggunaan property text-align:
<!DOCTYPE html><html><head><title>Belajar Rata Teks CSS</title><style type="text/css"> .left { text-align: left;} .right { text-align: right;} .center { text-align: center;} .justify { text-align: justify;}</style></head><body> <h2>Belajar Rata Teks CSS: text-align</h2> <h3>Text Align: Left</h3> <p class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet. Eam facilis omittantur at, usu efficiantur neglegentur delicatissimi et, in per vero splendide persequeris.<p> <h3>Text Align: Right</h3> <p class="right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet. Eam facilis omittantur at, usu efficiantur neglegentur delicatissimi et, in per vero splendide persequeris.<p> <h3>Text Align: Center</h3> <p class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet. Eam facilis omittantur at, usu efficiantur neglegentur delicatissimi et, in per vero splendide persequeris.<p> <h3>Text Align: Justify</h3> <p class="justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,fermentum rhoncus leo. Curabitur eu mi vitae metus posuere laoreet. Eam facilis omittantur at, usu efficiantur neglegentur delicatissimi et, in per vero splendide persequeris.<p></body></html>
Dalam tutorial belajar CSS kali ini kita telah membahasmacam-macam Penggunaan fitur text. ini bisa menjadi salah satu fitur untuk mempercantik hasil desain web. sekian dulupenjelasan dari saya sampai jumpa lagi di tutorial berikutnya.
This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.
silahkan berkomentar bila ada yang ingin di tanyakan . ConversionConversion EmoticonEmoticon