ID (Indonesia) Translation

CSS - Teks

Halo sana, pengembang web masa depan! Hari ini, kita akan melihat dunia menakjubkan dari properti teks CSS. Seperti guru komputer yang ramah di lingkungan sekitar Anda, saya sangat senang untuk memandu Anda dalam perjalanan ini. Ingat, seperti belajar menunggang sepeda, menguasai CSS memerlukan latihan, tapi saya janjikan akan menyenangkan!

CSS Teks - Warna Teks

Ayo mulai dengan sesuatu yang berwarna! Dalam CSS, kita dapat mudah mengubah warna teks kita dengan menggunakan properti color. Itu seperti memiliki kuas magis untuk kata-kata Anda!

p {
color: biru;
}

Baris ini akan membuat semua teks paragraf Anda menjadi biru. Tetapi tunggu, masih ada lagi! Anda dapat menggunakan nama warna, kode HEX, atau nilai RGB:

h1 {
color: #FF5733; /* Kode HEX untuk warna oranye yang cerah */
}

span {
color: rgb(50, 205, 50); /* Nilai RGB untuk warna hijau muda */
}

CSS Teks - Penjajaran Teks

Berikutnya, mari bicarakan penjajaran teks. Itu seperti menata buku di rak - Anda dapat menempatkan mereka di sebelah kiri, kanan, atau di tengah.

.left-align {
text-align: left;
}

.right-align {
text-align: right;
}

.center-align {
text-align: center;
}

.justify-align {
text-align: justify;
}

Nilai justify sangat menarik. Itu menyebar teks secara merata di sepanjang baris, seperti bagaimana surat kabar menata kolom mereka.

CSS Teks - Penjajaran Vertikal

Penjajaran vertikal sedikit lebih sulit, tapi jangan khawatir! Properti ini biasanya digunakan dengan elemen inline atau table-cell.

img {
vertical-align: middle;
}

td {
vertical-align: top;
}

Properti ini dapat mengambil nilai seperti top, middle, bottom, sub, super, dan bahkan nilai panjang khusus!

CSS Teks - Arah

Dalam desa global kita, kita seringkali harus bekerja dengan bahasa yang dibaca dari kanan ke kiri. Itu di mana properti direction sangat berguna:

.arabic-text {
direction: rtl; /* Kanan ke Kiri */
}

.english-text {
direction: ltr; /* Kiri ke Kanan */
}

CSS Teks - Dekorasi Teks

Ingin menambahkan sedikit keindahan ke teks Anda? Dekorasi teks adalah teman Anda! Itu seperti menambahkan perhiasan ke kata-kata Anda.

.underline {
text-decoration: underline;
}

.overline {
text-decoration: overline;
}

.line-through {
text-decoration: line-through;
}

.no-decoration {
text-decoration: none;
}

Tips Profesional: Gunakan text-decoration: none; untuk menghapus garis bawah default dari tautan!

CSS Teks - Skip Dekorasi Teks

Properti ini menentukan bagian mana dari teks yang harus dilewatkan saat menerapkan dekorasi teks.

p {
text-decoration: underline;
text-decoration-skip: spaces;
}

Ini akan menggaris bawah teks tetapi melewati spasi, menciptakan penampilan yang lebih rapi.

CSS Teks - Skip Ink Dekorasi Teks

Ini adalah yang menyenangkan! Itu menentukan apakah dekorasi teks harus digambar di atas atau di bawah "tinta" (yaitu, teks itu sendiri).

p {
text-decoration: underline;
text-decoration-skip-ink: auto;
}

Dengan auto, browser akan secara cerdas melewati descender huruf seperti 'g' atau 'y'.

CSS Teks - Transformasi Teks

Ingin berteriak dalam SEMUA HURUF BESAR atau berbisik dalam huruf kecil? Transformasi teks adalah properti yang Anda butuhkan!

.uppercase {
text-transform: uppercase;
}

.lowercase {
text-transform: lowercase;
}

.capitalize {
text-transform: capitalize;
}

Nilai capitalize sangat menarik - itu mengubah huruf pertama dari setiap kata menjadi huruf besar.

CSS Teks - Penekanan Teks

Penekanan teks memungkinkan Anda menambahkan tanda penekanan ke teks Anda. Itu seperti menambahkan titik kecil atau lingkaran di atas atau di bawah teks Anda.

.emphasis {
text-emphasis: filled;
text-emphasis-position: over right;
}

Ini menambahkan lingkaran berisi di atas dan di sebelah kanan setiap karakter.

CSS Teks -Indentasi Teks

Ingat saat guru Anda meminta Anda untuk mengindentasi baris pertama setiap paragraf? CSS dapat melakukan itu secara otomatis!

p {
text-indent: 50px;
}

Ini akan mengindentasi baris pertama setiap paragraf dengan 50 pixel.

CSS Teks - Spasi Huruf

Spasi huruf memungkinkan Anda mengatur ruang antara karakter. Itu seperti memberikan ruang pribadi bagi huruf Anda!

h1 {
letter-spacing: 5px;
}

Ini menambahkan 5 pixel ruang antara setiap huruf di judul Anda.

CSS Teks - Spasi Kata

Mirip dengan spasi huruf, tapi untuk seluruh kata:

p {
word-spacing: 10px;
}

Ini menambahkan 10 pixel ruang ekstra antara setiap kata.

CSS Teks - Ruang Putih

Properti white-space menentukan bagaimana ruang putih di dalam elemen ditangani.

.nowrap {
white-space: nowrap;
}

.pre {
white-space: pre;
}

.pre-wrap {
white-space: pre-wrap;
}

nowrap menghindari teks dari memancing ke baris berikutnya, pre menyimpan ruang putih seperti yang ditulis di HTML, dan pre-wrap menyimpan ruang putih tetapi mengijinkan pemancing.

CSS Teks - Pencairan Ruang Putih

Properti ini sebenarnya adalah bagian dari properti white-space yang kita diskusikan sebelumnya. Itu menentukan bagaimana ruang putih dicairkan.

CSS Teks - Bayangan Teks

Ingin menambahkan sedikit kedalaman ke teks Anda? Bayangan teks ada untuk membantu!

h1 {
text-shadow: 2px 2px 5px merah;
}

Ini menambahkan bayangan merah 2 pixel ke kanan, 2 pixel ke bawah, dengan 5 pixel blur.

CSS Teks - Pemisahan Baris

Properti line-break menentukan bagaimana memutus baris dalam kata.

p {
line-break: strict;
}

Ini menegakkan aturan pemisahan baris yang ketat.

CSS Teks - Pemisahan Kata

Mirip dengan line-break, tapi untuk pemisahan kata di akhir baris:

p {
word-break: break-all;
}

Ini mengijinkan kata untuk diputus di setiap karakter.

CSS Teks - Properti Terkait

Berikut adalah tabel rujukan cepat dari semua properti yang kita diskusikan:

Properti	Deskripsi
color	Mengatur warna teks
text-align	Menentukan penjajaran horizontal teks
vertical-align	Mengatur penjajaran vertikal dari kotak inline atau table-cell
direction	Menentukan arah teks/tulisan
text-decoration	Menentukan dekorasi yang ditambahkan ke teks
text-decoration-skip	Menentukan bagian mana dari elemen yang harus dilewatkan saat menerapkan dekorasi teks
text-decoration-skip-ink	Menentukan bagaimana overlines dan underlines digambar saat mereka melewati ascender dan descender glyph
text-transform	Mengendalikan kapitalisasi teks
text-emphasis	Menambahkan tanda penekanan ke teks
text-indent	Mengatur inden baris pertama dalam blok teks
letter-spacing	Menambahkan atau mengurangi ruang antara karakter
word-spacing	Menambahkan atau mengurangi ruang antara kata
white-space	Menentukan bagaimana ruang putih di dalam elemen ditangani
text-shadow	Menambahkan bayangan ke teks
line-break	Menentukan bagaimana memutus baris
word-break	Menentukan aturan pemisahan kata

Dan itu adalah! Anda sekarang dilengkapi dengan pengetahuan untuk menggaya teks Anda dalam banyak cara. Ingat, kunci untuk menguasai CSS adalah latihan. Jadi, pergilah, eksperimen, dan buat halaman web yang indah dan mudah dibaca. Selamat coding!

Credits: Image by storyset