X
    Categories: HTML

Properti CSS (Font)

Ads

CSS font adalah  properti dari CSS untuk mengatur huruf yang akan ditampilkan dihalaman blog kita.Ada bermacam macam value yang bisa kita berikan.Kita contohkan dasar-dasar CSS font yang paling banyak dipakai yaitu;

font-color
Untuk mengatur warna  huruf yang kita inginkan.
Untuk menentukan value atau warna sebaiknya kita berpedoman kepada tabel warna HTML,jika menginginkan warna yang lengkap.
Kode warna bisa ditulis dengan model hexadecimal,RGB ataupun kata.

Contoh  penulisan warna(value);

RGB :rgb(20,43,234)
HEX : #FF000
KATA : RED

Contoh penulisan;

p{font-color: #FF0000}

Contoh penampakan;

Ini adalah contoh warna #FF0000

font-family
untuk menampilkan jenis-jenis font yang ingin kita pakai,valuenya adalah dari macam macam jenis huruf,ini beberapa contohnya;

Value
verdana
arial
sans-serif
georgia
dll

Contoh penulisan;

p{font-family: verdana}
p{font-family: arial}

Contoh penampakan;

Ini adalah font family verdana
Ini adalah font family arial

font-size
Untuk mengatur ukuran dari huruf
Value yang bisa kita masukkan disebut satuan,kita bisa menggunakan satuan ukuran;
Value
pixel (px)
point (pt)
Em (em)
inch (in)
persen (%)
Satuan px,pt dan in adalah satuan absolut artinya memiliki ukuran yang bersifat tetap.
Satuan em dan % (persen) bersifat relatif,atau dinamis yang artinya menyesuaikan dengan konfigurasi user.Em adalah satuan yang menyesuaikan dengan ukuran default font browser,sedangkan % itu menyesuaikan dengan resolusi dari monitor atau layar.
Bisa juga dengan perintah kata,misalnya large,small ataupun x-large.Ini bersifat relatif ,menyesuaikan dengan monitor perangkat yang dipakai.
Contoh penulisan;
p{font-size: 12px}
p{font-size: 1.2em}
p{font-size: 12pt}
p{font-size: 0.1in}
p{font-size: 95%}
p{font-size: small}
p{font-size: large}
p{font-size: x-large}

Contoh penampakan;

ini adalah contoh ukuran
ini adalah contoh ukuran
ini adalah contoh ukuran
ini adalah contoh ukuran

font-weight
Untuk menentukan apakah huruf dibikin tebal atau normal
value
bold ,,jika menginginkan huruf menjadi tebal
normal ,jika menginginkan huruf normal.Hanya perlu ditulis jika ini adalah elemen turunan dan induknya menggunakan font-weight :bold,tetapi kita menginginkan huruf normal pada elemen ini)
Contoh penulisan;

p{font-weight: bold}

Contoh penampakan;

Ini adalah contoh font-weight: bold

font-style
Sesuai dengan namanya,yaitu style alias gaya dari huruf
Value yang umum dipakai adalah italic atau oblique,kayaknya hanya persamaan kata saja.
Contoh penulisan:

p{font-style: italic}
p{font-style: oblique}

Contoh penampakan
Ini adalah font italic
Ini adalah font oblique

text-decoration
Text-decoration hampir sama dengan font style,yaitu hanya untuk menambahkan  semacam efek pada kata.
Value
underline,jika menginginkan sebuah kata / huruf  memakai garis bawah.
blink,jika menginginkan kata atau huruf berkedip kedip.
strike,jika ingin memberi garis coret pada text
noneJika tidak menginginkan sebuah decoration pada sebuah elemen,dengan asumsi selector yan berada diatas elemen ini menggunakan properti text-decoration .

Contoh penulisan;

p{text-decoration: none}
p{text-decoration: underline}
p{text-decoration: blink}
p{text-decoration: strike}

Contoh penampakan

Ini adalah text-decoration underline

text-align
Berfungsi untuk mengatur posisi kata/huruf
Value
left ,adalah rata kiri
right,adalah rata kanan
center,adalah berada ditengah
justify ,rata kiri dan kanan

Contoh penulisan;

p{text-align: left}
p{text-align: right}
p{text-align: center}
p{text-align: justify}



Contoh penampakan

Ini adalah rata kiri(text-align: left)

Ini adalah rata kanan(text-align:right)

Ini adalah tengah(text-align : center)

 

Ini adalah tengah(text-align : justify)Ini adalah tengah(text-align : justify)Ini adalah tengah(text-align : justify)Ini adalah tengah(text-align : justify)



Text-transform
Ini berfungsi untuk merubah model huruf
Value
uppercase,jika menginginkan huruf balok/besar semua,walau tulisan diketik dengan huruf biasa.
none,jika tidak menginginkan fungsi ini.

Contoh penulisan;

p{text-transform: uppercase}
p{text-transform: none}

Contoh penampakan;

INI ADALAH CONTOH DARI TEXT-UPPERCASE

Segitu dulu untuk dasar CSS font dan penjelasan secara singkat.

Artikel di Update pada Februari 17, 2021 12:00 pm

Ads
Ed:
Ads

Website ini menggunakan kukis

Baca selengkapnya
Ads