Cara mengatur paragraf di css

Hallo teman-teman, kali ini kita akan belajar bagaimana cara membuat jarak antar baris dengan CSS. Jika kalian sering menggunakan tag <p> untuk menulis artikel, maka artikel tersebut akan menjadi suatu paragraf. Namun kalian merasa bahwa jarak antar baris diparagraf tersebut terlalu dekat. Kalian bisa menggunakan fungsi line-height untuk memberikan jarak antar baris. Sehingga paragraf yang tadinya terlihat berdempetan bisa menjadi lebih luas. Fungsi ini bisa kalia terapkan pada file HTML kalian. Bagaimana cara menggunakan line-height tersebut kalian bisa ikut langkah-langkah dibawah ini. Pertama kalian buat file HTML seperti ini.

paragraf.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

<!DOCTYPE html>

<html>

<head>

<style>

p.kecil {

    line-height: 70%;

}

 

p.besar {

    line-height: 40px;

}

</style>

</head>

<body>

 

<p>

Ini adalah paragraf normal<br>

Ini adalah paragraf normal<br>

Ini adalah paragraf normal<br>

Ini adalah paragraf normal<br>

</p>

 

<p class="kecil">

Ini adalah paragraf kecil<br>

Ini adalah paragraf kecil<br>

Ini adalah paragraf kecil<br>

Ini adalah paragraf kecil<br>

</p>

 

<p class="besar">

Ini adalah paragraf besar<br>

Ini adalah paragraf besar<br>

Ini adalah paragraf besar<br>

Ini adalah paragraf besar<br>

 

</p>

 

</body>

</html>

Save kemudian kalian bisa lihat hasilnya pada browser kalian. Jika berhasil hasilnya akan seperti ini

Cara mengatur paragraf di css
Cara mengatur paragraf di css

Paragraf yang pertama adalah yang normalnya. Kemudian paragraf yang kedua adalah yang menggunakan fungsi line-height dengan nilai 70%. Artinya paragraf itu menjadi lebih rapat. Dan paragraf yang terakhir adalah dengan nilai line-height 40px. Artinya jarak antar baris paragraf tersebut sebanyak 40px, terlihat lebih renggang. Untuk nilai line-height itu sendiri bisa berupa satuan px ataupun %. Kalian bisa pilih sesuai kebutuhan. Mudah bukan ?

Semoga penjelasan diatas membantu pemahaman dalam pengaturan paragraf. Jika ada yang kurang jelas silahkan tulis di komentar di bagian bawah. Terima kasih banyak.

 

Muhammat Rasid Ridho

Software Developer yang Suka Jalan jalan, Belajar Jaringan dan Berbagi Cerita. Instagram: muhammat.rasid.ridho Jangan lupa tulis komentar di bawah ini ya teman teman ... !

Apa CSS property untuk mengatur jarak antar baris?

Jarak antar baris bisa kita atur menggunakan properti CSS line-height .

Text align apa saja?

Text Align Ada rata kiri, rata kanan, rata tengah, rata kiri dan kanan. Nah, kita juga bisa meratakan teks dengan properti CSS text-align .

Bagaimana cara mengatur rata teks HTML dengan CSS?

Pengaturan perataan teks pada CSS dapat menggunakan properti text-align. Nilai pada properti ini akan membuat teks disusun sesuai dengan nilai perataannya. text-align: left | right | center | justify | inherit; Properti dengan nilai left artinya teks akan diatur dengan rata kiri.

Apa itu text decoration?

Text-decoration ini bertugas untuk mengatur efek garis pada suatu kata didalam HTML. Seperti contohnya apabila kalian ingin memberikan efek garis di bawah kalimat, maka perintah text-decoration ini yang akan kalian pergunakan.