Menyajikan Css Untuk Memformat Tampilan Teks
Wednesday, March 25, 2020
Edit
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)
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;}.