10 Properti Penataan Teks di CSS
Table of content:
Cascading Style Sheets (CSS) menjelaskan bagaimana HTML menampilkan elemen di layar. CSS dapat mengontrol tata letak beberapa halaman web dengan beberapa baris kode.
CSS memiliki properti pemformatan yang memengaruhi spasi, tampilan, dan perataan teks. Berikut adalah beberapa properti yang dapat Anda gunakan untuk mengatur gaya teks pada halaman aplikasi Anda.
1. Warna Teks
Itu warna properti menentukan warna latar depan utama teks Anda. Anda dapat menggunakan nama warna yang telah ditentukan seperti merah, putihatau hijau. Anda juga dapat menggunakan nilai hex atau unit lain seperti RGB, HSL, dan RGBA.
Baca Juga:
Framework CSS seperti Tailwind CSS memiliki fitur warna bawaan yang menampilkan beragam corak. Ini memudahkan Anda untuk memilih warna yang Anda sukai. Mari ubah warna judul berikut menggunakan beberapa properti ini:
<body>
<h1>Change My Color</h1> <h2>Change My Color</h2>
<h3>Change My Color</h3>
<h4>Change My Color</h4>
</body>
CSS akan terlihat seperti ini:
h1 {
color: orange;
}h2 {
color: #ff6600;
}
h3 {
color: rgb(255, 102, 0);
}
h4 {
color: hsl(24, 100%, 50%);
}
Dan teks yang diberi gaya akan muncul seperti ini:
2. Warna Latar Belakang
Anda dapat menggunakan warna latar belakang properti untuk menciptakan latar belakang yang menarik. Gunakan untuk mengatur latar belakang yang berbeda untuk judul berikut:
<body>
<h1>Change My Background Color</h1> <h2>Change My Background Color</h2>
<h3>Change My Background Color</h3>
<h4>Change My Background Color</h4>
</body>
Dengan CSS berikut:
h1 {
background-color: orange;
}h2 {
background-color: #009900;
}
h3 {
background-color: rgb(204, 0, 0);
}
h4 {
background-color: hsl(60, 100%, 50%);
}
Saat browser Anda merender halaman ini, tampilannya akan seperti ini:
3. Perataan Teks
Itu perataan teks properti mengatur perataan horizontal teks. Nilai ini bisa kiri, Kanan, tengahatau membenarkan.
Nilai pembenaran meregangkan setiap baris teks, sehingga semuanya memiliki lebar yang sama di margin kanan dan kiri. Gunakan kode contoh berikut untuk menjelajahi keempat nilai ini:
<body>
<h1>Align Me Left</h1> <h2> Align Me Right</h2>
<h3>Align Me center</h3>
<p class="ex4"><strong>Align me justified</strong>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
<p><strong>No alignment </strong>:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</p>
</body>
Gunakan CSS berikut untuk menerapkan perataan yang berbeda:
h1 {
text-align: left;
}h2 {
text-align: right;
}
h3 {
text-align: center;
}
.ex4{
text-align: justify;
}
Di browser akan muncul seperti ini:
4. Arah Teks
Itu teks-arah properti mendefinisikan arah teks. Tentukan arah menggunakan properti rtl (kanan ke kiri) atau ltr (kiri ke kanan). Keduanya menentukan ke arah mana Anda ingin teks mengalir.
Misalnya, gunakan rtl ketika bekerja dengan bahasa yang ditulis dari kanan ke kiri seperti bahasa Ibrani atau Arab. Kau gunakan ltr untuk bahasa yang ditulis dari kiri ke kanan seperti bahasa Inggris.
Mari kita ilustrasikan ini dengan kode di bawah ini:
<body>
<div>
<p class='ex1'>This paragraph goes from right to left. The cursor
moves from right to left when you type more information on the
page.</p> <p id="ex2">This paragraph goes from left to right. The cursor moves
from left to write when you type more information on the page!</p>
</div>
</body>
Dengan CSS yang menyertai ini:
.ex1 {
direction: rtl;
}#ex2 {
direction: ltr;
}
Hasil akhirnya akan terlihat seperti ini:
5. Teks Dekorasi
Itu dekorasi teks properti mengatur tampilan garis dekoratif pada teks. Ini singkatan dari teks-dekorasi-garis, teks-dekorasi-warna, teks-dekorasi-gayaDan ketebalan dekorasi teks Properti. Jika Anda tidak ingin memiliki properti pada elemen yang memiliki tautan, gunakan dekorasi teks: tidak ada;
Anda harus menghindari menggarisbawahi teks normal karena gaya tersebut biasanya menunjukkan tautan. Ilustrasi berikut menunjukkan beberapa contoh dalam kode:
<body>
<h1>Overline text decoration</h1> <h2>Line-through text decoration</h2>
<h3>Underline text decoration</h3>
<p class="ex">Overline and underline text decoration.</p>
<p><a href="default.asp">This is a link</a></p>
</body>
Anda dapat menerapkan berbagai efek dekorasi dengan CSS ini:
h1 {
text-decoration: overline;
}h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
p.ex {
text-decoration: overline underline;
}
a {
text-decoration: none;
}
Dan mereka akan menampilkan sesuatu seperti ini:
6. Transformasi Teks
Itu transformasi teks properti menentukan jenis huruf yang muncul. Ini bisa dalam huruf besar atau kecil. Anda juga dapat menggunakannya untuk mengkapitalisasi huruf pertama dari setiap kata:
Contoh berikut menunjukkan cara melakukannya dalam kode:
<body>
<h1>Examples of text-transform property</h1> <p class="uppercase">This sentence is in uppercase.</p>
<p class="lowercase">This sentence is in lower case.</p>
<p class="capitalize">Capitalize this text.</p>
</body>
File CSSnya:
p.uppercase {
text-transform: uppercase;
}p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Dengan hasil sebagai berikut:
7. Spasi Huruf
Itu spasi huruf properti menentukan ruang antara huruf dalam teks. Contoh berikut mengilustrasikan cara menentukan gaya penspasian yang berbeda.
<body>
<h1>Examples of Letter-spacing</h1> <h2>This is heading 1</h2>
<h3>This is heading 2</h3>
</body>
Gunakan piksel, atau satuan ukuran lainnya, dalam file CSS Anda:
h2 {
letter-spacing: 7px;
}h3 {
letter-spacing: -2px;
}
Dan teks yang dihasilkan akan diregangkan atau diperas:
8. Spasi Kata
Itu spasi kata properti menentukan ruang antara kata-kata dalam teks. Browser memiliki panjang standar untuk ruang antar kata, tetapi Anda dapat mengaturnya sendiri. Contoh berikut mengilustrasikan cara menambah atau mengurangi spasi di antara kata-kata:
<body>
<h1>Examples of the Word-spacing Property</h1> <p>Normal word spacing.</p>
<p class="ex1">Large word spacing.</p>
<p class="ex2">Small word spacing.</p>
</body>
Menggunakan CSS ini:
p.ex1 {
word-spacing: 1rem;
}p.ex2 {
word-spacing: -0.3rem;
}
Anda dapat dengan jelas melihat efek spasi kata:
9. Garis Tinggi
9. Garis TinggiItu tinggi garis properti menentukan jarak antar baris dalam paragraf. Tinggi baris standar dan default di sebagian besar browser adalah sekitar 110% hingga 120%. Kode berikut mengilustrasikan cara mengubahnya:
<body>
<h1>Using line-height</h1> <p>
Standard line-height.
Standard line-height.
</p>
<p class="small">
Small small line-height.
Small line-height
</p>
<p class="big">
Bigger line-height.
Bigger line-height.
</p>
</body>
Menggunakan CSS berikut:
p.small {
line-height: 0.7;
}p.big {
line-height: 1.8;
}
Anda dapat melihat hasil antara setiap baris di setiap paragraf:
10. Bayangan Teks
10. Bayangan TeksItu bayangan teks properti menerapkan bayangan ke teks. Anda harus menentukan bayangan horizontal dan bayangan vertikal. Text-shadow dapat menyertakan radius warna dan blur. Mari kita ilustrasikan dengan kode berikut:
<body>
<h1>Examples of Text-shadow effect.</h1> <h1 class="ex1">Text-shadow with color</h1>
<h1 class="ex2">Text-shadow with blur effect.</h1>
</body>
Dengan CSS ini:
h1 {
text-shadow: 2px 2px;
}.ex1 {
text-shadow: 2px 2px orange;
}
.ex2 {
text-shadow: 2px 2px 10px red;
}
Akan menghasilkan beberapa efek yang tidak biasa dan menarik:
Mengapa Mempelajari Properti Penataan Teks CSS?
CSS adalah tulang punggung desain web modern. Baik dalam bentuk vanilla atau dalam kerangka kerja, fungsi dasar properti CSS adalah sama. Menguasai properti pemformatan teks memungkinkan Anda membuat antarmuka pengguna yang menarik dan mudah dibaca.
Versi terbaru CSS, CSS3, memperkenalkan konsep baru dari animasi hingga tata letak banyak kolom. Konsep-konsep ini mempermudah pembuatan aplikasi dan dokumen profesional.
Artikel Terkait
