MENGATUR FORMAT TEXT DENGAN CSS
Pada tutor kali ini akan dijelaskan bagaimana cara mengatur format text dengan tujuan agar text dapat kita atur sesuai dengan keinginan kita dan kebutuhan kita. Contohnya untuk mengatur text menjadi justify atau kita kenal dengan sebutan rata kiri rata kanan, mengatur jarak indent text, mengatur huruf menjadi uppercase atau huruf besar, huruf kecil, warna text dan juga mengatur dekorasi atau design pada text. Silahkan simak penjelasanya berikut untuk mengatur format text
Adapun syntax yang digunakan untuk mengatur format text diantaranya :
- color : Berfungsi untuk mengatur warna text value dapat diisi dengan nama warna atau kode warna
- text-align : Digunakan untuk mengatur align atau rata text, value yang bisa diisi diantaranya adalah left untuk mengatur text rata kiri, right untuk mengatur text rata kanan, center untuk mengatur text rata tengah, justify untuk mengatur text rata kanan dan rata kiri
- text-decoration : Digunakan untuk mengatur dekorasi text, value yang bisa diisi diantaranya adalah none agar text tidak memiliki dekorasi, overline untuk memberikan garis diatas text, line-trough untuk membuat garis yang mencoreng pada text, dan underline untuk membuat garis bawah pada text
- text-transform : Digunakan untuk mengatur huruf kapital pada text, valuenya diantara lain uppercase untuk membuat text menjadi huruf besar, lowercase untuk membuat text menjadi huruf kecil, dan capitalize untuk membuat semua huruf awal pada tiap kata menjadi huruf besar
- text-indent : Untuk mengatur jarak alinea pada text, valuenya dapat diisi dengan nilai pixel atau yang lain sesuai kebutuhan
- text-spacing : Untuk mengatur jarak antar karakter pada text, valuenya dapat diisi nilai pixel
- word-spacing : Untuk mengatur jarak antar kata pada text, valuenya dapat diisi dengan nilai pixel
- line-height : Untuk mengatur ajrak antar baris pada text valuenya dapat diisi dengan nilai pixel
- text-shadow : Digunakan untuk mengatur efek bayangan pada text, value pertama diisi dengan jarak pixel kiri kanan, kedua jarak pixel atas bawah, ketiga mengatur ketebalan bayangan dan keempat mengisi warna. Untuk contoh penulisanya 2px 3px 2px black
- vertical-align : Digunakan untuk mengatur align dalam bentuk vertikal pada text, value yang digunakan adalah left untuk mengatur text rata kiri, right mengatur text rata kanan, center mengatur text rata tengah
CONTOH CARA MENGATUR FORMAT TEXT CSS
Akan saya contohkan bagaimana cara mengatur format text dengan CSS. Ketik script dibawah usahak jangan Copas agar sobat bisa paham dengan kode syntaxnya
index.html
<!DOCTYPE html>
<html>
<head>
<title>Format text CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p class="tulisan_satu">Mengatur format text dengan CSS</p>
<p class="tulisan_dua">Mengatur format text dengan CSS</p>
<p class="tulisan_tiga">Mengatur format text dengan CSS</p>
<p class="tulisan_empat">
Belajar tutorial CSS dasar di Script Kiddies
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. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
style.css
.tulisan_satu{
color: blue;
text-align: left;
text-decoration: underline;
}
.tulisan_dua{
text-align: right;
text-transform: capitalize;
text-decoration: overline;
text-shadow: 3px 3px 3px black;
}
.tulisan_tiga{
text-align: center;
text-transform: lowercase;
text-decoration: line-through;
word-spacing: 10px;
}
.tulisan_empat{
text-transform: uppercase;
text-indent: 25px;
line-height: 25px;
letter-spacing: 3px;
}
 |
| Hasilnya seperti ini |
Untuk mengatur sebuah format text saya rasa tidak terlalu susah tetapi membutuhkan kreatifitas dan pemahaman. Dapat kita lihat pada script diatas fungsi dari tiap kode syntax dan valuenya. Jika ada kesulitan silahkan berikan komentar, Sekian Terima Kasih
Referensi : Malas Ngoding
TUTORIAL CSS LAINYA
- Belajar CSS Part 1 : Pengertian dan Mengenal CSS
- Belajar CSS Part 2 : Cara Penulisan CSS
- Belajar CSS Part 3 : Mengubah Background Dengan CSS
- Belajar CSS Part 4 : Margin dan Padding CSS
- Belajar CSS Part 5 : Mengatur Font Dengan CSS
- Belajar CSS Part 6 : Mengatur Hyperlink Dengan CSS
- Belajar CSS Part 7 : Mengatur Format Text Dengan CSS
- Belajar CSS Part 8 : Mengenal Position CSS
- Belajar CSS Part 9 : Mengatur Border Dengan CSS
- Belajar CSS Part 10 : Mengatur List Dengan CSS
- Belajar CSS Part 11 : Mengatur Float Dengan CSS
EmoticonEmoticon