SleepingCodings - Format Text, Format text di sini akan Author jelaskan tentang penggunaannya ketika menggunakan CSS untuk mengatur atau memodifikasi text dengan tujuan agar Format Text dapat menjadi seperti yang kita inginkan dan terlihat menarik ketika di website nanti.
Adapun beberapa syntax CSS yang bisa di gunakan untuk mengatur Format Text di antaranya adalah :
1. Color
Color di gunakan untuk mengatur atau mengubah warna text, value dapat di isi berupa warna atau kode warna.
2. Text-Align
Text-Align di gunakan untuk mengatur posisi text atau rata text, value yang tersedia adalah center untuk membuat text rata tengah, left untuk membuat text rata kiri, right untuk membuat text rata kanan, justify untuk membuat text rata kanan dan kiri.
3. Text-Decoration
Text-Decoration di gunakan untuk mengatur dekorasi text, valuenya berupa none untuk membuat text tidak memiliki dekorasi, overline untuk membuat text memiliki garis pada bagian atas text, line-through untuk membuat garis yang mencoreng pada text, dan underline untuk membuat garis pada bawah text(garis bawah).
4. Text-Transform
Text-Transform di gunakan untuk mengatur huruf kapital pada text, value yang bisa di gunakan diantaranya adalah uppercase untuk membuat text menjadi huruf besar, lowercase untuk membuat text menjadi huruf kecil, dan capitalize untuk membuat huruf awal pada tiap kata menjadi huruf besar.
5. Text-Indent
Text-Indent digunakan untuk mengatur jarak alinea pada text, value yang bisa di gunakan berupa nilai pixel dan lainnya.
6. Text-Spacing
Text-Spacing digunakan untuk mengatur jarak antar karakter pada text, value yang di isi berupa nilai pixel dan lainnya.
7. Word-Spacing
Word-Spacing digunakan untuk mengatur jarak antar kata pada text, value yang di isi juga berupa nilai pixel.
8. Line-Height
Line-Height digunakan untuk mengatur jarak antar baris pada text, value yang di isi berupa nilai.
9. Text-Shadow
Text-Shadow digunakan untuk mengatur efek bayangan pada text, value yang dapat di isikan pertama kita mengisi nilai untuk jarak kiri kanan, dan kedua mengisi jarak atas bawah dan yang ketiga kita mengisi warnanya, nah sekedar contoh 2px 5px purple.
10. Vertical-Align
Vertical-Align digunakan untuk mengatur align dalam bentuk vertikal pada text value yang digunakan adalah left untuk membuat text rata kiri, right untuk membuat text rata kanan, dan center untuk rata tengah.
Nah, contoh cara mengubah warna text dan mengatur format text, namun sebelum itu temen" siapkan file index.html (htmlnya), dan file style.css (untuk cssnya). Nah HTML untuk membuat kerangka awalnya, sedangkan CSSnya berguna untuk memperbaiki dan mempercantik tampilan dari kerangka tersebut agar HTML lebih terlihat menarik.
BELAJAR CSS MENGATUR FORMAT TEXT DENGAN CSS
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">Text ini Berformat Text Garis Bawah & Berwarna Biru</p>
<p class="tulisan_dua">Belajar membuat Format Text Garis Atas & Huruf kapital</p>
<p class="tulisan_tiga">Text di buat seperti dicoret</p>
<p class="tulisan_empat"> Belajar tutorial CSS dasar di www.malasngoding.com. Mengatur format text dengan CSS. belajar HTML dasar di www.malasngoding.com. 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-decoration: underline;
}
.tulisan_dua{
text-align: right;
text-transform: capitalize;
text-decoration: overline;
}
.tulisan_tiga{
text-align: center;
text-transform: lowercase;
text-decoration: line-through;
word-spacing: 10px;
}
.tulisan_empat{
text-transform: uppercase;
text-indent: 30px;
line-height: 30px;
letter-spacing: 5px;
}
Jika di jalankan di web browser :
 |
| Gambar 1.1 Mengatur Format Text dg CSS sleeping-codings.blogspot.co.id |
Nah, jadi dari contoh di atas pastinya temen" udah mengertikan, apa saja kegunaan dari setiap property, dan apa yang saja yang akan di isikan di valuenya.
KESIMPULAN
Nah, kesimpulannya untuk Tutorial kali ini yaitu temen" itu tidak perlu pusing terhadap script/coding yang ada, yang perlu temen" lakukan adalah memraktekkan Tutorial yang temen" punya dan mengulanginya sampai paham atas kegunaan- kegunaannya, dari 10 format text pastinya sangat mudah kalau temen" implementasikan dan praktekan jika temen" ingin paham, intinya coba dulu, kalau gagal atau pusing cari Referensi lain yang dapat menyembuhkan kepusingan dan tidak kepahaman temen".
No comments:
Post a Comment