Text CSS

Dengan text CSS kita bisa memodifikasi tampilan dari keseluruhan text baik itu space, decoration maupun alignment.

Text decoration

Dengan text decoration maka kamu bisa membuat tampilan text menjadi berbeda karena ditambah beberapa dekorasi seperti menambahkan garis di tengah, atas, maupun di bawah text. Selain itu dengan text decoration kamu juga bisa menghilangkan underline yang ada pada sebuah text link.

Code CSS decoration:

h4{ text-decoration: line-through; }
h5{ text-decoration: overline; }
h6{ text-decoration: underline; }
a { text-decoration: none; }

Hasil code CSS decoration:

Text header h4 ini ada garis line-through ditengahnya

Text header h5 ini ada garis overline diatasnya
Text header h6 ini ada garis underline dibawahnya

Ini adalah link tanpa garis bawah – Kamu bisa pelajari cara membuat link disini

Text indent

Text indent CSS adalah salah satu cara untuk memberi indent pada paragraph tanpa kita perlu menggunakan preformatted tag HTML <pre> atau menggunakan space manual [&nbsp;]. Kamu bisa menggunakan indent dengan value dalam pixel maupun dalam persen. Kalau rekomendasi saya adalah dalam persen.

Code CSS text-indent:

p { text-indent: 40px; }
h4 { text-indent: 20%; }

Hasil code CSS text-indent:

Ini adalah paragraph yang menggunakan text-indent dengan nilai 40px. Menggunakan pixel sangat saya rekomendasikan dibandingkan persen.

Ini adalah header h4 yang menggunakan text-indent dengan nilai 20%. Saya lebih menganjurkan kamu untuk menggunakan pixel.

Text align

Secara default, text akan ditampilkan rapat kiri. Kalau kamu ingin memodifikasi tampilan dari text ini maka kamu bisa menggunakan attribute text-align.

Code CSS text align:

p { text-align: right; }
h4 { text-align: justify; }

Hasil code CSS text align:

Paragraph ini mempunyai tampilan rapat kanan karena kita menggunakan text-align: right. Dengan CSS maka semua tampilan text yang kamu punya bisa kamu modifikasi dan kamu buat menjadi lebih unik sesuai dengan tema apa yang kamu inginkan.

Text header h4 ini tampil dengan justify karena sudah diberi code CSS text-align: justify. Saya merekomendasikan kamu menggunakan tampilan default rapat kiri untuk text. Tetapi kalau kamu ingin text kamu tampil secara rapat kanan maupun justify ya terserah kamu.

Text transform

Untuk merubah secara otomatis sebuah text menjadi capital maupun sebaliknya kamu bisa menggunakan code CSS berikut.

Code CSS text-transform:

p { text-transform: capitalize; }
h4{ text-transform: uppercase; }
h5{ text-transform: lowercase; }

Hasil code CSS text-transform:

Hai, Saya senang berjumpa denganmu.

Hai, Saya senang berjumpa denganmu.

Hai, Saya senang berjumpa denganmu.

Semua text diatas aslinya adalah [Hai, Saya senang berjumpa denganmu]. Ada tiga modifikasi yang bisa kamu pakai yaitu capitalize, uppercase, lowercase.

White space

Untuk menghilangkan text wrapping maka kamu bisa menggunakan code white-space. Dengan white-space maka text akan ditampilkan terus memanjang kekanan sampai ada code <br/>.

Code CSS white space:

p { white-space: nowrap; overflow: auto;}

Hasil code CSS white space:

Text dari paragraph ini akan terus ditampilkan memanjang ke kanan sampai ada code line break. Kalau kamu ingin text ini tampil sebagai paragraph tentu
tidak enak dibacanya. Tapi mungkin kamu membutuhkannya untuk sesuatu yang lain.

Pada text diatas kita memberi code page break setelah kata […paragraph tentu] yang menyebabkan text dilanjutkan pada baris berikutnya.

Word spacing

Code word-spacing CSS bisa kamu gunakan untuk menentukan berapa nilai spasi antara setiap kata. Nilai atau value dari space ini harus dalam pixel.

Code CSS word-spacing:

p { word-spacing: 10px; }

Hasil code CSS word-spacing:

Paragraph ini memiliki code word-spacing dengan value 10px.

Letter spacing

Kalau dengan word-spacing kita bisa membuat jarak antar kata maka dengan letter-spacing kamu bisa membuat jarak antar huruf. Value dari letter-spacing harus kamu isi dalam pixel.

Code CSS letter-spacing:

p { letter-spacing: 3px; }

Hasil code CSS letter-spacing:

Ini adalah paragraph text dengan letter spacing 3 px.

Line height

Bila kita memperhatikan lebih detail sebuah text CSS maka kita akan menemukan bahwa text tersebut berada dalam sebuah kotak yang tidak berwarna kecuali kalau kotak tersebut kita beri background.

Yang memisahkan dan memberi jarak antara text tersebut dengan element disekitarnya adalah kotak tersebut. Dengan line height CSS maka kita bisa menentukan berapa tinggi kotak tersebut.

value description
size px – size dalam pixels
em – size relatif dari parent element font
in – size dalam inches
cm – size dalam centimeters
percentage tinggi dari line height ditentukan dari kelipatan persen ukuran font yang ada

Code CSS line-height:

p{ line-height: 400%; background: #7FFFD4; }
h5{ line-height: 12pt; font-size: 20pt; background: #7FFFD4;}
h6{ line-height: 15px; font-size: 20px;}

Hasil code CSS line-height:

Paragraph ini memiliki line height sebesar 400%. Paragraph ini memiliki line height sebesar 400%.

Paragraph ini memiliki line height sebesar 400%.

Header h5 ini memiliki ukuran font 20pt dan line-height 12pt.
Header h6 ini memiliki ukuran line-height 15px dan font size 20px. Header h6 ini memiliki ukuran line-height 15px dan font size 20px. Header h6 ini memiliki ukuran line-height 15px dan font size 20px.

Vertical align

Berdasarkan penjelasan dari line height diatas, sebuah text ataupun element akan muncul didalam kotak yang tidak terlihat. Posisi text di dalam kotak imajinasi tersebut bisa kita atur dengan code vertical-align.

value description
baseline menempatkan element sejajar dengan baseline text disekitarnya
sub menempatkan element seperti subscript
super menempatkan element seperti superscript
top menempatkan element pada bagian top element
text-top menempatkan element pada bagian top text disekitarnya
bottom menempatkan element pada bagian bottom element
text-bottom menempatkan element pada bagian bottom text disekitarnya
percentage menempatkan element berdasarkan persen dari text disekitarnya

Code CSS vertical align:

td {
height: 80px;
vertical-align: bottom;
}

p { font-size: 25px;}

i.TextBaseline {
font-size: 10px;
vertical-align: baseline;
background:#99FFCC;
}

i.TextSub {
font-size: 10px;
vertical-align: sub;
background:#99FFCC;
}

i.TextSuper {
font-size: 10px;
vertical-align: super;
background:#99FFCC;
}

i.TextTop {
font-size: 10px;
vertical-align: top;
background:#99FFCC;
}

i.TextTextTop {
font-size: 10px;
vertical-align: text-top;
background:#99FFCC;
}

i.TextBottom {
font-size: 10px;
vertical-align: bottom;
background:#99FFCC;
}

i.TextTextBottom {
font-size: 10px;
vertical-align: text-bottom;
background:#99FFCC;
}

i.TextPercentage {
font-size: 10px;
vertical-align: 20%;
background:#99FFCC;
}

Code HTML vertical align:

<table>
<tbody>
<tr>
<td>Bottom</td>
</tr>
</tbody>
</table>

<p>Paragraph ini memiliki <i class="TextBaseline">italic baseline</i> di tengahnya!</p>

<p>Paragraph ini memiliki <i class="TextSub">italic sub</i> di tengahnya!</p>

<p>Paragraph ini memiliki <i class="TextSuper">italic super</i> di tengahnya!</p>

<p>Paragraph ini memiliki <i class="TextTop">italic top</i> di tengahnya!</p>

<p>Paragraph ini memiliki <i class="TextTextTop">italic text-top</i> di tengahnya!</p>

<p>Paragraph ini memiliki <i class="TextBottom">italic bottom</i> di tengahnya!</p>

<p>Paragraph ini memiliki <i class="TextTextBottom">italic text-bottom</i> di tengahnya!</p>

<p>Paragraph ini memiliki <i class="TextPercentage">italic percentage</i> di tengahnya!</p>

Hasil code CSS vertical align:

Bottom

Paragraph ini memiliki italic baseline di tengahnya!

Paragraph ini memiliki italic sub di tengahnya!

Paragraph ini memiliki italic super di tengahnya!

Paragraph ini memiliki italic top di tengahnya!

Paragraph ini memiliki italic text-top di tengahnya!

Paragraph ini memiliki italic bottom di tengahnya!

Paragraph ini memiliki italic text-bottom di tengahnya!

Paragraph ini memiliki italic percentage di tengahnya!

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>