Menyajikan Css Untuk Memformat Tampilan Teks

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 mencakup 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, gampang dalam hal pengaturans serta editing, teks pada sebuah halaman web sanggup diberikan sytle dalam kemasan CSS. Pengaturan style tersebut mencakup banyak properti, diantaranya ialah pewarnaan, pemilihan font, spasi dan lain sebagainya. Untuk lebih detailnya sanggup 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 dampak bayangan pada teks
9.	text-transform	Mengatur aksara 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 sanggup terapkan untuk mengatur warna dari teks. Pengaturan warna teks dengan CSS sanggup memakai nilai warna  HEX misalnya, "#ff0000",  nilai RGB misalnya, "rgb(255,0,0)", dan nama dari warna tersebut contohnya "red", "white" dan sebagainya. Format penulisan untuk pinjaman warna pada text memakai CSS ialah sebagai berikut : selector {color:nilai warna}. Contoh :

Indonesia(merah)

2. Pengaturan Spasi Antar Karakterf/letter-spacing

Salah satu style dari CSS ialah letter-spacing yang sanggup dipakai untuk menawarkan jarak (spasi) antar karakter atau huruf. Format penulisan CSS untuk pengaturan jarak (spasi) antar karakter atau aksara ialah 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 memakai properti text-decoration bertujuan untuk mengatur atau menghapus dekorasi dari teks. Format penulisan CSS untuk mengaturan dekorasi teks ialah sebagai berikut : selector {text-decoration : nilai text-decoration }. Nilai dari text-decoration sanggup 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 ialah word-spacing yang sanggup dipakai untuk menawarkan jarak (spasi) antar kata. Format penulisan CSS untuk pengaturan jarak (spasi) antar karakter atau aksara ialah sebagai berikut : selector { word-spacing:nilai spasi;} Besarnya nilai spasi sanggup 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 memilih 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 ialah sebagai berikut : selector { text-indent:nilai indent} Besarnya nilai spasi sanggup 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 dipakai untuk memilih aksara besar dan kecil dalam teks. Format penulisan CSS untuk pengaturan text indent ialah sebagai berikut : selector { text-transform:nilai text transform} Nilai text transform sanggup diisi dengan uppercase (kapital semua), lowercase (kecil semua), capitalize (awal kata aksara kapital). Contoh : h2 {text-transform: uppercase}. Contoh :

Indonesia (uppercase)

Indonesia (lowercase)

Indonesia (capitalize)

7. Pemberian Efek Bayangan pada Teks/Text shadow

Text-shadow dipakai untuk menawarkan dampak bayang pada sebuah teks. Berikut ialah 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 dipakai untuk mengatur alignment horizontal teks. Teks sanggup ditulis rata kiri, rata kanan, rata kanan kiri ataupun ditulis center. Ketika text-align diset “justify", setiap baris mempunyai 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;}.