Belajar Css Dasar # Font & Text Styling

Daftar Isi : [Tampil]

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

• px
• %
• em

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

• normal
• italic
• oblique

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.

• 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

• px
• %
• in

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

• normal
• px

Seperti contoh :

    p {
        letter-spacing: normal;
        letter-spacing: 5px;
    }
    

g. word-spacing

Digunakan untuk mengatur spasi antar kata, value-nya adalah

• normal
• px

Seperti contoh :

    p {
        word-spacing: normal;
        word-spacing: 5px;
    }