1. Font Styling
Yang termasuk properti Font Styling adalah sebagai berikut.
- font-family
- font-size
- font-weight
- font-variant
- font-style
- line-height
a. font-family
Digunakan untuk mengubah jenis font, value-nya adalah
- family-name (nama font), generic-family (keluarga font)
Seperti contoh :
body {
font-family: arial, verdana, sans-serif;
}
generic-family : sans-serif (huruf berkaki), serif (huruf tanpa kaki) untuk lebih jelasnya googling sendiri.
b. font-size
Digunakan untuk mengubah ukuran font, value-nya adalah
Seperti Contoh :
h1 {
font-size: 32px;
font-size: 200%;
font-size: 2em;
}
c. font-weight
Digunakan untuk mengatur ketebalan font, value-nya adalah
- lighter
- normal
- 1-900
- bold
- bolder
Seperti Contoh :
body {
font-weight: lighter;
font-weight: normal;
font-weight: 500;
font-weight: bold;
font-weight: bolder;
}
d. font-variant
Digunakan untuk mengubah font menjadi normal atau kapital, value-nya adalah
- normal
- small-caps (huruf kecil menjadi huruf kapital)
Seperti Contoh :
h1 {
font-variant: normal;
font-variant: small-caps;
}
e. font-style
Digunakan untuk mengubah font, value-nya adalah
italic dan oblique sama-sama miring dan perbedaannya adalah klik disini. Seperti contoh :
body {
font-style: normal;
font-style: italic;
font-style: oblique;
}
f. line-height
Digunakan untuk mengatur tinggi spasi, value-nya adalah normal, px, em.
body {
line-height: normal;
line-height: 15px;
line-height: 1.1em;
}
1.1 Font Shorthand
Digunakan untuk menyingkat penulisan css font. Seperti contoh :
2. Text styling
Yang termasuk properti Text Styling adalah sebagai berikut.
- color
- text-allign
- text-indent
- text-decoration
- text-transform
- letter-spacing
- word-spacing
a. color
Digunakan untuk memberi warna pada teks, value-nya adalah
- Nama Warna
- Hexadecimal
- RGBA (Red, Green, Blue, Alpha [opasitas 1-0] )
Seperti Contoh :
body {
color : red/green/blue/etc;
color : #ff0000/#008000/#0000ff/etc;
color : rgba(255,0,0,1)/etc;
color : rgba(255,0,0,0)/etc;
}
b. text-align
Digunakan untuk mengatur rata teks/paragraf, value-nya adalah
- left (rata kiri)
- center (rata tengah)
- right (rata kanan)
- justify (rata kiri-kanan)
Seperti Contoh :
body {
text-align : left;
text-align : center;
text-align : right;
text-align : justify;
}
c. text-indent
Digunakan untuk memberi indentasi pada teks/paragraf, value-nya adalah
Seperti contoh :
p {
text-indent: 50px;
text-indent: 10%;
text-indent: 1.5in;
}
d. text-decoration
Digunakan untuk mengatur dekorasi pada teks/paragraf, value-nya adalah
- none
- underline (garis bawah)
- overline (garis atas)
- line-through (garis tengah/tercoret)
Seperti contoh :
a {
text-deciration: none;
text-deciration: underline;
text-deciration: overline;
text-deciration: line-through;
}
e. text-transform
Digunakan untuk mengubah jenis huruf kecil atau besar, value-nya adalah
- none
- lowercase (huruf kecil)
- uppercase (huruf besar)
- capitalize (huruf kapital)
Seperti contoh :
h1 {
text-transform: none;
text-transform: lowercase;
text-transform: uppercase;
text-transform: capitalize;
}
f. letter-spacing
Digunakan untuk mengatur spasi antar huruf, value-nya adalah
Seperti contoh :
p {
letter-spacing: normal;
letter-spacing: 5px;
}
g. word-spacing
Digunakan untuk mengatur spasi antar kata, value-nya adalah
Seperti contoh :
p {
word-spacing: normal;
word-spacing: 5px;
}
