.jpeg)
Pemformatan teks dalam CSS juga salah satu hal yang penting karena dengan pemformatan teks dalam CSS, kita bisa membuat berbagai style untuk teks yang digunakan untuk website. Contohnya memberikan warna pada teks, mengubah ukuran teks, mengubah ketebalan teks, mengubah jarak antar teks dan sebagainya. Ada beberapa properti CSS yang digunakan untuk pemformatan teks dalam CSS. Contohnya seperti text-align , text-decoration , text-shadow , text-transform , dan text-spacing. Bagaimana cara nya ? Yukk kita pelajari bersama dibawah ini.
Text Align
Apa itu Text Align ? Jika kamu pernah menggunakan Microsoft Word, mungkin kamu mengetahui apa itu text-align. Fungsu dari text-align adalah untuk mengatur letak teks. Contohnya kamu bisa mengatur agar teks nya berada di sebelah kanan, tengah ataupun sebelah kiri. Berikut ini adalah beberapa jenis text-align yang dapat digunakan untuk pemformatan teks CSS.
- left untuk rata kiri
- center untuk rata tengah
- right untuk rata kanan
- justify untuk rata kiri dan rata kanan
<html>
<head>
<title> Pemformatan Teks dalam CSS </title>
<style>
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.justify {
text-align: justify;
}
</style>
</head>
<body>
<p class="left">Ini contoh teks yang menggunakan left</p>
<p class="center">Ini contoh teks yang menggunakan center</p>
<p class="right">Ini contoh teks yang menggunakan right</p>
<p class="justify">Ini contoh teks yang menggunakan justify</p>
</body>
</html>
Hasilnya seperti dibawah ini
Text Decoration merupakan properti yang digunakan untuk memberikan dekorasi garis pada sebuah teks. Contohnya adalah teks dengan garis bawah, garis atas, dan garis tengah (teks yang dicoret). Berikut ini adalah beberapa jenis properti yang digunakan dalam text decoration
- none Tidak menggunakan dekorasi apapun
- underline Dekorasi garis bawah
- overline Dekorasi garis atas
- line-through Dekorasi garis ditengah atau dicoret
<html>
<head>
<title> Pemformatan Teks dalam CSS </title>
<style>
.none {
text-decoration :none;
}
.under {
text-decoration: underline;
}
.over {
text-decoration: overline;
}
.line {
text-decoration: line-through;
}
</style>
</head>
<body>
<p class="none">Ini contoh teks yang tidak menggunakan dekorasi apapun</p>
<p class="under">Ini contoh teks yang menggunakan dekorasi garis bawah</p>
<p class="over">Ini contoh teks yang menggunakan dekorasi garis atas</p>
<p class="line">Ini contoh teks yang menggunakan dekorasi garis ditengah (dicoret)</p>
</body>
</html>
Selain itu, text-decoration juga bisa digunakan untuk hyperlink dalam html. Perhatikan contohnya dibawah ini.
<a href="https://freezegans.blogspot.com">Kunjungi Situs Kami</a>
Jika hyperlink yang terdapat pada website seperti diatas, maka website terlihat kurang menarik. Lalu apakah underline tersebut bisa dihilangkan ? Tentu saja bisa. Caranya adalah dengan menambahkan properti text-decoration:none;. Berikut ini adalah contoh kodingan nya
<a href="https://freezegans.blogspot.com" style="text-decoration:none;">Kunjungi Situs Kami</a>
Selain itu, kita juga memberikan dekorasi lainnya. Contohnya mengubah style garisnya dan mengubah warna garisnya. Contohnya seperti codingan dibawah ini
<html>
<head>
<title> Pemformatan Teks dalam CSS </title>
<style>
.none {
text-decoration :none;
}
.under {
text-decoration: underline dashed red;
}
.over {
text-decoration: overline wavy blue;
}
.line {
text-decoration: line-through yellow;
}
</style>
</head>
<body>
<p class="none">Ini contoh teks yang tidak menggunakan dekorasi apapun</p>
<p class="under">Ini contoh teks yang menggunakan dekorasi garis bawah</p>
<p class="over">Ini contoh teks yang menggunakan dekorasi garis atas</p>
<p class="line">Ini contoh teks yang menggunakan dekorasi garis ditengah (dicoret)</p>
</body>
</html>
Fungsi dari wavy adalah untuk membuat garis yang memiliki gelombang seperti diatas, fungsi dari dashed adalah untuk membuat garis putus putus dan untuk line-through tinggal kamu tambahkan warna yang akan digunakan.
Text Transform
Text Transform mrmiliki fungsi untuk mengubah bentuk teks, contohnya adalah dalam penggunaan huruf kapital dan non-kapital. Berikut ini adalah beberapa properti yang dapat digunakan dalam text-transform :
- lowercase untuk mengubah semua teks menjadi kecil
- none untuk tidak melakukan transform
- capitalize untuk mengubah huruf pertama menjadi kapital
- uppercase untuk mengubah semua teks menjadi huruf kapital
<html>
<head>
<title> Pemformatan Teks dalam CSS </title>
<style>
.low {
text-transform: lowercase;
}
.up {text-transform: uppercase;
}
.cap {
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="low">Ini adalah contoh teks yang menggunakan huruf kecil</p>
<p class="up">Ini adalah contoh teks yang menggunakan huruf besar</p>
<p class="cap">Ini adalah contoh teks yang menggunakan huruf kapital di awal</p>
</body>
</html>
Text Spacing
Text Spacing atau yang bisa kita sebut spasi yang merupakan sebuah jarak antarkata ataupun antarkalimat. Berikut ini beberapa properti yang dapat digunakan dalam text-spacing, diantaranya :
- text-indent Untuk mengatur indentitas
- letter-spacing Untuk mengatur jarak spasi antar huruf
- white-space Untuk mengatur white space pada teks
- line-height Untuk mengatur jarak antar baris
- word-spacing Untuk mengatur jarak antar teks
<html>
<head>
<title> Pemformatan Teks dalam CSS </title>
<style>
.word {
word-spacing: 5px;
}
.lineheight {
line-height: 15px;
}
.cap {
text-transform: capitalize;
}
.space {
letter-spacing: 4px;
}
.ind {
text-indent: 10px;
}
</style>
</head>
<body>
<p class="word">Ini adalah contoh teks yang menggunakan spasi antar kalimat</p>
<p class="lineheight">Ini adalah contoh teks yang menggunakan line height</p>
<p class="cap">Ini adalah contoh teks yang menggunakan huruf kapital di awal</p>
<p class="space">Ini adalah contoh teks yang menggunakan spasi antar kata</p>
<p class="ind">Ini adalah contoh teks yang menggunakan indent</p>
</body>
</html>
Text Shadow
Text shadow digunakan untuk memberikan bayangan pada teks. Text shadow bisa digunakan mulai dari CSS3. Berikut ini adalah jenis properti yang dapat digunakan dalam text shadow :
- x jarak bayangan berdasarkan x (vertikal)
- y jarak bayangan berdasarkan y (horizontal)
- blur untuk memberikan efek blur pada bayangan
- color untuk memberikan warna pada bayangan
<html>
<head>
<title> Pemformatan Teks dalam CSS </title>
<style>
.shadow {
color: blue;
text-shadow: 2px 2px 5px black;
}
</style>
</head>
<body>
<p class="shadow">Ini merupakan contoh dari penggunaan text-shadow</p>
</body>
</html>
Jika dilihat dari codingan diatas, kita lihat 2px. 2px merupakan jarak antara teks dengan bayangan, jadi x (vertikal) = 2px dan y (horizontal) = 2px. Kemudian 5px adalah tingkat blur bayangan dan black adalah warna bayangan nya.