Belajar CSS #6 Mengatur Format Text Dengan CSS

Pada artikel kali ini akan membahas mengenai cara mengatur format text atau styling teks dengan CSS, Teks adalah elemen yang paling sering digunakan pada halaman web HTML. Ada beberapa properti CSS untuk styling teks yang akan dibahas, diantaranya :

text-align
text-decoration
text-transform
text-spacing
text-shadow

Mari kita bahas satu persatu …

DAFTAR ISI

Format Text Align CSS

text align adalah sebuah properti CSS yang digunakan dengan format untuk meratakan teks. Properti ini mempunyai nilai yang valid, diantaranya :

left untuk rata kiri;
right untuk rata kanan;
center untuk rata tengah;
jusitfy untuk rata kiri dan kanan;
start rata pada awal (mengikuti direction);
end rata pada akhir (mengikuti direction);

Cara Penulisan :

header {
  text-align: center;
}

p {
  text-align: justify; 
}

Contoh :

Buatlah file baru dengan nama text.html, kemudian salin dengan kode berikut:

<html>
  <head>
    <title>Contoh Text Align di CSS</title>
    <meta content="">
    <style>
      header {
        text-align: center;
      }

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

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

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

      .text-justify {
        text-align: justify;
      }
    </style>
  </head>
  <body>

    <header>
      <h1>Text Align di CSS</h1>
    </header>

    <article>
      <p class="text-justify">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
      </p>
      <p class="text-left">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
      </p>
      <p class="text-center">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
      </p>
      <p class="text-right">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
      </p>
    </article>
  </body>
</html>

Lalu buka file text.html dengan web browser.

Maka hasilnya:

Format Text Direction CSS

Text direction adalah sebuah properti pada CSS yang digunakan dengan format untuk menentukan arah baca teks. Sebuah text pada umumnya dibaca dari kiri ke kanan (ltr), namun ada beberapa text yang dibaca sebaliknya yaitu kanan ke kiri (rtl). Misalnya teks bahasa arab.

Contoh :

Buatlah file baru dengan nama direction.html, kemudian salin dengan kode berikut:

<html>
  <head>
    <title>Contoh Text Direction and Align</title>
    <meta content="">
    <style>
      header {
        text-align: center;
      }
      body {
          direction: rtl;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Text Direction CSS</h1>
    </header>
    <article>
      <p>
        ِبِسْمِ اللَّهِ الرَّحْمَنِ الرَّحِيْم
      </p>
    </article>
  </body>
</html>

Buka file direction.html dengan browser.

Maka hasilnya:

Format Text Transform CSS

Properti text transform pada CSS digunakan dengan format untuk mengubah bentuk teks. Misalnya dari huruf kecil menjadi huruf besar.

Berikut ini nilai-nilai yang valid untuk text-transform.

lowercase untuk mengubah semua teks menjadi huruf kecil;
uppercase untuk mengubah semua teks menjadi huruf kapital (besar);
capitalize untuk mengubah teks pada huruf pertama kata menjadi kapital.
none untuk tidak melakukan transform.

Contoh :

Buatlah file HTML baru dengan nama transform.html kemudian salin dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Transform</title>
    <style>
        h1 {
            text-transform: capitalize;
        }
        
        .upper {
            text-transform: uppercase;
        }

        .lower {
            text-transform: lowercase;
        }
    </style>
</head>
<body>
    <h1>teks transform di CSS</h1>
    <p>
        <span class="upper">text ini ditulis dengan huruf kecil, 
          TAPI hasilnya AKAN MENJADI kapital (besar).</span> <br>
        <br>
        <span class="lower">TEKS INI DITULIS DENGAN HURUF KAPITAL (BESAR), 
          TAPI hasilnya AKAN MENJADI KECIL.</span>
    </p>
</body>
</html>

Hasilnya :

Keterangan :

Meskipun di HTML kita menulis elemen <h1> dengan huruf kecil, namun hasilnya akan ditransformasi menjadi huruf besar di setiap awal kata. Hal ini karena kita memberikan text-transform: capitalize.

Pada baris pertama ditampilkan dengan huruf besar, karena kita memberikan nilai ”uppercase”, begitu juga sebaliknya, pada baris kedua diberikan nilai ”lowercase”, sehingga tulisannya menjadi huruf kecil.

Format Text Spacing CSS

Text Spacing merupakan sebuah properti CSS yang di format untuk mengatur jarak antar huruf. Value yang digunakan untuk mengatur jaraknya adalah dengan satuan pixel.

CSS menyediakan beberapa properti untuk mengatur spacing pada text diantaranya

text-indent untuk mengatur indentasi;
letter-spacing untuk mengatur jarak spasi antar huruf;
line-height untuk mengatur jarak antar baris;
word-spacing untuk mengatur jarak antar kata;
white-space untuk mengatur white space pada teks.

Contoh :

Buatlah file HTML baru dengan nama text-spacing.html, kemudian salin dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Spacing</title>
    <style>
        h1 {
            letter-spacing: -2px;
            word-spacing: 4px;
        }

        .small {
            font-size: 8px;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .line-height {
            line-height: 1.6;
        }

        .indent {
            text-indent: 1em;
        }

        .nowrap {
            white-space: break-spaces;
        }
    </style>
</head>
<body>
    <h1>Contoh Text Spacing</h1>
    <p class="small">Ini merupakan contoh teks dengan ukuran kecil</p>

    <p class="indent">
        Ini adalah contoh paragraf dengan teks indent, yang mana baris pertama 
        diberi jarak 1em. Ini adalah contoh paragraf dengan teks indent, yang mana baris pertama 
        diberi jarak 1em.
    </p>
    <p class="line-height">
        Ini adalah contoh paragraf line height dengan ukuran 1.6. Ini adalah contoh paragraf 
        line height dengan ukuran 1.6. Ini adalah contoh paragraf line height dengan 
        ukuran 1.6.
    </p>
    <p class="nowrap">
        Ini contoh paragraf dengan white-space.
        Paragraf ini akan mengikuti seperti yang 
        ditulis di dalam 
        HTML.
    </p>
</body>
</html>

Hasilnya :

Keterangan :

Judul, kita memberikan letter-spacing: -2px dan word-spacing: 4px pada elemen <h1>. Ini akan membuat hurufnya merapat dan jarak antar katanya 4px

Baris pertama, kita memberikan font size dengan ukuran 8 px dan letter spacing 2px. Ukuran huruf yang kecil akan lebih mudah dibaca jika dikasih ”uppercase”.

text-indent, properti yang akan membuat teks masuk ke dalam pada baris pertama paragraf.

line-height, digunakan untuk mengatur jarak antar baris. Secara default, nilai line-height adalah 1.

Format Text Decoration

Properti yang digunakan untuk memberikan dekorasi garis pada teks. Misalnya garis bawah, garis atas, dan garis di tengah (teks tercoret).

Properti ini mempunyai beberapa nilai, yakni :

none artinya tidak menggunakan dekorasi apapun;
underline artinya kita akan memberikan dekorasi garis bawah;
overline dekorasi dengan garis di atas teks;
line-through dekorasi garis di tengah atau teks tercoret.

Contoh :

Buatlah file HTML baru dengan nama decoration.html, kemudian salin kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Text Decoration pada CSS</title>
    <style>
        h1 {
            text-decoration: underline;
        }

        p {
            line-height: 1.8;
        }

        .upperline {
            text-decoration: overline dashed green;
        }

        .underline {
            text-decoration: underline wavy blue;
        }

        .strike {
            text-decoration: line-through red;
        }
    </style>
</head>
<body>
    <h1>Text Decoration CSS</h1>
    <p>
        <span class="underline">Ini merupakan Teks dekorasi garis bawah</span>.<br>
        Ini merupakan teks normal tanpa dekorasi, <br>
        Ini merupakan teks <span class="strike">yang dicoret</span>. <br>
        <span class="upperline">Ini merupakan teks dengan dekorasi garis di atas.</span>
    </p>
</body>
</html>

Hasilnya :

Penjelasan :

<span> elemen yang digunakan dengan class text-decoration yang sudah dibuat di CSS.
text-decoration, Properti yang digunakan untuk membuat text dekorasi
Pada baris pertama terdapat garis bawah text warna biru karena kita menambahkan property text-decoration:overline dashed;
Untuk menjadikan garis bawah tersebut menjadi warna biru, kita hanya menambahkan nilai pada propertinya.
Konsep ini juga sama untuk baris dua dan selanjutnya

Text Overflow

Properti text-overflow berfungsi untuk mengatur memangkas panjang teks yang melebihi ukuran dari elemen. Misalnya, kita memiliki elemen dengan ukuran 100px, lalu kita isi dengan teks yang panjangnya lebih dari 100px. Maka panjang textnya akan dipangkas tidak lebih dari 100px

Text-overflow ini punya 3 jenis yang mana masing-masingnya memiliki fungsi yang berbeda-beda, yaitu :

clip, menghasilkan text terpotong oleh border
ellipsis, text terpotong oleh border namun pada text belakang ada output titik-titik
Next, text terpotong oleh border namun dibelakangnya ada output titik-titik dan ada text Next.

Contoh :

Buatlah file HTML baru dengan nama overflow.html, kemudian salin kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Overflow</title>
    <style>
        p {
            width: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <p>
        Ini adalah contoh Text Overflow ...
    </p>
</body>
</html>

Hasilnya:

Text Shadow

Properti text-shadow merupakan properti untuk memberikan efek bayangan pada teks yang ditampilkan pada HTML.

Format nilai untuk text-shadow adalah sebagai berikut:

x, jarak bayangan berdasarkan sumbu x (vertikal);
y, jarak bayangan bedasarkan sumbu y (horizontal);
blur, ukuran kepudaran dari bayangan;
warna, warna bayangan,

Contoh :

Buatlah file HTML baru dengan nama shadow.html, kemudian salin dengan kode berikut:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Shadow</title>
    <style>
        h1 {
            color: red;
            text-shadow: 1px 2px 2px rgba(188, 208, 12, 0.8);
        }
    </style>
</head>
<body>
    <h1>Ini adalah contoh Text Shadow</h1>
</body>
</html>

Hasilnya :