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 **

Komentar

Halaman Lainya

  • 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.
  • 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.
  • Referensi warna untuk HTML dan CSS
    Warna yang terlihat disebuah website/blog sangatlah bervariasi dan memiliki daya tarik tersendiri terhadap pengunjung, pingin tau lengkap referensi warna untuk HTML maupun CSS, silahkan baca panduan berikut.
  • Template halaman admin gratis
    Setiap kali kita membuat sebuah aplikasi web tentunya pasti menginginkan hasil yang baik, enak dilihat, tampilan yang cepat, fleksibel dan gampang untuk dikembangkan. Dan satu lagi tentunya lagi hemat waktu dalam membuatnya.
  • Menggunakan banyak background gambar dengan css
    Berkreasi tiada batas itu yang tentunya kita harapkan bisa dilakukan dengan css. Banyak hal yang anda bisa lakukan agar tampilan sebuah halaman bisa lebih menarik dengan bantuan css. Kira bisa atur gambar, text atau objek lainya dengan cukup mudah. Termasuk mengatur gambar latar/background yang berikut ini saya sampaikan yaitu bagaimana menampilkan banyak gambar sebagai latar dari halaman web.

Kiriman terbaru