CSS lanjutan

Merubah warna teks (Font) HTML dengan CSS (color)

Perintah CSS yang digunakan untuk mengubah warna teks HTML adalah dengan menggunakan properti color, berikut contoh penulisannya:

Sebagai nilai untuk property color, bisa berupa keyword warna (seperti red, green, blue ,dan yellow), bisa juga berupa notasi angka hexadesimal RGB (seperti #112233, #ABCDER) atau dalam bentuk desimal (seperti RGB(0,100,255) atau RGB(0%,63%,100%).

Penjelasan lebih lanjut tentang pengertian metode warna ini bisa dibaca pada tutorial belajar CSS penulisan kode warna pada CSS.

Sebagai contoh tutorial, berikut kode HTML dan CSS dengan penggunaan properti color.

Hasil dari kode di atas

Pada contoh di atas, saya membuat 3 buah kalimat dengan class: pertama, kedua, ketiga.Masing masing class tersebut diset warna teksnya dengan CSS

Mengatur lebar spasi antar huruf dan kata teks HTML

Properti CSS letter-spacing digunakan untuk mengatur spasi atau jarak antar huruf.

Nilai yang digunakan bisa berupa pixel, persen, em atau satuan ukuran teks lainnya.Jika kita memberikan nilai positif untuk letter-spacing, spasi antarkarakter akan semakin jauh.

Untuk membuat spasi antar karakter semakin berdekatan, gunakan nilai negatif.

Berikut adalah contoh penulisan properti letter-spacing.

Cara mengatur lebar spasi antar kata

Selain pengaturan spasi antar karakter l, 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 antar sebuah kata dengan kata lainnya.

Berikut adalah contoh penulisan properti word-spacing.

Cara mengatur lebar antar huruf dan kata

Berikut adalah contoh kode HTML dan CSS untuk penggunaan letter-spacing:

Hasil dari kode di atas

Mengatur rata teks HTML dengan CSS (text-align)

Mengatur rata teks dengan property text-align, untuk mengatur rata teks HTML dan CSS, kita menggunakan property text-align.

Properti text-align memiliki 4 nilai yang bisa dipilih yakni: left, right, center, atay justify.

Sesuai dengan namanya, kita menggunakan text-align:left dan text-align: right untuk membuat rata teks kiri dan teks kanan.

Untuk membuat teks berada di tengah kita menggunakan text-align:center.

Perintah text-align:justify digunakan untuk membuat teks rata kiri dan kanan, namun efek justify ini perlu menjadi catatan.

Membuat rata teks 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 di baca, terutama jika di akses dari smartphone yang memiliki layar kecil.

Efek justify lebih cocok jika digunakan untuk media cetak seperti buku atau majalah.

Cara mengatur rata teks dengan CSS

Kali ini kita akan membuat teks HTML sederhana, yang terdiri dari 4 paragraf menggunakan tag p.

Masing masing paragraf ini memiliki kode CSS text-align yang di tempelkan menggunakan class selector.

Berikut adalah contoh penggunaan properti text-align:

Hasil kode dari atas