Mengatur Teks Pada CSS

Created at by Aris Munandar

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.

PropertiKeterangan
colorProperti color digunakan untuk mengubah warna text
directionProperti direction digunakan untuk menentukan posisi text
letter-spacingProperti latter-spacing digunakan untuk menambah atau mengurangi ruang antara huruf yang berbentuk kata
word-spacingProperti word-spacing digunakan untuk menambah atau mengurangi ruang antara kata-kata pada sebuah kalimat
text-indentProperti text-indent digunakan untuk mengatur jarak bagian kiri kata pertama pada sebuah kalimat
text-alignProperti text-align digunakan untuk mengatur posisi atau perataan text
text-decorationProperti text-decoration digunakan untuk membuat garis bawah, overline atau tanda coret pada teks
text-transformProperti text-transform digunakan untuk mengatur huruf besar atau kecil
white-spaceProperti white-space digunakan untuk mengatur jarak enter sebuah kalimat
text-shadowProperti 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>Code language: HTML, XML (xml)

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

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>Code language: HTML, XML (xml)

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>Code language: HTML, XML (xml)

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>Code language: HTML, XML (xml)

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>Code language: HTML, XML (xml)

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>Code language: HTML, XML (xml)

Berikut ini tampilan kode diatas…

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>Code language: HTML, XML (xml)

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>Code language: HTML, XML (xml)

Dari kode diatas berikut ini tampilan pada browser…

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>Code language: HTML, XML (xml)

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>Code language: HTML, XML (xml)

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.

Comments

Congrats, you have the opportunity to be the first commenter on this article. Have questions or suggestions? Please leave a comment to start discussion.

Leave comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Bahasaweb.com

Subscribe now to keep reading and get access to the full archive.

Continue reading