Format Css Pada Teks

Format CSS Pada Teks
1. Color
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.
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%).
<!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>
<div class="hex"> Huruf pada Kalimat ini Akan Berwarna Merah </div>
<div class="rgb"> Sedangkan pada Kalimat kedua ini Akan Berwarna Hijau </div>
<div class="hsl"> dan Kalimat yang Terakhir ini Akan Berwarna Biru </div>
</body>
</html>
2. Direction
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.
<!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>
<p class="ltr"> Kalimat ini Akan diatur dengan nilai LTR </p>
<p class="rtl"> Kalimat ini Akan diatur dengan nilai RTL </p>
<p class="initial"> 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.
3. Letter-Spacing
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.
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.
<!DOCTYPE html>
<html>
<head>
<title> contoh properti letter-spacing </title>
<style>
.normal{
letter-spacing: normal;
}
.px{
letter-spacing: 5px;
}
</style>
</head>
<body>
<p class="normal">
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 class="px">
</p>
</body>
</html>
4. Line-Height
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.
<!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 class="px">
</p>
<p class="normal">
</p>
<p class="angka">
</p>
</body>
</html>
5. Text-Align
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.
<!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 class="kiri">
</p>
<p class="kanan">
</p>
<p class="tengah">
</p>
</body>
</html>
6. Text-Decoration
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.
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.
<!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>
<a href=""> klik disini </a>
</body>
</html>
7. Text-Indent
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.
<!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 class="px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
</p>
<p class="persen">
</p>
<p class="initial">
</p>
</body>
</html>
8. Text-Shadow
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.
<!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>
<h1 class="bayangan1"> Gotutorid.com </h1>
<h1 class="bayangan2"> Gotutorid.com </h1>
</body>
</html>
9. Text-Transform
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.
<!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>
<p class="up"> Huruf pada kalimat ini akan menjadi huruf besar semua </p>
<p class="low"> HURUF PADA KALIMAT INI AKAN MENJADI HURUF KECIL SEMUA </p>
<p class="kapital"> huruf pertama pada tiap kata akan menjadi huruf Kapital </p>
</body>
</html>
10. Unicode-Bidi
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.
<!DOCTYPE html>
<html>
<head>
<title> contoh properti Unicode-bidi </title>
<style>
.bidi{
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
</p>
<p class="bidi">
</p>
</body>
</html>
11. Vertical-Align
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.
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
No Value Keterangan
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.
<!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>
12. Word-Spacing
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.
<!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>
<p class="normal"> contoh word-spacing dengan nilai normal </p>
<p class="px"> contoh word-spacing dengan nilai pixel </p>
<p class="em"> contoh word-spacing dengan nilai em </p>
</body>
</html>
13. White-Space
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.
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.
<!DOCTYPE html>
<html>
<head>
<title> contoh properti white-space </title>
<style>
div{
width: 300px;
padding: 3px;
margin: 3px;
}
.normal{
white-space: normal;
}
.pre{
white-space: pre;
}
.nowrap{
white-space: nowrap;
}
</style>
</head>
<body>
<div>
<p class="normal">
</p>
</div>
<div>
<p class="pre">
</p>
</div>
<div>
<p class="nowrap">
</p>
</div>
</body>
</html>
14. Word-Wrap
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.
<!DOCTYPE html>
<html>
<head>
<title> contoh properti word-wrap </title>
<style>
div{
width: 150px;
padding: 3px;
margin: 3px;
}
.normal{
word-wrap: normal;
}
.break{
word-wrap: break-word;
}
</style>
</head>
<body>
<div>
<p class="normal">
terdapat kata panjang tanpa spasi yaitu
"katayangsangatpanjangtanpaspasi" dan diatur dengan nilai normal
</p>
</div>
<div>
<p class="break">
terdapat kata panjang tanpa spasi yaitu
"katayangsangatpanjangtanpaspasi" dan diatur dengan nilai break-word
</p>
</div>
</body>
</html>

Format Css Pada Teks

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Format Css Pada Teks

Diunggah oleh

Hak Cipta:

Format Tersedia

Format CSS Pada Teks

Anda mungkin juga menyukai