Pada bagian kali ini kita akan belajar bagai mana cara untuk mengatur teks dengan properti CSS.
Adapun propertinya yaitu text-decoration, text-transform, text-shadow, text-align, line-height, white-space, word-wrap, dan text-overflow.
1. text-decoration
Properti text-decoration bermanfaat untuk mendekorasi teks. nilai yang bisa diberikan adalah sebagai berikut:
- none : menghilangkan pengaruh aturan-aturan text-decoration yang diwariskan dari induknya biasa terdapat pada link.
- underline : membuat teks digarisbawahi.
- overline: membuat teks diberi garis pada bagian atas.
- line-through : membuat teks dicoret.
<!DOCTYPE html>
<html>
<head>
<title>text-decoration</title>
<style>
.teks1{
text-decoration: underline;
}
.teks2{
text-decoration: overline;
}
.teks3{
text-decoration: line-through;
}
</style>
</head>
<body>
<h2>Properti text-decoration</h2><br>
<h3 class="teks1">teks di garis bawah</h3>
<h3 class="teks2">teks di garis atas</h3>
<h3 class="teks3">teks dicoret</h3>
</body>
</html>
Berikut hasilnya:
CSS3 menambahkan beberapa properti yang terkait dengan dekorasi teks. dua properti yang mungkin berguna adalah text-decoration-color dan text-decoration-style.
- text-decoration-color: properti ini digunakan untuk menentukan warna garis yang digunakan untuk mendekorasi teks.
- text-decoration-style : properti ini berguna untuk mengatur bentuk garis yang digunakan untuk mendekorasi teks. Isinya bisa berupa: solida, double, dotted, dashed, wavy
<!DOCTYPE html>
<html>
<head>
<title>text-decoration</title>
<style>
.teks1{
text-decoration: underline;
text-decoration-color: red;
}
.teks2{
text-decoration: overline;
text-decoration-style: dashed;
}
</style>
</head>
<body>
<h2>Properti text-decoration</h2><br>
<h3 class="teks1">teks di garis bawah merah</h3>
<h3 class="teks2">teks di garis atas dashed</h3>
</body>
</html>
Berikut hasilnya:
2. text-transform
Properti text-transform berguna untuk mengkonversi semua huruf ke kapital, kehuruf kecil, kehuruf kecil tetapi semua huruf pertama setiap kata dikapitalkan. isinya bisa berupa capitalize, lowercase, uppercase, atau none.
- capitalize : membuat hanya huruf pertama setiap kata dikapitalkan, sedangkan yang laink ke huruf kecil.
- lowercase : membuat semua huruf di konversi ke huruf kecil.
- uppercase : membuat semua huruf di konversi ke huruf kapital.
- none : menormalkan
Berikut contohnya:
<!DOCTYPE html>
<html>
<head>
<title>text-transform</title>
<style>
.teks1{
text-transform: lowercase;
}
.teks2{
text-transform: uppercase;
}
.teks3{
text-transform: capitalize;
}
</style>
</head>
<body>
<h2>Properti text-transform</h2><br>
<p class="teks1">teks ini dikonversi kecil</p>
<p class="teks2">teks ini dikonversi kapital</p>
<p class="teks3">teks ini dikonversi capitalize</p>
</body>
</html>
Berikut hasilnya:
3. text-shadow
Properti text-shadow berguna untuk membuat bayangan. Properti ini melibatkan hingga empat nilai.
- nilai pertama menentukan offset horizontal bayangan. nilai positif berarti kearah kanan dan nilai negatif berarti kearah kiri.
- nilai kedua menentukan offset vertikal bayangan. nilai positif berarti kearah bawah dan nilai negatif berarti kearah atas.
- nilai ketiga bersifat opsional, digunakan untuk menentukan radius pengaburan bayangan.
- nilai keempat bersifat opsional, digunakan untuk menentukan warna. Jika tidak disebutkan, warna yang digunakan samadengan warna teks.
<!DOCTYPE html>
<html>
<head>
<title>text-shadow</title>
<style>
h2{
font-size: 1.5em;
}
.teks1{
text-shadow: 4px 4px 2px grey;
}
.teks2{
text-shadow: 5px 7px 10px blue;
}
.teks3{
text-shadow: -4px -4px 2px red;
}
</style>
</head>
<body>
<h2>Properti text-shadow</h2>
<h2 class="teks1">teks bayangan 1</h2>
<h2 class="teks2">teks bayangan 2</h2>
<h2 class="teks3">teks bayangan 3</h2>
</body>
</html>
Berikut hasilnya:
4. text-align
Pengaturan teks secara harizontal bisa dilakukan dengan menggunakan properti text-align. nilai nilai yang bisa diberikan di properti ini:
- center : teks diletakan ditengah terhadap batas kiri dan batas kanan teks.
- left : teks diatur rata kiri terhadap batas kiri teks.
- right : teks diatur rata kanan terhadap batas kanan teks.
- justify : teks diatur rata kiri dan rata kanan terhadap batas kiri dan kanan teks.
<!DOCTYPE html>
<html>
<head>
<title>text-align</title>
<style>
.teks1{
text-align: left;
}
.teks2{
text-align: right;
}
.teks3{
text-align: center;
}
.teks4{
text-align: justify;
}
</style>
</head>
<body>
<h2>Properti text-align</h2>
<p class="teks1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<hr>
<p class="teks2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<hr>
<p class="teks3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<hr>
<p class="teks4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</body>
</html>
Berikut hasilnya:
<!DOCTYPE html>
<html>
<head>
<title>text-align-last</title>
<style>
.teks1{
text-align-last: center;
}
</style>
</head>
<body>
<h2>Properti text-align-last</h2>
<p class="teks1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
Berikut hasilnya:
5. vertical-align
Properti vertical-align digunakan untuk mengatur perataan teks pada arah vertikal.
- baseline : Penempatan teks dilakukan sesuai dengan dasar teks elemen orang tuanya. Nilai ini merupakan nilai bawaan vertical-align.
- middle : Teks diletakan ditengah terhadap dasar teks elemen orang tuanya.
- sub : Teks diletakan lebih rendah terhadap dasar elemen orang tuanya. Nilai ini berguna untuk membuat tulisan bersubskrip.
- super : Teks diletakan lebih tinggi terhadap dasar elemen orang tuanya.
- text-top : Bagian atas teks diletakan sejajar dengan bagian atas teks orang tuanya.
- text-bottom : Bagian bawah teks diletakan sejajar dengan bagian bawah teks orang tuanya.
- top : Bagian atas teks diletakan sejajar dengan elemen tertinggi di baris.
- bottom : Bagian bawah teks diletakan sejajar dengan elemen terendah di baris.
<!DOCTYPE html>
<html>
<head>
<title>vertical-align</title>
<style>
.pangkat{
vertical-align: super;
}
.subskrip{
vertical-align: sub;
}
.top{
vertical-align: top;
font-size: 10px;
}
.bottom{
vertical-align: bottom;
font-size: 10px;
}
.middle{
vertical-align: middle;
font-size: 10px;
}
</style>
</head>
<body>
<h2>properti vertical-align</h2>
<p>Persamaan 25<span class="pangkat">1/2</span> = 5</p>
<p>Rumus kimia air adalah H<span class="subskrip">2</span>0 </p>
<p>Lihat posisi teks berikut: <span class="top">xxxx/top</span></p>
<p>Lihat posisi teks berikut: <span class="bottom">xxxx/bottom</span></p>
<p>Lihat posisi teks berikut: <span class="middle">xxxx/middle</span></p>
</body>
</html>
Berikut hasilnya:
6. line-height
Properti line-height berguna untuk mengatu
