Mengatur Teks Pada CSS

Masih dilingkup tutorial css dasar, kali ini yang akan kita bahas adalah bagaimana cara mengatur teks pada css, di css sendiri memikili beberapa properti untuk mengatur teks pada css agar menjadi sesuai yang keperluan kita. Bagian dari tutorial ini sangat penting, karna sebuah website adalah sekumpulan teks sebagai informasi untuk pengguna internet.

Mengatur Teks Pada CSS

Dasar mengatur teks pada css biasanya seperti posisi perataan teks, jarak spasi dan lain sebagainya, semua itu bisa dilakukan dengan css. Berikut ini properti-properti yang bisa digunakan untuk memanipulasi atau mengatur teks pada css agar menjadi sesuai dengan yang kita inginkan.

Properti Keterangan
color Properti color digunakan untuk mengubah warna text
direction Properti direction digunakan untuk menentukan posisi text
letter-spacing Properti latter-spacing digunakan untuk menambah atau mengurangi ruang antara huruf yang berbentuk kata
word-spacing Properti word-spacing digunakan untuk menambah atau mengurangi ruang antara kata-kata pada sebuah kalimat
text-indent Properti text-indent digunakan untuk mengatur jarak bagian kiri kata pertama pada sebuah kalimat
text-align Properti text-align digunakan untuk mengatur posisi atau perataan text
text-decoration Properti text-decoration digunakan untuk membuat garis bawah, overline atau tanda coret pada teks
text-transform Properti text-transform digunakan untuk mengatur huruf besar atau kecil
white-space Properti white-space digunakan untuk mengatur jarak enter sebuah kalimat
text-shadow Properti text-shadow untuk membuat bayangan pada teks

Properti-properti diatas akan kita bahas satu-persatu, penulis berharap pembaca sambil mempraktekan tutorial ini langsung, agar tahu bagaimana sebuah teks dapat dimanipulasi dengan sintaks css.

Mengubah Warna Teks Pada CSS

Untuk dapat mengubah warna teks pada css yaitu dengan cara menggunakan properti color, pada tutorial sebelumnya telah disediakan metode menggunakan warna pada css. Berikut ini contoh kodenya.

<!DOCTYPE html>
<html>
    <head>
    <title>Mengatur Teks Pada CSS</title>
    <style type="text/css">
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>Mengubah warna text pada css</p>
</body>
</html>

Kode diatas untuk mengubah warna teks menjadi warna merah yang diarahkan ke selector p, berikut ini tampilan dari hasil kode diatas.

Baca juga:  Penerapan Properti Background Pada CSS

mengatur teks pada css

Mengatur Posisi Teks Pada CSS

Untuk mengatur posisi teks pada css yaitu dengan menggunakan properti direction, dalam properti direction ini hanya memiliki dua nilai, yaitu ltr (left to right) dan rtl (right to left), yang dimaksud posisi properti direction ini adalah posisi teks apakah berada dikanan atau dikiri. Berikut ini contoh kodenya.

<style type="text/css">
    p {
        direction: rtl;
    }
 </style>

Kode diatas hanya menggunakan nilai rtl, dimana teks akan berada dibagian kanan browser, secara default nilai direction meksipun tidak didefinisikan akan bernilai ltr.

Mengatur Jarak Antara Huruf Dengan CSS

Untuk dapat mengatur jarak antara huruf pada sebuah kata yaitu dengan cara menggunakan properti letter-spacing, kita meskipun secara bawaan huruf pada sebuah halaman html sudah sangat baik, hanya saja pada bagian desain kadang-kadang memiliki aturannya sendiri, berikut ini contoh kodenya.

<style type="text/css">
    p {
        letter-spacing: 10px;
    }
 </style>

Dari kode diatas berikut ini hasilnya…

mengatur teks pada css

Mengatur Jarak Spasi Antara Kata

Untuk dapat mengatur jarak spasi antara kata yaitu dengan menggunakan properti word-spacing, kadang spasi antara kata pada dokumen html tidak sesuai dengan yang kita inginkan, kita dapat menggunakan properti word-spacing tanpa menggunakan tombol spasi berkali-kali. Berikut ini kodenya.

<style type="text/css">
    p {
        word-spacing: 10px;
    }
 </style>

Dari kode diatas maka akan menghasilkan tampilan seperti dibawah ini…

mengatur teks pada css

Mengatur Teks Jarak Kiri Pada Kata Pertama

Teks indent pada perangkat lunak office sering kita gunakan, yaitu untuk mengatur jarak pada bagian kiri kalimat pertama. Jika di css yaitu dengan menggunakan properti text-indent, berikut ini contoh kodenya.

<style type="text/css">
    p {
        text-indent: 40px;
    }
 </style>

Berikut ini tampilan dari kode diatas…

mengatur teks pada css

Mengatur Posisi Perataan Teks Pada CSS

Layaknya diperangkat lunak office, anda dapat mengatur perataan teks seperti rata tengah, rata kanan, rata kiri, dan sama rata, begitupun dalam html kita membutuhkan posisi perataan text pada dokumen html ini. Jika di css yaitu dengan menggunakan properti text-align. Berikut ini contohnya.

<!DOCTYPE html>
<html>
    <head>
    <title>Mengatur Teks Pada CSS</title>
    <style type="text/css">
        .rata-kiri {
            text-align: left;
        }
        .rata-kanan {
            text-align: right;
        }
        .rata-tengah {
            text-align: center;
        }
        .sama-rata {
            text-align: justify;
        }
    </style>
</head>
<body>
    <strong>Rata Kiri</strong>
    <p class="rata-kiri">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <strong>Rata Kanan</strong>
    <p class="rata-kanan">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <strong>Rata Tengah</strong>
    <p class="rata-tengah">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <strong>Sama Rata</strong>
    <p class="sama-rata">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</body>
</html>

Berikut ini tampilan kode diatas…

Baca juga:  Cara Mengatur Garis Dengan CSS

mengatur teks pada css

Mengatur Dekorasi Teks Pada CSS

Untuk dapat mengatur dekorasi pada teks yaitu dengan menggunakan text-decoration, dekorasi pada teks maksudnya seperti menambahkan garis bawah, efek coret pada teks atau efek blink. Berikut ini contoh kodenya.

<!DOCTYPE html>
<html>
    <head>
    <title>Mengatur Teks Pada CSS</title>
    <style type="text/css">
        .garis-bawah {
            text-decoration: underline;
        }
        .coret {
            text-decoration: line-through;
        }
        .garis-atas {
            text-decoration: overline;
        }
       .blink {
            text-decoration: blink;
        }
    </style>
</head>
<body>
    <strong>Garis Bawah</strong>
    <p class="garis-bawah">Lorem ipsum dolor sit amet</p>
    <strong>Efek Coret</strong>
    <p class="coret">Lorem ipsum dolor sit amet</p>
    <strong>Garis Atas</strong>
    <p class="garis-atas">Lorem ipsum dolor sit amet</p>
    <strong>Efek Blink</strong>
    <p class="blink">Lorem ipsum dolor sit amet</p>
</body>
</html>

Berikut ini contoh tampilan dari kode diatas…

mengatur teks pada css

Mengatur Besar Kecil Huruf Pada CSS

Untuk dapat mengatur besar kecilnya huruf di css yaitu dengan menggunakan properti text-transform, dimana text-transform ini memiliki beberapa nilai antara lain, uppercase, lowercase dan capitalize. Jika pada uppercase seluruh teks akan menjadi huruf besar, sebaliknya dengan lowercase seluruh teks akan menjadi kecil, namun pada capitalize huruf awal setiap kata akan menjadi huruf besar. Beribut ini contoh kodenya.

<!DOCTYPE html>
<html>
    <head>
    <title>Mengatur Teks Pada CSS</title>
    <style type="text/css">
        .uppercase {
            text-transform: uppercase;
        }
        .lowercase {
            text-transform: lowercase;
        }
        .capitalize {
            text-transform: capitalize;
        }
    </style>
</head>
<body>
    <strong>Uppercase</strong>
    <p class="uppercase">Lorem ipsum dolor sit amet</p>
    <strong>Lowercase</strong>
    <p class="lowercase">Lorem ipsum dolor sit amet</p>
    <strong>Capitalize</strong>
    <p class="capitalize">Lorem ipsum dolor sit amet</p>
</body>
</html>

Dari kode diatas berikut ini tampilan pada browser…

Baca juga:  Cara Mengganti Bentuk Kursor Mouse Di CSS

mengatur teks pada css

Mengatur White Space Pada CSS

Untuk mengatur white space pada css yaitu dengan menggunakan properti white-space. Pada properti white-space memiliki beberapa nilai antara lain, pre, nowrap, dan normal. Meski secara default di browser sudah normal. Berikut ini contohnya.

<style type="text/css">
    p {
        white-space: pre;
    }
 </style>

Dinilai pre bisa anda ganti dengan beberapa nilai yang tadi penulis sudah sebutkan.

Mengatur Shadow Atau Bayangan Pada Teks

Mengatur bayangan pada teks atau shadow bisa dengan menggunakan properti text-shadow yang memang sudah tersedia di dalam css, hanya tinggal menyesuaikannya saja agar sesuai dengan yang kita inginkan. Berikut ini contoh kodenya.

<style type="text/css">
    p {
        text-shadow: 1px 1px 9px black;
    }
 </style>

Hasil dari kode diatas seperti dibawah ini…

mengatur teks pada css

Demikianlah tutorial untuk mengatur teks pada css, dari sekian banyak properti teks yang bisa digunakan semoga dengan tutorial ini dapat lebih mempermudah penggunaan masing-masing properti yang dibutuhkan untuk membangun website anda.