Headlines News
Home » , » Tutorial Style Pada CSS

Tutorial Style Pada CSS


Mencoba Berbagai Kemungkinan Pada CSS

Hmm, kita telah mempelajari ketentuan huruf pada CSS pada tutorial sebelumnya dan bagaimana mengubahnya sehingga kita mendapati beberapa variasi huruf. Dus, contoh di bawah ini tidak ada yang istimewa tetapi 'ntar saya tunjukkan perbedaannya.


<HTML>
<HEAD>
<STYLE TYPE="text/css">
P {font-family: "Verdana"}
</STYLE>
</HEAD>
<BODY>
<P CLASS="tanya">
P: Mengapa jika kita anggap suatu pekerjaan itu mudah
maka pekerjaan itu akan beneran menjadi lebih mudah?
<P CLASS="jawab">
J: Karena itu merupakan sugesti terhadap diri kita sendiri
</BODY>
</HTML>

Anda mungkin sudah tahu jika huruf yang ingin ditampilkan tidak ada dalam font-properties di komputer client, maka browser akan menampilkan default-font (biasanya Times New Roman). Dan disinilah CSS mendapat nilai lebih, karena dengan menggunakan CSS kita dapat mencoba berbagai kemungkinan huruf pada tag <FONT>. - CSS mengijinkan anda untuk membuat lebih dari satu kemungkinan sebagai alternatif font.

P {font-family: "Verdana", "Arial", "Arial Black"} /* first try Verdana, then Arial, then Arial Black */ Sudah mengerti kan? Jika font dengan type verdana tidak dijumpai, maka type arial lah yang digunakan. Tetapi jika type arial ini juga tidak ada maka CSS akan memilih alternatif ketiga yaitu arial black.

Anda juga punya sejumlah pilihan untuk menentukan ukuran dari font. Karena CSS juga mempunyai "font-size" properties yang dapat dipakai untuk berbagai jenis tampilan huruf. Sequence? Ya bener berdasarkan urutan!.

Pertama sekali yang paling penting saya jabarkan adalah penggunaan salah satu dari tujuh nilai dasar
berikut : "xx-small", "x-small", "small", "medium", "large", "x-large" and "xx-large". Coba contoh ini
untuk memahirkan :

<HTML>
<HEAD>
<STYLE TYPE="text/css">
.tanya {font-size: xx-small}
.jawab {font-size: x-large}
</STYLE>
</HEAD>
<BODY>
<P CLASS="tanya">
P: Mengapa jika kita anggap suatu pekerjaan itu mudah
maka pekerjaan itu akan beneran menjadi lebih mudah?
<P CLASS="jawab">
J: Karena itu merupakan sugesti terhadap diri kita sendiri
</BODY>
</HTML>

Kemudian kita juga dapat menambahkan atribut "larger" atau "smaller" kedalam kondisinya.

.tanya {font-size: larger} /* ukuran huruf akan lebih besar dari huruf parent */
.tanya {font-size: smaller} /* ukuran huruf akan lebih kecil dari huruf parent */

Juga, kita dapat mengubah dengan menentukan "point" atau "nilai persen". Supaya tidak
bingung dicoba aja contoh berikut (saya hanya ngasih petunjuknya saja) :

.tanya {font-size: 16pt} /* ukuran dengan 16 point */
.tanya {font-size: 300%} /* ukuran font diubah hingga tiga kali lebih besar */

Menambahkan Sedikit Style

Kita juga dapat menambah sedikit style pada teks dengan properti "font-style", dengan nilai "normal", "oblique", dan "italic". Perhatikan ini :

<HTML>
<HEAD>
<STYLE TYPE="text/css">
P {font-family: serif; font-style: italic} /* font italic */
</STYLE>
</HEAD>
<BODY>
<P CLASS="tanya">
Q. Kenapa contoh yang diberikan tidak pernah diubah?
<P CLASS="jawab">
A. Karena si Abe sudah gak mau susah membuat contoh baru
</BODY>
</HTML>

Coba juga untuk "normal" dan "oblique"!
karena ini adalah contoh yang terakhir (lho... udah selesai toh), maka akan saya berikan contoh properties yang lain untuk semakin memperkaya pengetahuan anda yaitu "font-weight". Dimana properties ini  memberikan tekanan dengan kata kunci seperti "normal", "bold", "bolder" dan "lighter", atau dengan memberikan skala antara 100 sampai 900. Lihat kembali:

<HTML>
<HEAD>
<STYLE TYPE="text/css">
.tanya {font-weight: bolder}
.jawab {font-weight: 900}
</STYLE>
</HEAD>
<BODY>
<P CLASS="tanya">
Q. Kenapa contoh pertanyaan tutorial ini tidak bervariasi?
<P CLASS="jawab">
A. Lho, jangan tanya saya. Tanya penulisnya.
</BODY>
</HTML>

Uhm... satu lagi, mungkin ini tidak begitu penting tetapi perlu (cemana sih? Kok jadi gak tegas begini). Properti yang lain yaitu "font-variant" yang mengatur tingkat KAPITAL huruf. Pilihan yang dapat diambil yaitu "small-caps" dan "normal". note : saya tidak jamin hal ini juga berlaku pada Netscape browser.

<HTML>
<HEAD>
<STYLE TYPE="text/css">
P {font-variant: small-caps}
/* mengganti semua karakter lower-case dengan karakter upper-case
*/
</STYLE>
</HEAD>
<BODY>
<P>
Q. Sekarang saya tanya tentang saran kamu kepada penulis?
<P>
A. Bagaimana kalau contohnya dibuat yang lain.
<P>
Q. Maksudnya bagaimana sih? Khan sekarang pertanyaannya sudah
saya ubah.
<P>
A. Yee... dasar tetep aja ngotot (sambil berlalu dengan cuek)
</BODY>
</HTML>

Phiuh... akhirnya selesai juga bro (sambil menarik nafas sedalam-dalamnya dengan penuh kelegaan). Mungkin kalau masih sanggup kita akan mempelajari bagaimana membuat "margins", "padding", "borders", "padding", dan "background-images" pada tutorial CSS yang lainnya.

Terima KAsih Sobat Blogger sudah menyimak semoga bermanfaat ya.................
Sobat sedang membaca artikel Aplikasi Online tentang Tutorial Style Pada CSS dan Sobat bisa menemukan artikel Tutorial Style Pada CSS ini dengan url Sobat boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Tutorial Style Pada CSS ini sangat bermanfaat bagi teman-teman, namun jangan lupa untuk meletakkan link Tutorial Style Pada CSS sumbernya.

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

0 comments:

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Free Aplikasi Full Version - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger