Mengatur format text dengan CSS

Didalam CSS Anda bisa mengatur atau menentukan style untuk teks. Pada CSS banyak sekali properti untu

Memformat Teks dengan CSS

CSS menyediakan beberapa properti yang memungkinkan Anda untuk menentukan berbagai gaya teks seperti color, alignment, spacing, decoration, transformation dll.

Sifat-sifat teks yang umum digunakan adalah: properti text-aligntext-decorationtext-transformtext-indentline-heightletter-spacingword-spacing dan banyak lagi. Properti ini memberi Anda kontrol yang tepat atas tampilan visual karakter , kata , spasi , dan sebagainya.

Text color

Dengan properti color Anda bisa menggunakannya untuk memberikan warna pada teks.

Nilai color dapat diatur oleh:

  • nama – tentukan nilai color nama, seperti red
  • Hex – tentukan nilai color hex, seperti #ff0000
  • RGB – tentukan nilai color RGB, seperti rgb (255,0,0)
  • transparan
  • dll
h1 {
    color: blue;
}
p {
    color: #ff0000;
}

Text alignment

Dengan properti text-align Anda bisa menggunakannya untuk mengatur keselarasan teks secara horizontal.

Kemungkinan nilai untuk properti ini adalah: leftrightcenterjustify dan inherit.

#p1 {
    text-align: center;
}
#p2 {
    text-align: left;
}
#p3 {
    text-align: right;
}

 Properti text-align dengan nilai “justify” memberikan style untuk setiap baris meregang sehingga setiap baris memiliki lebar yang sama, kiri dan kanan margin lurus (seperti di majalah dan koran):

div {
    text-align: juftify;
}

Text decoration

Dengan properti text-decoration Anda bisa menggunakannya untuk mengatur hiasan teks yang bergaris.

Kemungkinan nilai untuk properti ini adalah: noneunderlineoverlineline-throughblink dan inherit.

#p1 {
    text-decoration: overline;
}
#p2 {
    text-decoration: line-through;
}
#p3 {
    text-decoration: underline;
}

Anda juga bisa menggunakan properti text-decoration untuk menghilangkan garis bawah pada link.

#hide {
    text-decoration: none;
}

Text transformation

Text transformation digunakan untuk menentukan huruf besar dan huruf kecil dalam teks, atau memberikan huruf besar bagian pertama dari setiap kata. Untuk menggunakannya Anda cukup memanggil properti: text-transform.

Kemungkinan nilai untuk properti ini adalah: nonecapitalizeuppercaselowercase dan inherit.

#p1 {
    text-transform: uppercase;
}
#p2 {
    text-transform: lowercase;
}
#p3 {
    text-transform: capitalize;
}

Text indentation

Text-indentation digunakan untuk menentukan indentasi baris pertama atau lebih tepatnya memberikan lekukan pada teks pertama. Untuk menggunakannya Anda cukup memanggil properti: text-indent.

p {
    text-indent: 60px;
}

Letter spacing

Letter spacing digunakan untuk menentukan ruang antara karakter dalam teks. Untuk menggunakannya Anda cukup memanggil properti: letter-spacing. Anda bisa menggunakan nilai negatif.

h1 {
    letter-spacing: 6px;
}
h2 {
    letter-spacing: -3px;
}

Line height

Line height digunakan untuk menentukan ruang antara garis. Untuk menggunakannya Anda cukup memanggil properti: line-height.

#p1 {
    line-height: 0.7;
}
#p2 {
    line-height: 2.0;
}

Text direction

Text direction digunakan untuk mengubah arah teks. Untuk menggunakannya Anda cukup memanggil properti: direction.

#p2 {
    direction: rtl;
}

Word spacing

Word spacing digunakan untuk menentukan lebar dari sepasi dalam sebuah teks. Untuk menggunakannya Anda cukup memanggil properti: word-spacing. Nilai negatif dibolehkan.

h1 {
    word-spacing: 15px;
}
h2 {
    word-spacing: -5px;
}

Text shadow

Text-shadow digunakan untuk menambahkan bayangan untuk teks. Cara menggunakannya Anda cukup memanggil properti: text-shadow. Nilai negatif dibolehkan.

h1 {
    text-shadow: 4px 2px orange;
}

Contoh diatas menentukan posisi bayangan:

horizontal 4px

vertikal 2px dan

warna orange atau oren.

Daftar properti text

PropertiKegunaanya
colorMengatur warna teks
directionMenentukan arah teks atau arah penulisan
letter-spacingMenambah atau mengurangi sepasi antar karakter dalam sebuah teks
line-heightMengatur tinggi garis
text-alignMenentukan keselarasan teks secara horizontal
text-decorationMenentukan dekorasi yang ditambahkan ke teks
text-indentMenentukan indentasi dari baris pertama dalam blok teks
text-shadowMenentukan efek bayangan yang ditambahkan ke teks
text-transformMengontrol kapitalisasi teks
word-spacingMenambah atau mengurangi jarak antar kata dalam sebuah teks