Menggunakan Properti Text-Indent dan Adjacent Sibling Selectors
Desain web yang bagus sering tentang tipografi yang baik. Karena begitu banyak konten halaman web disajikan sebagai teks, kemampuan untuk mengubah teks menjadi menarik dan efektif adalah keterampilan penting untuk dimiliki sebagai perancang web. Sayangnya, kami tidak memiliki tingkat kontrol tipografi yang sama secara online yang kami lakukan di media cetak. Ini berarti bahwa kita tidak selalu dapat dengan gaya teks di situs web dengan cara yang sama seperti yang kita dapat melakukannya dalam potongan yang dicetak.
Satu gaya paragraf umum yang sering Anda lihat di cetak (dan yang dapat kita buat ulang secara online) adalah tempat baris pertama dari paragraf itu menjorok satu ruang tab . Ini memungkinkan pembaca untuk melihat di mana satu paragraf dimulai dan yang lain berakhir.
Anda tidak melihat gaya visual ini sebanyak dalam halaman web karena browser, secara default, menampilkan paragraf dengan ruang di bawahnya sebagai cara untuk menunjukkan di mana salah satu berakhir dan yang lain dimulai, tetapi jika Anda ingin menata halaman untuk memiliki print itu- terinspirasi gaya indentasi pada paragraf, Anda dapat melakukannya dengan properti gaya teks-indentasi .
Sintaks untuk properti ini sederhana. Di sini adalah bagaimana Anda akan menambahkan teks-indent ke semua paragraf dalam dokumen.
p {text-indent: 2em; }Menyesuaikan Indentasi
Salah satu cara Anda dapat menentukan dengan tepat paragraf untuk inden, Anda dapat 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 praktik terbaik pengkodean HTML .
Sebaliknya, Anda harus mempertimbangkan ketika Anda indent paragraf. Anda indent 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 {text-indent: 2em; }Karena Anda menjalin 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 ruang di antara paragraf atau inden baris pertama, tetapi tidak keduanya.
p {margin-bottom: 0; padding-bottom: 0; } p + p {margin-top: 0; padding-top: 0; }Indentasi Negatif
Anda juga dapat menggunakan properti indentasi teks , bersama dengan nilai negatif, untuk menyebabkan awal baris untuk pergi ke kiri sebagai lawan ke kanan seperti indentasi normal. Anda dapat melakukan ini jika garis dimulai dengan tanda kutip sehingga karakter kutipan muncul dalam sedikit margin di sebelah kiri paragraf dan huruf-huruf itu sendiri masih membentuk alinyemen kiri yang bagus.
Katakanlah, misalnya, bahwa Anda memiliki paragraf yang merupakan keturunan dari blockquote dan Anda ingin indentasi negatif. Anda bisa menulis CSS ini:
blockquote p {text-indent: -.5em; }Ini akan memberikan awal paragraf, yang mungkin termasuk karakter kutipan pembuka, untuk sedikit pindah ke kiri untuk membuat tanda baca menggantung.
Mengenai Margin dan Padding
Seringkali dalam desain web, Anda menggunakan nilai margin atau padding untuk memindahkan elemen dan membuat ruang putih. Namun, properti-properti itu tidak akan berfungsi untuk mendapatkan efek paragraf indentasi. Jika Anda menerapkan salah satu dari nilai-nilai ini ke paragraf, seluruh teks paragraf itu, termasuk setiap baris, akan diberi spasi, bukan hanya baris pertama.