Tutorial Belajar CSS Part 25 – Mengatur Format text dengan CSS

Posted on Posted in Tutorial 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.

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 :

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 :

  1. right
  2. left
  3. center
  4. justify

Baik langsung saja ke bagian contoh, perhatikan skrip dibawah ini :

Semisal kita simpan dengan nama text-alignment.html, lalu kita buka di browser :

Penjelasan :

  1. Pada h1 pertama yang menggunakan class satu, kita menggunakan text-align: left, sehingga text ditampilkan di sebelah kiri
  2. Pada h1 kedua yang menggunakan class dua, kita menggunakan text-align: center, sehingga text ditampilkan di sebelah tengah
  3. Pada h1 ketiga yang menggunakan class tiga, kita menggunakan text-align: right, sehingga text ditampilkan di sebelah kanan
  4. 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 :

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 :

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.

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 :

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 :

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 :

Semisal kita simpan dengan nama text-direction.html, lalu kita buka di browser :

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 :

Semisal kita simpan dengan nama word-spacing.html, lalu kita buka di browser :

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 :

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.

 

 

 

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *