Skip to content Skip to sidebar Skip to footer
Home / CSS / Web Design

Materi 7 : Mengatur Text dengan CSS

By Web Design Purbalingga Post a Comment

Mengatur Text dengan CSS – sekarang kita sudah sampai pada materi tentang mengatur text dengan css yang sebelumnya kita sudah belajar tentang membuat komentar pada css. Baiklah, pada materi kali ini kita akan belajar bagaimana cara mengatur text pada elemen html dengan menggunakan css.

Mengatur Text dengan CSS

Ada beberapa point yang akan kita pelajari di antaranya adalah bagaimana mengatur posisi text baik itu judul atau paragraf, bagaimana mengatur warna text, dan bagaimana mengatur jarak antar huruf.

Mengatur Posisi Text

Yang perlu kita ingat untuk mengatur posisi text adalah property apa yang digunakan di css untuk mengatur posisi text. Property yang digunakan adalah text-align, berfungsi sebagai penentu apakah posisi textnya di kiri, tengah, kanan atau kiri dan kanan. Umumnya, posisi text itu ada 4 macam, yaitu text rata kiri, text rata tengah, text rata kanan dan text rata kiri dan kanan. Simak contohnya berikut ini, sebelumnya siapkah terlebih dulu satu judul dan 3 paragraf seperti di bawah ini (silahkan menggunakan text yang lain, bebas). Silahkan ketik kode berikut ini pada file html kalian
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Latihan CSS</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <!-- text rata tengah -->
 <h1>Selamat Datang di Forum Web Design</h1>

 <!-- text rata kiri -->
 <p class="paragraf1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis fugiat eius, cupiditate iste similique porro officia necessitatibus ad corporis debitis ipsum perferendis, optio dolorem, delectus blanditiis totam quos sunt at.</p><br>

 <!-- text rata kanan -->
 <p class="paragraf2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores saepe itaque ratione commodi nulla, aliquid fuga provident animi unde labore magnam tempore obcaecati dolor quae accusamus consequatur. Ea, minus, magnam?</p><br>

 <!-- text rata kiri dan kanan -->
 <p class="paragraf3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum, incidunt ducimus quia quam quos iure odio inventore dignissimos. Provident nulla placeat, cumque rerum impedit laudantium reprehenderit. Laudantium delectus debitis aliquam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae iusto commodi ratione aliquam repellendus expedita deserunt quibusdam mollitia dignissimos, consequuntur, quisquam, sint suscipit molestias deleniti tenetur harum. Magnam in, adipisci!. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident tenetur rerum, vel numquam itaque in est veritatis aliquam, iure recusandae. Quas eveniet debitis vel cupiditate ex exercitationem consequuntur. Itaque, voluptate.</p>
</body>
</html>
Text rata kiri
Ketik kode di bawah ini pada file css kalian
/*text rata kiri*/

.paragraf1 {
 text-align: left;
}
Untuk mengatur text menjadi rata kiri tidak perlu di atur melalui css, karena posisi tersebut adalah posisi default penulisan sebuah text. Tapi jika ingin lebih jelasnya, kalian bisa memberikan nilai left pada property text-align.
Text rata tengah
Ketik kode di bawah ini pada file css kalian
/*text rata tengah*/

h1 {
 text-align: center;
}
Untuk mengatur text agar menjadi rata tengah adalah dengan memberikan nilai center pada propery text-align
Text rata kanan
Ketik kode di bawah ini pada file css kalian
/*text rata kanan*/

.paragraf2 {
 text-align: right;
}
Untuk mengatur text agar menjadi rata tengah adalah dengan memberikan nilai right pada propery text-align
Text rata kiri dan kanan
Ketik kode di bawah ini pada file css kalian
/*text rata kiri dan kanan*/

.paragraf3 {
 text-align: justify;
}
Untuk mengatur text agar menjadi rata tengah adalah dengan memberikan nilai justify pada propery text-align

Hasilnya berikut ini

Mengatur Warna Text

Untuk mengatur warna text, dibutuhkan property baru yaitu color. Tentunya ini sangat mudah, kita hanya memberikan kodewarna atau nama – nama warna sebagai nilai pada property color. Simak contohnya berikut ini

/* Text judul berwarna merah */

h1 {
 text-align: center;
 color: red;
}

/* Text paragraf berwarna hijau */

.paragraf1 {
 text-align: left;
 color: green;
}

.paragraf2 {
 text-align: right;
 color: green;
}

.paragraf3 {
 text-align: justify;
 color: green;
}
Hasilnya


Pada text judul di atas berubah berwarna merah karena kita menambahkan property color dengan nilai red. Sedangkan untuk paragrafnya berubah menjadi hijau (green). Atau kalian ingin menggunakan kode warna lainnya, bisa cek di mari

Mengatur Jarak Antar Huruf

Adapun untuk mengatur jarak antar huruf, kita butuh property lagi yaitu letter-spacing. Sebagai contohnya, perhatikan kode berikut ini

/*mengatur jarak antar huruf*/

.paragraf3 {
 text-align: justify;
 color: green;
 letter-spacing: 8px;
}
Hasilnya


Nilai untuk property Letter-spacing pada contoh di atas kita beri nilai 8pixel dan hasilnya akan tampak seperti gambar di atas.

Sekian materi kali ini tentang Mengatur Text dengan CSS, semoga bermanfaat dan terus ikuti materi – materi terbaru di Web Design Purbalingga. Jika ada point yang belum jelas, kalian bisa tulis pertanyaan kalian di kolom komentar.

Post a Comment for "Materi 7 : Mengatur Text dengan CSS"