Format Text di CSS

lebakcyber.net – Format text di CSS. Pada kesempatan kali ini kita akan membahas mengenai bagaimana cara memformat text untuk mengatur dan juga memodifikasi text yang ada pada halaman HTML dengan menggunakan CSS agar tampilan text tersebut sesuai dengan yang kita inginkan.

Misalnya untuk mengatur sebuah text menjadi rata tengah, rata kanan, rata kiri, mengatur huruf menjadi huruf besar atau huruf kecil, mengatur jarak indent text, mengatur warna text serta mengatur design pada text.

Dan berikut ini adalah beberapa perintah CSS yang dapat digunakan untuk melakukan format text pada CSS :

color : Digunakan untuk merubah warna pada text, valuenya sendiri bisa diisi dengan kode warna atau nama warna
text-align : Digunakan untuk melakukan pengaturan posisi align pada suatu text, valuenya sendiri dapat diisi dengan left agar text menjadi rata kiri, right agar text menjadi rata kanan, center untuk membuat text menjadi rata tengah ataupun justify agar membuat text menjadi rata kanan ataupun kiri.
text-decoration : Digunakan agar dapat mengatur dekorasi text, valunya sendiri dapat diisi dengan none agar membuat sebuah text tidak memiliki dekorasi, overline agar membuat sebuah text memiliki garis di bagian atas text, underline untuk membuat text memiliki garis bawah dan juga line-through untuk membuat text garis coreng pada text yang diinginkan.
text-transform : Digunakan untuk membuat text menjadi huruf kapital, valuenya sendiri dapat diisi dengan lowercase untuk membuat sebuah text menjadi huruf kecil semua dan juga uppercase untuk membuat sebuah text menjadi huruf besar semua.
text-indent : Digunakan untuk melakukan pengaturan jarak alinea pada sebuah text, valuenya sendiri dapat diisi dengan nilai pixel yang diinginkan sesuai dengan kebutuhan.
text-spacing : Digunakan untuk mengatur sebuah jarak diantara karakter pada sebuah text, valuenya sendiri dapat diisi dengan menggunakan nilai pixel dan lain sebagainya.
line-height : Digunakan untuk dapat mengatur jarak diantara baris yang ada pada text, valuenya sendiri dapat diisi dengan sebuah nilai.
text-shadow : Digunakan untuk bisa mengatur efek bayangan pada sebuah text, valuenya sendiri dapat diisi pertama dengan mengisi nilai untuk jarak atas dan bawah, kedua mengisi nilai untuk jarak kiri dan kanan dan yang ketiga untuk mengisi warna. Contoh penulisannya seperti 3px 6px red.
vertical-align : Digunakan untuk mengatur align pada sebuah text dalam bentuk vertikal, untuk valuenya sendiri dapat digunakan adalah right untuk rata kanan, left untuk rata kiri dan center untuk rata tengah.

Oke sekarang kita masuk ke prakteknya, sekarang seperti biasa silahkan buat sebuah file index.html dan juga style.css lalu masukan perintah seperti dibawah ini :

style.css

.teks_satu{
    text-transform: uppercase;
    text-indent: 30px;
    line-height: 30px;
    letter-spacing: 5px;
}
 
.teks_dua{
    text-align: center;
    text-transform: lowercase;
    text-decoration: line-through;
    word-spacing: 10px;
}
 
.teks_tiga{
    text-align: right;
    text-transform: capitalize;
    text-decoration: overline;
}
 
.teks_empat{
    color: blue;
    text-decoration: underline;
}

index.html

```html
<!DOCTYPE html>
<html>
<head>
    <title>Format text Menggunakan CSS - Lebakcyber.net</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p class="teks_satu">
         Selamat datang di lebakcyber.net
         di website ini kalian dapat mempelajari berbagi materi pemrograman secara gratis
         dan pada kesempatan ini kita sedang mempelajari materi CSS
         semoga bermanfaat.</p>
    <p class="teks_dua">Contoh teks yang di coret</p>
    <p class="teks_tiga">Contoh teks dengan garis diatas</p>
    <p class="teks_empat">Contoh teks dengan garis bawah dan berwarna biru</p>
    
</body>
</html>
```

Nanti hasinya akan seperti pada gambar dibawah ini :

Oke sampai disini dulu pembahasan materi CSS kita mengenai format text di css, semoga tutorial sederhana ini bermanfaat dan sampai jumpa di tutorial belajar CSS lainnya.

Lebak Cyber Tips dan Trik Komputer

Format Text di CSS