Font HTML dan CSS

Tag dalam HTML sudah disingkirkan, kemungkinan akan dihilangkan pada versi HTML

mendatang. Walaupun banyak orang yang menggunakannya, Anda harus menghindarinya,

gunakan style sebagai gantinya.

Menggunakan Tag HTML

Dengan kode berikut, Anda dapat menspesifikasikan ukuran dan jenis dari output browsernya:

Menggunakan Font Size

Contoh ini mendemonstrasikan bagaimana mengubah ukuran font.

Font Sebaiknya Jangan Digunakan

Tag disisihkan pada versi HTML terakir (HTML 4 dan XHTML). W3C telah membuang tag

dari rekomendasinya. Pada versi HTML mendatang, style sheet (CSS) akan digunakan untuk

mendefinisikan properti layout dan display elemen HTML. Berikut ini contoh style sheet (CSS).

TH {background-color : Aqua; font: italic fantasy;}

H1{color : Gray;}

BODY{background-color : Silver;}

Menggunakan Font Face

Contoh ini mendemostrasikan bagaimana mengubah face (betuk) font.

Menggunakan Font Color

Contoh ini mendemostrasikan bagaimana mengubah warna font.

CSS merupakan singkatan dari Cascade Style Sheet, merupakan features baru dari HTML 4.0. Hal

ini diperlukan setelah melihat perkembangan HTML menjadi kurang praktis karena web pages

terlalu banyak dibebani hal-hal yang berkaitan dengan faktor penampilan seperti font dan lain-

lain.

Untuk itu , jika kumpulan style tersebut dikelola secara terpisah maka manajemen pages menjadi

lebih mudah dan efisien. Pada prakteknya, penggunaan CSS ini didukung oleh Explorer dan

Navigator, dua browser terpopuler pada internet.

Aturan Penggunaan CSS

Secara umum disusun oleh tiga bagian yaitu, selector (elemen yang akan didefiniskan), properti

(atribut yang kan diubah) dan nilai sebagaimana berikut:

Selector {property: value}

Antara property dan nilai dipisahkan dengan titik dua (colon) seperti contoh di bawah ini:

Body {color: black}

Jika nilai berupa beberapa kata, digunakan tanda petik ganda

P {font-family: sans serif}

Jika lebih dari satu properti, pisahkan dengan titik-koma (semi colon)

P {text-align: center; color: red}

Jika ingin lebih mudah dibaca sebagaimana berikut:

P

{

text-align: center; color: red;

color: black;

font-family: arial

}

Jika selector dikelompokkan

H1, H2, H3, H4, H5, H6

{

color: green;

}

Jika selector dikelompokkan

P. Kanan {text-align: right}

P. Kiri {text-align: center}

Jika selector dikelompokkan

This Paraghraph will be right aligned

This Paraghraph will be center aligned

Jika menggunakan ID atribut

#Kanan {text-align: right}

Berikut ini sintaks yang ditulis dalam dokumen html menggunakan definisi ID atribut di atas.

This Paraghraph will be right aligned

This Headder will be right aligned

Style Sheet External

Berikut ini contoh menggunakan style sheet yang didefinisikan secara eksternal, di mana ex1.css

digunakan oleh Coba_cssex1.html. Ingat dalam penddefinisian external tidak diperlukan tag html.

Dan extension filenya harus disimpan dalam .css.

Listing ex1.css

Berikut ini contoh menggunakan style sheet yang didefinisikan secara external, di mana ex2.css

digunakan oleh Coba_cssex2.html.

Style Sheet Internal

Berikut ini contoh menggunakan style sheet yang didefinisikan secara internal. Hal ini biasanya

dilakukan karena web page tertentu bersifat sangat unik sehingga membutuhkan definisi terpisah

dibandingkan dengan web page lainnya.

Listing ex2.css

Jika browser versi lama tidak mendukung style, akan lebih aman jika kita menggunakan tag

komentar untuk menutupi bagian yang tidak dikenal sebagaimana berikut:

Style Sheet Inline

Suatu style inline hanya bias digunakan pada lokasi yang sangat spesifik, sebenarnya penggunaan

dengan cara yang seperi ini walaupun bias dilakukan tetapi tidak dianjurkan. Hal ini disebabkan

dokumen menjadi leih besar karena style didefinisikan saru per satu sebagaimana berikut ini.

Multy Style Sheet

Jika digunakan lebih dari satu definisi dari style sheet maka nilai yang tidak didefinisikan akan

diinherit (diturunkan) dari style sheet yang lebih general. Misalnya di bawah ini kita mempunyai

definisi ex3.css.

Listing ex3.css

Perhatikan bahwa hasil di bawah ini menggunakan align dan size dari definisi tetapi menggunakan

warna dari definisi external.

Font Attributes:

Attribute Example Purpose size=number size=2 Mendefinisikan ukuran huruf size=+number size=+1 Menambahkan ukuran huruf size=-number size=-1 Menurunkan ukuran huruf face=face-name face=Calibri Mendefinisikan jenis huruf

color=color-value color=#eeff00 Mendefinisikan warna huruf

color=color-name Color=red Mendefinisikan waena huruf

Background Properties:

Properties Values Background Background-color Background-attachment

Background-image

Background-position

Background-repeat

Background-attachment Scroll

Fixed

Background-color Color-rgb

Color-hex

Color-name

Transparent

Background-image url None

Background-position Top left

Top center

Top right

Center left

Center center

Center right

Bottom left

Bottom center

Bottom right

x-% y-%

x-pos y-pos

Background-repeat Repeat

Repeat-x

Repeat-y

No-repeat

Text Properties:

Properties Values Color Background-color Letter-spacing Normal Lenght

Text-align Left

Right

Center

Justuify

Text-decoration None

Underline

Overline

Line-throught

Blink

Text-indent Lenght %

Text-transform None

Capitalize

Uppercase

Lowercase

White-space Normal

Pre

Nowrap

Word-spacing Normal

Left