Baik desain web sering tentang tipografi yang baik. Karena begitu banyak konten halaman web disajikan sebagai teks, mampu menata teks itu menjadi menarik dan efektif adalah keterampilan penting yang harus dimiliki sebagai perancang web. Sayangnya, kami tidak memiliki tingkat kontrol tipografi online yang sama dengan yang kami lakukan di media cetak. Ini berarti bahwa kita tidak selalu dapat membuat gaya teks pada situs web dengan cara yang sama seperti yang kita lakukan dalam karya cetak.
Salah satu gaya paragraf umum yang sering Anda lihat di media cetak (dan yang dapat kita buat ulang secara online) adalah di mana baris pertama paragraf tersebut diindentasi. ruang tab. Ini memungkinkan pembaca untuk melihat di mana satu paragraf dimulai dan paragraf lainnya berakhir.
Anda tidak melihat gaya visual ini sebanyak di halaman web karena browser, secara default, menampilkan paragraf dengan spasi di bawahnya sebagai cara untuk menunjukkan di mana yang satu berakhir dan yang lain dimulai, tetapi jika Anda ingin menata halaman untuk memilikinya terinspirasi cetak
gaya indentasi pada paragraf, Anda dapat melakukannya dengan indentasi teks properti gaya.Sintaks untuk properti ini sederhana. Berikut adalah bagaimana Anda akan menambahkan indentasi teks ke semua paragraf dalam dokumen.
p {
indentasi teks: 2em;
}
Menyesuaikan Indentasi
Salah satu cara Anda bisa menentukan dengan tepat paragraf yang akan diindentasi, Anda bisa menambahkan kelas ke paragraf yang ingin Anda indentasi, tapi itu mengharuskan Anda mengedit setiap paragraf untuk menambahkan kelas ke dalamnya. Itu tidak efisien dan tidak mengikuti pengkodean HTML praktik terbaik.
Sebagai gantinya, Anda harus mempertimbangkan saat membuat indentasi paragraf. Anda membuat indentasi paragraf yang langsung mengikuti paragraf lain. Untuk melakukan ini, Anda dapat menggunakan pemilih saudara yang berdekatan. Dengan pemilih ini, Anda memilih setiap paragraf yang langsung didahului oleh paragraf lain.
p + p {
indentasi teks: 2em;
}
Karena Anda membuat indentasi baris pertama, Anda juga harus memastikan bahwa paragraf Anda tidak memiliki ruang ekstra di antara mereka (yang merupakan default browser). Secara gaya, Anda harus memiliki spasi di antara paragraf atau indentasi baris pertama, tetapi tidak keduanya.
p {
margin-bawah: 0;
bantalan-bawah: 0;
}
p + p {
margin-atas: 0;
bantalan-atas: 0;
}
Indentasi Negatif
Anda juga dapat menggunakan indentasi teks properti, bersama dengan nilai negatif, menyebabkan awal garis ke kiri sebagai lawan ke kanan seperti indentasi normal. Anda dapat melakukan ini jika sebuah baris dimulai dengan tanda kutip sehingga karakter kutipan muncul di sedikit margin di sebelah kiri paragraf dan huruf-huruf itu sendiri masih membentuk kiri yang bagus penjajaran.
Katakanlah, misalnya, Anda memiliki paragraf yang merupakan turunan dari blockquote dan Anda ingin paragraf tersebut diindentasi secara negatif. Anda dapat menulis CSS ini:
tanda kutip p {
indentasi teks: -.5em;
}
Ini akan memberikan awal paragraf, yang mungkin termasuk karakter kutipan pembuka, sedikit dipindahkan ke kiri untuk membuat tanda baca gantung.
Mengenai Margin dan Padding
Seringkali dalam desain web, Anda menggunakan nilai margin atau padding untuk memindahkan elemen dan menciptakan ruang putih. Namun, properti tersebut tidak akan berfungsi untuk mencapai efek paragraf indentasi. Jika Anda menerapkan salah satu dari nilai ini ke paragraf, seluruh teks paragraf itu, termasuk setiap baris, akan diberi spasi, bukan hanya baris pertama.