CSS merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website. CSS 3 merupakan versi CSS terbaru yang masih dikembangkan oleh W3C dan CSS 2 didukung seutuhnya oleh CSS 3 dan tidak ada perubahan. Pengaturan style tersebut meliputi banyak properti, diantaranya color, direction, letter-spacing,line-height, text-align,text-decoration, textindent,
text-shadow, text-transform, unicode-bidi, vertical-align,whitespace, word-spacing.
Agar lebih menarik, mudah dalam hal pengaturans serta editing, teks pada sebuah halaman web dapat diberikan sytle dalam kemasan CSS. Pengaturan style tersebut meliputi banyak properti, diantaranya adalah pewarnaan, pemilihan font, spasi dan lain sebagainya. Untuk lebih detailnya dapat dilihat pada tabel berikut ini.
| No. | Properti | Keterangan |
|---|---|---|
| 1. | color | Mengatur warna dari teks |
| 2. | direction | Menentukan arah tulisan/teks |
| 3. | letter-spacing | Menambah ataupun mengurangi spasi antar karakter dalam teks |
| 4. | line-height | Mengatur tinggi baris teks |
| 5. | text-align | Menentukan batas teks secara horisontal |
| 6. | text-decoration | Menentukan dekorasi/hiasan pada teks |
| 7. | text-indent | Menentukan jarak inden dari baris pertama dalam teksblok |
| 8. | text-shadow | Menentukan efek bayangan pada teks |
| 9. | text-transform | Mengatur huruf besar-huruf kecil dari teks |
| 10. | unicode-bidi | Untuk mengeset unicode |
| 11. | vertical-align | Menentukan batas teks secara horisontal |
| 12. | white-space | Menentukan penulisan white-space pada elemen |
| 13. | word-spacing | Menambah ataupun mengurangi spasi antar kata dalam teks |
1. Pengaturan Warna Pada Teks/color
CSS dapat terapkan untuk mengatur warna dari teks. Pengaturan warna teks dengan CSS dapat menggunakan nilai warna HEX misalnya, "#ff0000", nilai RGB misalnya, "rgb(255,0,0)", dan nama dari warna tersebut misalnya "red", "white" dan sebagainya. Format penulisan untuk pemberian warna pada text menggunakan CSS adalah sebagai berikut : selector {color:nilai warna}. Contoh :
Indonesia(merah)
Salah satu style dari CSS adalah letter-spacing yang dapat digunakan untuk memberikan jarak (spasi) antar karakter atau huruf. Format penulisan CSS untuk pengaturan jarak (spasi) antar karakter atau huruf adalah sebagai berikut : selector { letter-spacing:nilai spasi;}. Contoh : h4 {letter-spacing: -2px}. Contoh :
Indonesia(letter-spacing 0.5em)
3. Pengaturan Bentuk-Bentuk Teks/decoration
Pengaturan bentuk teks menggunakan properti text-decoration bertujuan untuk mengatur atau menghapus dekorasi dari teks. Format penulisan CSS untuk mengaturan dekorasi teks adalah sebagai berikut : selector {text-decoration : nilai text-decoration }. Nilai dari text-decoration dapat berupa overline, line-through, underline dan none yang berarti tanpa dekorasi . Contoh : h2 {text-decoration: line-through}. Contoh :
Indonesia(overline)
Indonesia(underline)
Indonesia(line-through)
4. Pengaturan Spasi Antar Kata/word-spacing
Salah satu style dari CSS adalah word-spacing yang dapat digunakan untuk memberikan jarak (spasi) antar kata. Format penulisan CSS untuk pengaturan jarak (spasi) antar karakter atau huruf adalah sebagai berikut : selector { word-spacing:nilai spasi;} Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px.. Contoh : h2 {word-spacing: 5px}. Contoh :
Indonesia Jaya Selalu (word-spacing 5px)
5. Pengaturan Jarak Indentasi Paragraph/text-indent
Text-indent menentukan jarak inden dari baris pertama dalam teks-blok, sehingga teks pada baris pertama terlihat lebih menjorok kedalam dibanding teks pada baris yang lain. Format penulisan untuk pengaturan jarak indentasi text adalah sebagai berikut : selector { text-indent:nilai indent} Besarnya nilai spasi dapat ditentukan dalam satuan cm maupun px. Contoh : p {text-indent: 2cm }. Contoh :
Indonesia (indent 75px)
6. Pengubahan Huruf Besar dan Huruf Kecil dari sebuah teks/text-transform
Teks-transform properti digunakan untuk menentukan huruf besar dan kecil dalam teks. Format penulisan CSS untuk pengaturan text indent adalah sebagai berikut : selector { text-transform:nilai text transform} Nilai text transform dapat diisi dengan uppercase (kapital semua), lowercase (kecil semua), capitalize (awal kata huruf kapital). Contoh : h2 {text-transform: uppercase}. Contoh :
Indonesia (uppercase)
Indonesia (lowercase)
Indonesia (capitalize)
7. Pemberian Efek Bayangan pada Teks/Text shadow
Text-shadow digunakan untuk memberikan efek bayang pada sebuah teks. Berikut adalah format penulisan CSS dengan text-shadow Selector { text-shadow: koordinatX koordinatY nilaiWarnaTeksBayangan;} Contoh : penulisan text shadow h1 { text-shadow: 2px 2px #ff0000; }. Contoh :
Indonesia
8. Pengaturan Text Alignment
Properti text-align digunakan untuk mengatur alignment horizontal teks. Teks dapat ditulis rata kiri, rata kanan, rata kanan kiri ataupun ditulis center. Ketika text-align diset “justify", setiap baris memiliki lebar yang sama, dan margin kiri dan kanan lurus (seperti di majalah dan surat kabar). Format penulisan CSS untuk text alignment selector {text-align:nilai text-align;}. Contoh : h1 {text-align:center;}.
