Belajar CSS : Mengatur Format Text dengan CSS
Pada pembahasan mengenai mengatur format text dengan CSS ini akan dijelaskan tentang bagaimana penggunaan css dalam mengatur atau memodifikasi teks.
Terdapat beberapa property CSS yang bisa digunakan untuk memanipulasi dari format text, diantaranya adalah color, aligment, decoration, transformation, identation, letter-spacing, line-height, text-direction, word spacing dan text shadow.
Mengatur Format Text dengan CSS
Text Color
Property color digunakan untuk mengatur warna yang digunakan pada teks, beberapa satuan warna yang bisa digunakan untuk menentukan warnanya seperti :
- Dengan menuliskan nama warnanya langsung, seperti "blue", "red"
- Dengan menggunakan kode HEX, seperti "#ff0000"
- Dengan menggunakan kode RGB, seperti "rgb(255.0.0)
Contohnya bisa kalian lihat dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Font Color</title>
<style type="text/css">
p.contoh1{
color:red;
}
p.contoh2{
color:green;
}
</style>
</head>
<body>
<p class="contoh1">Ini adalah Paragraf Satu</p>
<p class="contoh2">Ini adalah Paragraf Dua</p>
</body>
</html>
Text Alignment
text-align digunakan untuk mengatur posisi dari teks yang akan ditampilkan di browser, ada 4 value yang bisa digunakan yaitu right, left, center dan justify. Untuk contoh penggunaannya bisa kalian perhatikan pada contoh berikut ini:
<!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>
Text Decoration
Property text-decoration digunakan untuk membuat sebuah dekorasi pada teks, misalnya kita ingin membuat teks tercoret atau membuat garis bawah pada teks, maka kita bisa membuatnya dengan menggunakan property text-decoration. Untuk penggunaanya, perhatikan contoh berikut ini :
<!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>
Text Transformation
Property text-transform digunakan untuk merubah besar kecilnya huruf, terdapat 3 nilai yang bisa digunakan yaitu uppercase, lowercase dan capitalize. Berikut contohnya :
<!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>
Text Indent
text-indent digunakan untuk membuat awalan dari paragraf agar menjorok ke dalam atau ke kanan, kita bisa menggunakan value ukuran dalam satuan px. Perhatikan contoh berikut :
<!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>
Letter Spacing
Property letter-spacing digunakan untuk mengatur jarak antar huruf, jadi bisa kalian atur setiap hurufnya lebih renggang atau lebih rapat, perhatikan contoh berikut :
<!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>
Line Height
Property line-height digunakan untuk mengatur jarak antara baris satu dan baris berikutnya pada sebuah paragraf, perhatikan contoh berikut ini:
<!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>
Text Direction
Property direction digunakan untuk direction sebuah teks, paragraf normalnya dituliskan dari kiri ke kanan, tapi dengan menggunakan property ini maka seperti tulisan arab ditampilkan dari kanan ke kiri, agar lebih jelas perhatikan contoh berikut ini :
<!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>
Word Spacing
Property word-spacing digunakan untuk mengatur jarak antar kata, perhatikan contoh berikut :
<!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>
Text Shadow
text-shadow digunakan untuk membuat efek bayangan pada teks, perhatikan contoh berikut ini:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 3px 2px red;
}
</style>
</head>
<body>
<h1>Text-shadow</h1>
</body>
</html>
