Mengatur paragraf dengan css

Mengatur paragraf dengan css

Paragraf secara mendasar diartikan sebagai kumpulan kalimat yang memiliki ide atau pokok bahasan yang sama. Dalam penulisannya paragraf biasanya terdiri dari susunan kata-kata yang terhubung secara logis untuk menjelaskan suatu topik atau ide.  Kali ini saya tidak membahas bagaimana membuat paragraf atau cara menulis paragraf, tapi saya akan membahas bagaimana menyusun tampilan sebuah paragraf html dengan css.

Secara teknis dasar sebuah paragraf yang dibuat dalam html yang ditulis secara kode <p>isi paragraf</p> akan ditampilkan sama yaitu :

• Disajikan rata kiri
• Tiap paragraf ditampilkan dengan pemisah baris

Kita lihat contoh hasil pembuatan paragraf dengan html biasa berikut ini

Tentunya jika sebuah halaman menyajikan tampilan susunan paragraf seperti itu akan sedikit kurang menarik. Bagaimana kita bisa mengubah tampilan paragraf tersebut?? Solusinya yaitu dengan css.

Contoh CSS mengubah format rata kanan dan rata kiri kanan

Untuk mengubah arah tulisan sebuah paragraf yang semula rata kiri menjadi rata kanan atau rata kiri kanan, kita bisa gunakan perintah css berikut :

p.ratakanan {

    text-align:right;

}

p.ratakirikanan {

    text-align:justify;

}

p.ratatengah {

    text-align:center;

}

Cara menggunakanya cukup sederhana, lihat kode html berikut :

<p class="ratakanan">Paragraf 1</p>

<p class="ratakirikanan">Paragraf 2</p>

<p class="ratakiri">Paragraf 3</p>

Sangat mudah kan?? sekarang kita coba mengubah paragraf ke tampilan yang lain. Lihat gambar berikut :

Sekarang mengubah tampilan paragraf dengan latar tertentu, bergaris luar sudut tumpul, warna tulisan tertentu. Lihat kode berikut :

p.kotak1 {

    text-align:justify;

    padding:15px;

    border:1px solid #ccc;

    border-radius:15px;

    background-color:#D7FDCC;

    color:blue;

}

Kode yang ditambahkan yaitu padding (untuk mengatur jarak dengan area luar), border (memberi garis dengan ketebalan dan warna tertentu, border-radius (mengatur sudut kotak), background-color(warna latar), dan color (warna tulisan). Cara penerapan hampir sama dengan yang pertama yaitu memanggil nama class cssnya.

<p class="kotak1">Isi paragraf</p>

Sekarang kita coba yang lain, lihat gambar berikut :

Gambar diatas mengubah tampilan paragraf dengan menambahkan latar gambar dibelakang. Kode cssnya cukup sederhana. Lihat berikut :

p.kotak2 {

    text-align:justify;

    padding:15px 15px 15px 70px;

    border:1px solid #ccc;

    border-radius:15px;

    background:#D7FDCC url(comment.png) no-repeat 5px 15px;

    color:blue;

}

Mirip dengan kode pertama cuman mengubah beberapa baris perintah css, yang semula background-color menjadi background, dan mengubah nilai padding.

Contohnya bisa dilihat dan tinggal disave as disini

Semoga sudah jelas, jadi kita bisa mengatur tampilan paragraf sesuai apa yang kita mau.

Jangan sungkan untuk bertanya, dan juga kalo saya ada kurang tolong dikoreksi atau ditambahkan. Silahkan bagikan untuk teman anda melalui twitter atau media lainya.