Memberikan Jarak Antar Kata Dengan CSS

Pada saat ini kebutuhan dalam membuat website sangat beragam, demi memberi dampak dan kesan positif client tanpa mengurangi nilai esensi pada website dan pengalaman para pengunjung website.Sebagai programmer, baik itu front end ataupun backend website, aplikasi berbasis android, ios ataupun aplikasi desktop dan komputer, ketelitian sangat dibutuhkan dengan menyangkut detail dari alur program, detail warna, bahkan sampai detail tampilan dan tata letak dan ukuran teks

Bagi teman-teman yang masih belajar tentang HTML CSS mungkin masih banyak properti css yang belum kalian ketahui baik itu fungsi ataupun cara penggunaannya. Contohnya saja di CSS ada properti yang digunakan untuk mengatur jarak antara kata satu dengan kata yang lainnya.Untuk mengatur jarak antara satu kata dengan kata yang lainnya kalian bias menggunakan property word-spacing, berikut adalah contoh penggunaan property word-spacing:

Pertama kita buat struktur HTML seperti berikut:

 

<div class="container">
        <p>Cara memberikan jarak kata menggunakan CSS</p>
        <p class="wspc">Ini adalah paragraf yang diberikan word-spacing</p>
    </div>

 

Target penggunaan word-spacing kita adalah pada tag <p> yang memiliki class .wspc

Selanjutya kita akan membuat CSS nya seperti berikut

.container{
            width: 300px;
            margin: auto;
            background: #9ddb44;
            padding: 10px;
            font-family: arial
        }
        .container p {
            color:#777;
            font-weight: bold;
        }
        .container .wspc{
            background-color: green;
            color: white;
            padding: 1em;
            word-spacing: 2em;
        }

Dalam penggunaanya biasa word-spacing sangat diperlukan pada desain portal berita pada saat menata kata-kata yang agar terlihat lebih presisi atau bahkan untuk portfolio yang memiliki desain unik sesuai dengan kreatifitas kalian.

Kalian juga bisa baca artikel yang berhubungan tentang mengatur letak text pada artikel yang berjudul penggunaan justify content pada flexbox

Baiklah teman-teman saya kira itu saya yang kita bahas mengenai cara mengatur jarak kata menggunakan CSS, sekarang tergantung kalian untuk menggunakan sesuai kreasi masing-masing.

8 Mei 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat