Tutorial Belajar CSS Part 25 – Mengatur Format text dengan CSS
Dalam tutorial kali ini kita belajar mengenai cara mengatur format text dengan CSS, tutorial ini masih ada kaitannya dengan tutorial sebelumnya yang membahas mengenai mengatur jenis font dengan css, karena masih ada kaitannya dengan text.
Video Tutorial Belajar CSS – Mengatur Format text dengan CSS
Banyak sekali property CSS yang bisa anda gunakan untuk memanipulasi dari format text, beberapa fitur yang bisa anda gunakan antara lain :
- color
- aligment
- decoration
- transformation
- identation
- letter-spacing
- line-height
- text-direction
- word spacing
- text shadow
Banyak kan teman – teman, baik kita akan coba membahasnya satu persatu
Text Color
Perintah color digunakan untuk mengatur warna yang digunakan pada text, beberapa satuan warna yang bisa anda gunakan adalah seperti ini :
- menuliskan nama warnanya – seperti “red”, “blue”
- kode HEX – seperti “#ff0000”
- kode RGB – seperti “rgb(255,0,0)”
sebagai contoh silahkan perhatikan skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <title>Contoh Font Color</title> <style type="text/css"> p.satu{ color:blue; } p.dua{ color:red; } </style> </head> <body> <p class="satu">Ini adalah Paragraf Satu</p> <p class="dua">Ini adalah Paragraf Dua</p> </body> </html> |
Semisal kita simpan dengan nama font-color.html, lalu kita akses melalui browser maka hasilnya :
Penjelasan :
- ada 2 paragraf di gambar atas.
- paragraf pertama berwarna biru, karena kita menggunakan property color:blue pada class satu
- paragrat kedua berwarna merah, karena kita menggunakan property color:red pada class dua
Text Alignment
Property Text-aligment digunakan untuk mengatur posisi dari text yang ditampilkan di browser, ya mirip dengan alignment di Microsoft editor ataupun text editor lainnya, ada 4 nilai yang bisa anda gunakan yaitu :
- right
- left
- center
- justify
Baik langsung saja ke bagian contoh, perhatikan skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <style> h1.satu { text-align: left; } h1.dua { text-align: center; } h1.tiga { text-align: right; } p{ text-align: justify; width: 500px; height: 300px; border:solid 1px black; } </style> </head> <body> <h1 class="satu">Heading 1 (center)</h1> <h1 class="dua">Heading 2 (left)</h1> <h1 class="tiga">Heading 3 (right)</h1> <p>Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf Ini adalah sebuah paragraf </p> </body> </html> |
Semisal kita simpan dengan nama text-alignment.html, lalu kita buka di browser :
Penjelasan :
- Pada h1 pertama yang menggunakan class satu, kita menggunakan text-align: left, sehingga text ditampilkan di sebelah kiri
- Pada h1 kedua yang menggunakan class dua, kita menggunakan text-align: center, sehingga text ditampilkan di sebelah tengah
- Pada h1 ketiga yang menggunakan class tiga, kita menggunakan text-align: right, sehingga text ditampilkan di sebelah kanan
- Paragraf menggunakan text-align: justify; sehingga text ditampilkan dengan rata bagian objeknya, dalam contoh diatas kita membuat paragraf berukuran 500px (lebar) 300px (height) dan memberikannya border, jika anda belum memahami konsep border silahkan baca mengatur border dengan css, dan untuk width dan height silahkan baca mengatur width dan height dengan css
Text Decoration
Text decoration digunakan untuk menghilangkan decoration dari sebuah text, contoh yang paling sering kita temui adalah jika anda menggunakan tag <a> untuk membuat sebuah link, biasanya terdapat garis bawah, nah itu bisa dihilangkah dengan menggunakan text-decoration, contoh penggunaan skrip adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> a.satu { text-decoration: none; } h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; } </style> </head> <body> <a class="satu" href="http://google.com">Google</a> <br/> <a href="http://facebook.com">Facebook</a> <h1>Ini adalah Heading 1</h1> <h2>Ini adalah Heading 2</h2> <h3>Ini adalah Heading 3</h3> </body> </html> |
Semisal kita simpan dengan nama text-decoration.html, lalu kita buka di browser :
Penjelasan :
- Dalam contoh diatas kita buat 2 link
- Perhatikan untuk link pertama yang mengakses google, kita beri class satu lalu kita berikan perintah text-decoration:none yang membuat garis bawah pada link hilang, coba perhatikan link pertama tidak ada garis bawah, tapi di link kedua terdapat garis bawah.
- Pada heading 1 terdapat garis diatas text karena menggunakan property text-decoration:overline;
- Pada heading 2 terdapat garis ditengah text karena menggunakan property text-decoration: line-through;
- Pada heading 3 terdapat garis dibawah text karena text-decoration: underline;
Text Transformation
text transformation digunakan untuk merubah besar kecilnya huruf, terdapat 3 value yang bisa anda gunakan untuk property ini, yaitu :
- uppercase
- lowercase
- capitalize
untuk lebih memahami silahkan perhatikan skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!DOCTYPE html> <html> <head> <style> p.satu { text-transform: uppercase; } p.dua { text-transform: lowercase; } p.tiga { text-transform: capitalize; } </style> </head> <body> <p class="satu">Ini adalah paragraf Pertama</p> <p class="dua">INI ADALAH PARAGRAF KEDUA</p> <p class="tiga">Ini adalah paragraf Ketiga</p> </body> </html> |
Semisal kita simpan dengan nama text-transformation.html, lalu kita buka di browser :
Penjelasan :
- Perhatikan paragraf pertama menggunakan class satu, paragraf ditampilkan dengan huruf kapital seluruhnya, hal tersebut karena class satu menggunakan property text-transform: uppercase;
- Perhatikan paragraf kedua menggunakan class dua, paragraf ditampilkan dengan huruf kecil seluruhnya, hal tersebut karena class dua menggunakan property text-decoration:lowercase; meskipun paragrafnya kita tuliskan menggunakan huruf besar keseluruhan
- Perhatikan paragraf ketiga menggunakan class tiga, paragraf ditampilkan dengan huruf besar diawal kata, hal tersebut karena class tiga menggunakan property text-decoration:capitalize;
Text-Indent
Property text-indent digunakan untuk membuat awalan dari paragraf menjorok ke arah kanan, seperti kebanyakan dari paragraf, anda bisa menggunakan value ukuran dalam satuan px.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <style> p { text-indent: 50px; } </style> </head> <body> <p>Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf Ini adalah paragraf </p> </body> </html> |
Semisal kita simpan dengan nama text-indent.html, lalu kita buka di browser :
penjelasan :
- perhatikan awal paragraf ditampilkan menjorok ke arah kanan sebesar 50 px
Letter Spacing
Property ini digunakan untuk mengatur jarak antar huruf, jadi bisa anda atur renggang atau lebih rapat, anda bisa menggunakan satuan pixel untuk value, perhatikan contoh berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <style> p.satu { letter-spacing: -3px; } p.dua { letter-spacing: 5px; } p.tiga { letter-spacing: 10px; } </style> </head> <body> <p class="satu"> Ini adalah paragraf pertama </p> <p class="dua"> Ini adalah paragraf kedua </p> <p class="tiga"> Ini adalah paragraf ketiga </p> </body> </html> |
Semisal kita simpan dengan nama letter-spacing.html, lalu kita buka di browser :
Penjelasan :
- Paragraf pertama menggunakan class satu kita gunakan property letter-spacing: -3px sehingga huruf pada paragraf yang ditampilkan sangat rapat, bahkan bergandeng satu huruf dengan huruf yang lain
- paragraf kedua menggunakan class dua kita gunakan property letter-spacing: 5px sehingga huruf pada paragraf yang ditampilkan renggang.
- paragraf ketiga menggunakan class tiga kita gunakan property letter-spacing: 10px sehingga huruf yang ditampilkan lebih renggang lagi daripada paragraf kedua.
Line-Height
Property ini digunakan untuk mengatur jarak antara baris satu dan baris berikutnya pada sebuah paragraf, perhatikan contoh berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html> <head> <style> p.satu { line-height: 0.5; } p.dua { line-height: 2; } </style> </head> <body> <p> Ini adalah paragraf 1 Ini adalah paragraf 1 Ini adalah paragraf 1 <br> Ini adalah paragraf 1 Ini adalah paragraf 1 Ini adalah paragraf 1 <br> </p> <p class="satu"> Ini adalah paragraf 2 Ini adalah paragraf 2 Ini adalah paragraf 2 <br> Ini adalah paragraf 2 Ini adalah paragraf 2 Ini adalah paragraf 2 <br> </p> <p class="dua"> Ini adalah paragraf 3 Ini adalah paragraf 3 Ini adalah paragraf 3 <br> Ini adalah paragraf 3 Ini adalah paragraf 3 Ini adalah paragraf 3 <br> </p> </body> </html> |
Semisal kita simpan dengan nama line-height.html, lalu kita buka di browser :
Penjelasan :
- Perhatikan untuk paragraf pertama kita tidak memberikan property line-height sehingga paragraf ditampilkan secara default.
- Perhatikan untuk paragraf kedua kita memberikan property line-height dengan value 0.5 sehingga ditampilkan rapat, bahkan terkesan gandeng.
- Perhatikan untuk paragraf ketiga kita memberikan property line-height dengan value 2 sehingga ditampilkan lebih renggang
Text Direction
Property ini digunakan untuk mengatur direction dari sebuah text, paragraf normalnya dituliskan dari kiri ke kanan, tapi seperti tulisan arab ditampilkan kanan ke kiri, itu membutuhkan property text-direction, agar lebih jelas perhatikan skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <style> p.dua { direction: rtl; } </style> </head> <body> <p>Paragraf 1 Paragraf 1 Paragraf 1 Paragraf 1 Paragraf 1 Paragraf 1 </p> <p class="dua"><bdo dir="rtl">Paragraf 1 Paragraf 1 Paragraf 1 Paragraf 1 Paragraf 1 Paragraf 1</bdo></p> </body> </html> |
Penjelasan :
- Paragraf pertama ditampilkan normal dimulai dari sebelah kiri ke kanan
- Paragraf kedua yang menggunakan class dua ditampilkan dari sebelah kanan ke kiri, tidak hanya mengatur property text-decoration:rtl dan tag <bdo dir=”rtl”> dan diakhir </bdo>, kita telah juga membahas mengenai merubah arah text pada HTML
Word-Spacing
Property ini digunakan untuk mengatur jarak antar kata, anda bisa menggunakan value dengan satuan pixel, perhatikan contoh dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <style> h1 { word-spacing: 10px; } h2 { word-spacing: -5px; } </style> </head> <body> <h1>Ini Heading 1 Ini Heading 1 Ini Heading 1 </h1> <h2>Ini Heading 2 Ini Heading 2 Ini Heading 2 </h2> </body> </html> |
Penjelasan :
- heading satu jarak antar kata ditampilkan lebih renggang karena menggunakan property word-spacing: 10px
- heading dua jarak antar kata ditampilkan lebih rapat karena menggunakan property word-spacing:-5px
Text-shadow
Property text-shadow digunakan untuk memberikan efek bayangan pada text yang ditampilkan, value yang harus anda tuliskan adalah :
- posisi bayangan secara horizontal (ke arah kanan jika nilai positif, ke arah kiri jika nilai negatif)
- posisi bayangan secara vertical (ke arah bawah jika nilai positif, ke arah atas jika nilai negatif)
- warna dari bayangan
Contohnya perhatikan skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <style> h1 { text-shadow: 3px 2px red; } </style> </head> <body> <h1>Text-shadow</h1> </body> </html> |
Semisal kita simpan dengan nama text-shadow.html, lalu kita buka di browser :
Penjelasan :
- bayangan text ditampilkan 3 pixel ke arah kanan, 2 pixel ke arah bawah, dan bayangan merah.
Bagaimana teman – teman mudah bukan, beberapa property tersebut bisa anda gunakan untuk mengatur text yang ditampilkan di dalam web, baik itu dulu yang bisa kita bahas mengenai cara mengatur text dengan css, jika ada yang ingin didiskusikan silahkan di kolom komentar.
