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

mengatur paragraf dengan css

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

mengatur paragraf dengan css

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 :

mengatur paragraf dengan css

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 :

mengatur paragraf dengan css

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.

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **

Artikel Lainnya

  • Mengatur gambar dengan css
    CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari. CSS dapat diterapkan hampir pada semua objek yang disisipkan dalam kode html baik itu tulisan, tabel dan gambar maupun objek lainya. Kali ini saya akan berbagi cara mengatur gambar dengan css agar dapat disajikan lebih hemat tempat dan hemat kode dan tentunya menarik.
  • Membuat Background motif unik dengan CSS3
    Barusan habis jalan-jalan ke situs seberang, ketemu tutorial membuat motif gambar background yang sangat unik dibuat cuma dengan css3. Memang luar biasa tak pernah terbayangkan kalau hasilnya bisa mirip dengan sebuah gambar yang dibuat dengan aplikasi seperti photoshop.
  • Cara mengatur tampilan dengan css sesuai dengan media outputnya
    Perkembangan teknologi web sekarang ini memungkinkan kita mengatur hasil output ke banyak media dengan berbagai macam bentuk tampilan. Bisa sesuai aslinya, bahkan bisa dengan format tampilan tertentu sesuai dengan media yang kita inginkan.
  • Membuat menu dengan CSS
    Membuat menu unik dengan mengunakan HTML + CSS. CSS menurut saya sebuah teknologi yang powerfull dalam menyusun tampilan sebuah web atau blog. Ini dibuktikan sekarang css terus dikembangkan dan digunakan hampir 99% pengembang web, yang 1% nya mungkin masih dalam tahap belajar.
  • Membuat background gradient dengan css3
    Salah satu fitur unggulan yang dihadirkan pada teknologi css3 adalah kemampuanya membuat warna latar/background gradient. Gradient adalah perubahan warna dari satu warna ke warna lainya yang dilakukan secara teratur. Gradient lebih identik pada hasil gambar yang diciptakan melalui proses penempatan kombinasi beberapa warna yang memenuhi sebuah area gambar. Biasanya untuk menghasilkan gambar gradient digunakan aplikasi pengolah gambar seperti photoshop, atau corel draw. Pada artikel ini saya akan berbagi tentang bagaimana membuat latar gradient dengan css3.

Kiriman terbaru