Elemen apa yang digunakan untuk menurunkan sebuah paragraf adalah

Tholib Mafazi Rahman

Memformat kalimat atau paragraf yang akan ditamplkan pada halaman web sangat diperlukan agar pengunjung dapat dengan mudah memahami isi dari paragraf tersebut. Jangan sampai suatu paragraf yang berisi informasi menarik jadi susah untuk dibaca karena pemilihan format teks yang kurang tepat.

Pada Artikel ini Anda akan mengetahui cara memformat Teks yang tepat dengan menggunakan properti-properti khusus yang dimiliki oleh CSS. berikut ulasan selengkapnya.

Daftar isi

Properti color pada CSS merupakan properti yang berfungsi untuk menentukan warna pada teks atau kalimat. Artinya, properti tersebut bisa Anda gunakan untuk memberikan warna tertentu pada teks, kata, kalimat. Anda bisa mengkombinasikan warna teks dengan background agar lebih mudah untuk dibaca.

Value atau Nilai yang digunakan untuk properti color antara lain : color, Hex, rgb, rgba, hsl, hsla. dan berikut keterangan dari beberapa value tersebut.

Daftar Tabel untuk color

No	Jenis Value	Deskripsi
1	color	nilai dengan menggunakan nama warna misal red, blue, black, yellow, dsb
2	HEX	memberikan nilai dalam bentuk Hexadecimal. contoh #FFFFFF, #328328, #DEDEDE
3	rgb	Nilai RGB atau disebut Red-Green-Blue misal rgb(200,255,0)
4	rgba	Nilai RGBA atau disebut Red-Green-Blue-Alpha misal rgba(102,51,0,1)
5	hsl	Nilai HSL atau disebut Hue-Saturation-Lightness misal hsl(360,100%,50%)
6	hsla	Nilai HSLA atau disebut Hue-Saturation-Lightness-Alpha misal hsla(360,100%,50%,0.1)

dibawah ini adalah contoh beberapa kalimat yang diberi warna dengan properti color dengan ketentuan : kalimat pertama berwarna merah dengan nilai nama warna yaitu 'red', kalimat kedua berwarna hijau dengan nilai RGB(0,255,0), dan kalimat ketiga berwarna Biru dengan nilai HSL(240, 100%, 50%).

contoh kode/program/sintaks css

<!DOCTYPE html>

<html>

<head>

<title>

membuat warna dengan properti color

</title>

<style>

.hex{

color

red;

} .rgb{

color

rgb(0,255,0);

} .hsl{

color

hsl(240,100%,50%);

}

</style>

</head>

<body>

Huruf pada Kalimat ini Akan Berwarna Merah

</div>

Sedangkan pada Kalimat kedua ini Akan Berwarna Hijau

</div>

dan Kalimat yang Terakhir ini Akan Berwarna Biru

</div>

</body>

</html>

dibawah ini adalah screenshot hasil dari kode diatas jika dijalankan pada web browser.

Gambar 1

Properti direction pada CSS merupakan properti yang digunakan untuk menentukan arah penulisan teks atau kalimat. Efek dari properti direction tersebut membuat sebuah kalimat atau teks menjadi rata kanan atau kiri(mirip text-align). dibawah ini contoh kodenya.

contoh kode/program/sintaks css

<!DOCTYPE html>

<html>

<head>

<title>

contoh properti direction

</title>

<style>

.ltr{

direction

ltr;

color

red;

} .rtl{

direction

rtl;

color

green;

} .initial{

direction

initial;

color

blue;

}

</style>

</head>

<body>

Kalimat ini Akan diatur dengan nilai LTR

</p>

Kalimat ini Akan diatur dengan nilai RTL

</p>

Kalimat ini Akan diatur dengan nilai initial

</p>

</body>

</html>

direction memiliki 2 value utama yaitu Ltr(left-to-right) dan Rtl(right-to-left). Anda juga bisa menggunakan Nilai seperti initial dan inherit, dimana initial mengembalikan nilai properti ke default-nya sedangangkan inherit membuat nilai properti mengikuti induknya(parent element).

Properti direction penggunaanya disarankan bersamaan dengan properti unicode-bidi. dan dibawah ini adalah screenshot hasil dari kode diatas jika dijalankan pada web browser.

Gambar 2

letter-spacing merupakan properti CSS yang dibuat khusus untuk memberi spasi antara huruf satu dengan lainya pada kalimat. Anda bisa memanfaatkan properti tersebut untuk mengatur jarak antar huruf pada kalimat agar lebih mudah untuk dibaca.

Letter-spacing memiliki value atau Nilai yaitu 'normal' dan ukuran, ukuran yang dimaksud bisa dalam bentuk px, em, pt, pc, cm, dsb misal 10px, 1em, dsb. berikut selengkapnya.

Daftar Tabel untuk Letter-Spacing

No	Value	Deskripsi
1	normal	jarak antar huruf diatur normal atau default
2	px, em, pt, cm, etc	jarak antar huruf diatur berdasarkan nilai ukuran misal 10px, 1em, 0.5cm, dsb
3	initial	mengembalikan nilai dari letter-spacing ke defaultnya.
4	inherit	nilai yang diatur mengikuti induk(parent element)

dibawah ini adalah contoh kode CSS menggunakan properti letter-spacing yang digunakan untuk membuat kalimat pertama diatur dengan nilai normal. sedangkan kalimat kedua jarak antar huruf diatur dengan nilai 5px.

contoh kode/program/sintaks css

<!DOCTYPE html>

<html>

<head>

<title>

contoh properti letter-spacing

</title>

<style>

.normal{

letter-spacing

normal;

} .px{

letter-spacing

5px;

}

</style>

</head>

<body>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</p>

</p>

</body>

</html>

berikut hasil dari kode CSS diatas jika ditampilkan pada halaman web.

Gambar 3

line-height dibuat khusus untuk mengatur tinggi baris pada kalimat. Artinya, misalkan Anda menulis kalimat pada word, dan ketika ketik enter ingin pindah baris, nah jarak antara kalimat atas dan bawahnya bisa Anda atur dengan line-height.

properti line-height biasanya digunakan bersamaan dengan properti letter-sapacing untuk mengatur kalimat yang tampil dihalaman web agar lebih mudah untuk dibaca. pengaturan line-height perlu untuk dipahami agar pengunjung yang membaca tidak kesulitan dalam membaca kalimat.

Properti line-height memiliki value atau nilai utama antara lain : normal, angka(misal 1, 1.5, 1.7, dsb), dan ukuran(misal dalam bentuk px, em, dsb). Anda juga bisa menggunakan nilai initial dan inherit. berikut contoh kodenya.

contoh kode/program/sintaks css

<!DOCTYPE html>

<html>

<head>

<title>

contoh properti line-height

</title>

<style>

.px{

line-height

10px;

} .normal{

line-height

normal;

} .angka{

line-height

1.9;

}

</style>

</head>

<body>

</p>

</p>

</p>

</body>

</html>

dan berikut screenshot dari hasil contoh kode diatas.

Gambar 4

Text-align merupakan properti CSS yang dibuat khusus untuk mengatur perataan kalimat atau paragraf. Anda bisa menggunakan text-align untuk mengatur paragraf menjadi rata kiri(left), kanan(right), tengah(center), dan justify(rata kanan kiri).

text-align memilik 4 value utama yaitu center, justify, left, dan right. Anda juga bisa menggunakan Nilai initial dan inherit.

text-align Berbeda dengan properti direction dengan kedua Nilai-nya yaitu rtl dan ltr yang penggunaanya hampir sama dengan value milik text-align yaitu left, dan right.

dibawah ini adalah contoh kode CSS dengan menggunakan properti text-align.

contoh kode/program/sintaks css

<!DOCTYPE html>

<html>

<head>

<title>

contoh properti text-align

</title>

<style>

.kiri{

text-align

left;

} .kanan{

text-align

right;

} .tengah{

text-align

center;

}

</style>

</head>

<body>

</p>

</p>

</p>

</body>

</html>

dan berikut hasil dari kode diatas jika ditampilkan pada halaman web offline.

Gambar 5

text-decoration pada CSS dibuat khusus untuk memberikan efek garis pada kata atau kalimat. Artinya, Anda bisa membuat garis bawah, garis atas pada kata tertentu, atau Anda bisa membuat garis ditengah kata(mencoret kata). Bahkan garis tersebut bisa Anda beri warna biar lebih cantik.

Sebenarnya properti text-decoration adalah properti yang mempersingkat penulisan dari ketiga properti lainnya yaitu text-decoration-line, text-decoration-color, text-decoration-style.

ketiga properti tersebut bisa Anda jadikan sebagai Nilai untuk properti text-decoration. berikut ke-3 value untuk text-decoration.

Daftar Tabel untuk Text-Decoration

No	Value	Deskripsi
1	text-decoration-line	mengatur garis yang digunakan menggunakan nilai seperti : none, underline, overline, dan line-through
2	text-decoration-color	mengatur warna garis dengan nama warna(red, black, dsb), Hex(#fff, #03c, dsb), rgb, hsl, dsb
3	text-decoration-style	mengatur gaya garis yang dibuat dengan nilai seperti : solid, wavy, dotted, dashed, double
4	initial	mengembalikan nilai properti ke default-nya
5	inherit	efek dari inherit menghasilkan nilai yang mengikuti induk(parent element)

Value text-decoration-line wajib digunakan, sedangankan text-decoration-color dan text-decoration-style bersifat optional. saya sendiri sering menggunakan text-decoration untuk menghapus garis bawah yang secara default ada pada link yang dibuat dengan nilai 'none'. berikut contoh kodenya.

contoh kode/program/sintaks css

<!DOCTYPE html>

<html>

<head>

<title>

contoh properti text-decoration

</title>

<style>

h1{

text-decoration

line-through solid red;

} h2{

text-decoration

underline overline;

} a{

color

#03c;

text-decoration

none;

}

</style>

</head>

<body>

<h1>

Gotutorid.com

</h1>

<h2>

Gotutorid.com

</h2>

klik disini

</a>

</body>

</html>

dari kode CSS diatas, dibawah ini jika ditampilkan pada halaman web.

Gambar 6

tex-indent merupakan properti CSS yang bisa digunakan untuk membuat baris pertama pada paragraf/kalimat menjorok kedalam. Dalam penulisan paragraf, baris pertama yang menjorok kedalam disebut dengan indentasi. Jadi, text-indent dibuat khusus untuk mengatur indentasi pada paragraf.

Value atau Nilai utama yang digunakan untuk properti text-indent yaitu ukuran dalam bentuk persen dan pixel, cm, pt, em, pc, dsb. Anda juga bisa menggunakan nilai initial dan inherit untuk properti text-indent. berikut contoh kode CSS dengan properti text-indent.

contoh kode/program/sintaks css

<!DOCTYPE html>

<html>

<head>

<title>

contoh properti text-indent

</title>

<style>

.px{

text-indent

50px;

} .persen{

text-indent

2%;

} .initial{

text-indent

initial;

}

</style>

</head>

<body>

</p>

</p>

</p>

</body>

</html>

dari kode CSS diatas, dibawah ini jika ditampilkan pada halaman web.

Gambar 7

seperti namanya, text-shadow merupakan properti CSS yang dibuat khusus untuk membuat dan mengatur bayangan pada teks. Jadi, misalkan properti tersebut digunakan pada judul artikel atau semacamnya, maka judul tersebut akan menampilkan efek bayangan.

Properti text-shadow berisi 3-4 Nilai sekaligus dalam satu deklarasi. Sintaks penulisannya seperti ini : text-shadow: val-1 val-2 val-3 val-4;. val-1 mengatur posisi bayangan horizontal, val-2 mengatur posisi bayangan vertical, val-3 mengatur keburaman(blur) bayangan.

Sedangkan val-4 bisa Anda isi dengan nilai berupa warna(color), misal red, hex, rgb(), hsl(), dsb. khusus untuk val-3 merupakan optional, jadi Anda tidak perlu menulis val-3 juga tidak masalah.

val-1, val-2, dan val-3 bisa Anda isi dengan nilai dalam bentuk ukuran(px,em,dsb). dan dibawah ini adalah contoh kode CSS.

contoh kode/program/sintaks css

<!DOCTYPE html>

<html>

<head>

<title>

contoh properti text-shadow

</title>

<style>

.bayangan1{

text-shadow

3px 3px 8px blue;

} .bayangan2{

text-shadow

3px 3px #FF0000;

}

</style>

</head>

<body>

Gotutorid.com

</h1>

Gotutorid.com

</h1>

</body>

</html>

dari kode CSS diatas, dibawah ini jika ditampilkan pada halaman web.

Gambar 8

text-transform merupakan properti CSS yang digunakan untuk mengatur penggunaan kapital pada teks. Artinya, Anda bisa merubah sebuah kalimat menjadi huruf besar semua walaupun tadinya Anda tulis dengan huruf kecil dan juga sebaliknya, bisa juga untuk merubah menjadi huruf kecil.

Properti text-transform memiliki 3 nilai utama antara lain : Capitalize, Uppercase, dan Lowercase. Capitalize merubah karakter pertama pada setiap kata menjadi huruf besar/kapital, Uppercase merubah semua karakter menjadi Besar, dan Lowercase merubah semua karakter menjadi kecil.

Selain ke-tiga nilai utama diatas, properti text-transform juga bisa Anda isi dengan Nilai none, initial, dan inherit. Untuk lebih jelasnya, dibawah ini saya sertakan contoh kode CSS dengan properti text-transform beserta nilai-nilainya.

contoh kode/program/sintaks css

<!DOCTYPE html>

<html>

<head>

<title>

contoh properti text-transform

</title>

<style>

.up{

text-transform

Uppercase;

} .low{

text-transform

Lowercase;

} .kapital{

text-transform

Capitalize;

}

</style>

</head>

<body>

Huruf pada kalimat ini akan menjadi huruf besar semua

</p>

HURUF PADA KALIMAT INI AKAN MENJADI HURUF KECIL SEMUA

</p>

huruf pertama pada tiap kata akan menjadi huruf Kapital

</p>

</body>

</html>

dari kode CSS diatas, dibawah ini jika ditampilkan pada halaman web.

Gambar 9

properti unicode-bidi pada CSS digunakan bersamaan dengan properti direction, sedangkan fungsinya untuk mengatur apakah teks harus diganti untuk mendukung banyak bahasa dalam satu dokumen yang sama.

Value atau nilai yang digunakan antara lain normal, embed, bidi-override. nilai defaultnya adalah normal, dan berikut contoh kodenya.

contoh kode/program/sintaks css

<!DOCTYPE html>

<html>

<head>

<title>

contoh properti Unicode-bidi

</title>

<style>

.bidi{

direction

rtl;

unicode-bidi

bidi-override;

}

</style>

</head>

<body>

<p>

</p>

</p>

</body>

</html>

dari kode CSS diatas, dibawah ini jika ditampilkan pada halaman web.

Gambar 10

sama seperti namanya, properti vertical-align digunakan untuk mengatur perataan secara vertical, yang diatur bisa berupa image, atau elemen-elemen inline.

Untuk menggunakan vertical-align perlu dipahami karena vertical-align hanya mengatur elemen sel tabel dan elemen inline. Sedangkan pada umumnya, elemen div atau elemen P yang sering digunakan merupakan elemen blok.

Value atau Nilai yang digunakan antara lain : baseline, sub, super, top, text-top, dsb. untuk selengkapnya bisa Anda lihat pada tabel dibawah ini.

Daftar Tabel untuk Vertical-Align

No	Value	Keterangan
1	baseline	elemen yang diatur disejajarkan dengan garis dasar induk. default value
2	sub	elemen yang diatur selaras dengan induk elemen secara subsript. elemen yang dihasilkan posisinya agak kebawah
3	super	elemen yang diatur selaras dengan induk elemen secara supersript. elemen yang dihasilkan posisinya agak keatas
4	text-top	elemen disejajarkan dengan font elemen induk pada bagian atas
5	text-bottom	elemen disejajarkan dengan font elemen induk pada bagian bawah
6	top	elemen diposisikan diatas pada elemen induknya
7	middle	elemen diposisikan ditengah pada elemen induknya
8	bottom	elemen diposisikan dibawah pada elemen induknya
9	px,em,cm,dsb	nilai berdasarkan ukuran yang digunakan misal 10px, 1em, 0.5cm, 1pt, dsb
10	%	mengatur perataan vertical berdasarkan nilai persen yang digunakan misal 45%, 50%, etc

dan dibawah ini adalah contoh kode CSS dengan properti vertical-align.

contoh kode/program/sintaks css

<!DOCTYPE html>

<html>

<head>

<title>

contoh properti vertical-align

</title>

<style>

div{

display

table;

width

300px;

height

300px;

border

1px solid black;

} h1{

display

table-cell;

vertical-align

middle;

text-align

center;

}

</style>

</head>

<body>

<div>

<h1>

kalimat ditengah elemen

</h1>

</div>

</body>

</html>

dari kode CSS diatas, dibawah ini jika ditampilkan pada halaman web.

Gambar 11

word-spacing adalah properti CSS yang dibuat khusus untuk mengatur jarak spasi antar kata. Jadi, kata pertama dan kata kedua yang Anda tulis bisa diatur jaraknya. word-sapcing berbeda dengan letter-spacing, dimana word-spacing mengatur jarak antar kata, sedangkan letter-spacing mengatur jarak antar huruf.

Value atau Nilai yang digunakan untuk properti word-spacing yaitu ukuran dalam bentuk px, em, pc, pt, cm, dsb. selain ukuran, Anda juga memberi nilai normal, initial, dan inherit. berikut contoh kodenya.

contoh kode/program/sintaks css

<!DOCTYPE html>

<html>

<head>

<title>

contoh properti word-spacing

</title>

<style>

.normal{

word-spacing

normal;

} .px{

word-spacing

10px;

} .em{

word-spacing

1em;

}

</style>

</head>

<body>

contoh word-spacing dengan nilai normal

</p>

contoh word-spacing dengan nilai pixel

</p>

contoh word-spacing dengan nilai em

</p>

</body>

</html>

dari kode CSS diatas, dibawah ini jika ditampilkan pada halaman web.

Gambar 12

Jika sebelumnya diatas membahas properti untuk mengatur jarak spasi antar kata, maka properti yang dibahas kali ini yaitu white-space atau ruang kosong, yaitu digunakan untuk mengatur jarak spasi secara keseluruhan pada paragraf yang diberi style white-space.

white space atau ruang kosong yang diatur antara lain : baris baru, spasi, tabs, text wrapping(pembungkus teks), dan white space diakhir baris. berikut value yang digunakan untuk properti white-space.

Daftar Tabel untuk White-Space

No	Value	Keterangan
1	normal	default value
2	nowrap	garis baru diatur ulang/collapse, spasi dan tab diatur ulang/collapse, text wrapping 'tidak', dan spasi diakhir baris dihilangkan.
3	pre	garis baru dipertahankan, spasi dan tab dipertahankan, text wrapping 'tidak', dan spasi diakhir baris dipertahankan.
4	pre-wrap	garis baru dipertahankan, spasi dan tab dipertahankan, text wrapping 'iya', dan spasi diakhir baris.
5	pre-line	garis baru dipertahankan, spasi dan tab diatur ulang/collapse, text wrapping 'iya', dan spasi diakhir baris dihilangkan.

sama seperti properti-properti sebelumnya, properti white-space juga bisa menggunakan nilai initial dan inherit. dan dibawah ini contoh kode CSS dengan properti white-space.

contoh kode/program/sintaks css

<!DOCTYPE html>

<html>

<head>

<title>

contoh properti white-space

</title>

<style>

div{

border

1px solid black;

width

300px;

padding

3px;

margin

3px;

} .normal{

white-space

normal;

} .pre{

white-space

pre;

} .nowrap{

white-space

nowrap;

}

</style>

</head>

<body>

<div>

</p>

</div>

<div>

</p>

</div>

<div>

</p>

</div>

</body>

</html>

dari kode CSS diatas, dibawah ini jika ditampilkan pada halaman web.

Gambar 13

Properti word-wrap digunakan untuk melakukan pemotongan pada kata yang sangat panjang dan memindahnya ke baris baru. value atau nilai yang digunakan yaitu normal dan break-word. dan dibawah ini adalah contoh kodenya.

contoh kode/program/sintaks css

<!DOCTYPE html>

<html>

<head>

<title>

contoh properti word-wrap

</title>

<style>

div{

border

1px solid black;

width

150px;

padding

3px;

margin

3px;

} .normal{

word-wrap

normal;

} .break{

word-wrap

break-word;

}

</style>

</head>

<body>

<div>

terdapat kata panjang tanpa spasi yaitu "katayangsangatpanjangtanpaspasi" dan diatur dengan nilai normal

</p>

</div>

<div>

terdapat kata panjang tanpa spasi yaitu "katayangsangatpanjangtanpaspasi" dan diatur dengan nilai break-word

</p>

</div>

</body>

</html>

dari kode CSS diatas, dibawah ini jika ditampilkan pada halaman web.

Gambar 14

Elemen apa yang digunakan untuk menurunkan sebuah paragraf adalah

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social