Property dan value yang akan kita pelajari kali ini adalah text.
TEXT (property: value)
letter-spacing jarak antar huruf
line-height jarak antar baris
text-align alignment (center, justify, left, right)
text-decoration blink, line-through, none, overline, underline
text-indent first line indentation
text-transform capitalize, lowercase, uppercase
vertical-align vertical alignment
word-spacing jarak antar kata
Letter spacing adalah jarak antar huruf. Misalnya:
H A L O I N I B L O G S A Y A
HALO INI BLOG SAYA
Line height adalah jarak antar baris. Misalnya:
Halo nama saya uli.
Umur saya tiga belas tahun.
Jarak antar baris saya besar sekali.
Text align adalah alignment, macam left, right, center, dan justify di Microsoft Word. Nggak usah pakai contoh deh, pasti sudah tahu, kan :D
Text decoration adalah hiasan teks kamu. Misalnya blink (kedip-kedip) line-through (kayak kecoret), none (nggak pakai dekorasi apapun), overline (garis atas), underline (garis bawah).
Text-indent itu macam first line indent di Microsoft Word. Tapi property ini jarang digunakan kok, sampai sekarang saya belum ketemu contoh yang konkrit.
Text-transform, sesuai namanya, adalah transformasi teks. Capitalize (Huruf Kapital Tiap Awal Kata), lowercase (huruf kecil semua), uppercase (HURUF BESAR SEMUA).
Vertical align, saya juga belum pernah ketemu contoh yang konkrit. Jadi saya belum bisa kasih tahu contohnya gimana. Maaf ya :D
Word-spacing itu jarak antar kata. Misalnya:
Halo nama saya Uli.
Sudah ngerti sekarang? Kita coba yuk! Hohoho. Gimana kalau langsung kita gabung sama pelajaran kita minggu lalu? Sip ya? Sip dong hehehe.
Contoh kode:
<html>
<head>
<title>TEST</title>
<style type="text/css">
h1 {
font-style: italic;
font-weight: bold;
font-family: Century Gothic;
font-size: 32 pt;
color: #ff0022;
letter-spacing: 2px;
text-align: center;
text-decoration: overline;
text-transform: uppercase;
}
</style>
</head>
<body>
<h1>Somehow it was Ended Like This</h1>
</body>
</html>
Yup, kita selesai coding. Kita coba yuk! Kalau kamu melakukannya dengan baik maka hasilnya akan seperti ini (image resized):
Taaa-raaaaah! Lebih keren kan? Coba kamu bandingkan yang saya tulis 'Somehow it was Ended Like This' dengan hasil yang ditunjukkan. Apa ada yang beda? Kalau kamu bisa menjawab, berarti kamu sudah mengerti property bagian ini. Keep learning!
0 komentar:
Posting Komentar