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
leftuntuk rata kiricenteruntuk rata tengahrightuntuk rata kananjustifyuntuk 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>
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
noneTidak menggunakan dekorasi apapununderlineDekorasi garis bawahoverlineDekorasi garis atasline-throughDekorasi 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>
<a href="https://nusapixeldigital.my.id">Kunjungi Situs Kami</a>
<a href="https://nusapixeldigital.my.id/" style="text-decoration: none;">Kunjungi Situs Kami</a>
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
lowercaseuntuk mengubah semua teks menjadi kecilnoneuntuk tidak melakukan transformcapitalizeuntuk mengubah huruf pertama menjadi kapitaluppercaseuntuk 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 atau yang bisa kita sebut spasi yang merupakan sebuah jarak antarkata ataupun antarkalimat. Berikut ini beberapa properti yang dapat digunakan dalam text-spacing
text-indentUntuk mengatur indentitasletter-spacingUntuk mengatur jarak spasi antar hurufwhite-spaceUntuk mengatur white space pada teksline-heightUntuk mengatur jarak antar barisword-spacingUntuk 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 digunakan untuk memberikan bayangan pada teks. Text shadow bisa digunakan mulai dari CSS3. Berikut ini adalah jenis properti yang dapat digunakan dalam text shadow
xjarak bayangan berdasarkan x (vertikal)yjarak bayangan berdasarkan y (horizontal)bluruntuk memberikan efek blur pada bayangancoloruntuk 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>