Belajar css seputar format text

belajar css

Text color

Pada CSS Anda bisa memberikan warna pada teks dengan property color.

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

Contoh:

Editor Online
  1. h1 {
  2. color: blue;
  3. }
  4. p {
  5. color: #ff0000;
  6. }

Text alignment

Text alignment digunakan untuk mengatur keselarasan teks secara horizontal. Untuk menggunakannya Anda cukup memanggil property: text-align.

Kemungkinan nilai untuk property ini adalah: leftrightcenterjustify dan inherit.

Contoh:

Editor Online
  1. #p1 {
  2. text-align: center;
  3. }
  4. #p2 {
  5. text-align: left;
  6. }
  7. #p3 {
  8. text-align: right;
  9. }

 Propertytext-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):

Contoh:

Editor Online
  1. div {
  2. text-align: juftify;
  3. }

Text decoration

Text decoration atau dekorasi digunakan untuk mengatur hiasan teks yang bergaris. Untuk menggunakannya Anda cukup memanggil property: text-decoration.

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

Contoh:

Editor Online
  1. #p1 {
  2. text-decoration: overline;
  3. }
  4. #p2 {
  5. text-decoration: line-through;
  6. }
  7. #p3 {
  8. text-decoration: underline;
  9. }

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

Contoh:

Editor Online
  1. #hide {
  2. text-decoration: none;
  3. }

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 property: text-transform.

Kemungkinan nilai untuk property ini adalah: nonecapitalizeuppercaselowercase dan inherit.

Contoh:

Editor Online
  1. #p1 {
  2. text-transform: uppercase;
  3. }
  4. #p2 {
  5. text-transform: lowercase;
  6. }
  7. #p3 {
  8. text-transform: capitalize;
  9. }

Text indentation

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

Contoh:

Editor Online
  1. p {
  2. text-indent: 60px;
  3. }

Letter spacing

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

Contoh:

Editor Online
  1. h1 {
  2. letter-spacing: 6px;
  3. }
  4. h2 {
  5. letter-spacing: -3px;
  6. }

Line height

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

Contoh:

Editor Online
  1. #p1 {
  2. line-height: 0.7;
  3. }
  4. #p2 {
  5. line-height: 2.0;
  6. }

Text direction

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

Contoh:

Editor Online
  1. #p2 {
  2. direction: rtl;
  3. }

Word spacing

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

Contoh:

Editor Online
  1. h1 {
  2. word-spacing: 15px;
  3. }
  4. h2 {
  5. word-spacing: -5px;
  6. }

Text shadow

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

Contoh:

Editor Online
  1. h1 {
  2. text-shadow: 4px 2px orange;
  3. }

Contoh diatas menentukan posisi bayangan:

horizontal 4px

vertikal 2px dan

warna orange atau oren.

Daftar property text

PropertyKegunaanya
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

Leave a Reply

Your email address will not be published. Required fields are marked *