Pewarisan, Class, dan Selector-kontekstual pada CSS

Melanjutkan kembali konsep dasar yang sudah  dipelajari : pewarisan (inheritance), kelas (classes), dan selectors-kontekstual (Contextual Selector). Coba kita bahas satu persatu :

Pewarisan (inheritance)

Pewarisan pada dasarnya berarti bagian-bagian HTML yang kekurangan untuk sfesifikasi aturan CSS dapat mengikuti/dibuat menurut aturan CSS yang menutupinya. Setiap aturan yang tidak ada  pada HTML atau ingin menggantikannya dengan aturan CSS, tetap akan mempengaruhi huruf yang ada didalam kurungan CSS (waduh... kok kayaknya makin ribet aja sih? Hehehe Lihat contoh dibawah ini !!

Pewarisan, Class, dan Selector-kontekstual pada CSS

<HTML>
<HEAD><TITLE>LEGI</TITLE></HEAD>
<STYLE TYPE="text/css">
B { color : green }
</STYLE>
<BODY>
<B> Mengapa jika kita anggap <FONT SIZE="+1">suatu pekerjaan</FONT> itu mudah maka pekerjaan itu akan beneran menjadi lebih mudah?
<P>Karena itu merupakan sugesti terhadap diri kita sendiri</B>
</BODY>
</HTML>

Baca juga :
Belajar Struktur dan kode HTML dasar. Untuk pemula
Belajar Element FORM pada HTML
Cara mudah belajar Tag Hyperlink di HTML
Belajar Tag dan Element Frameset sederhana pada HTML
Kumpulan Desain dan Script Frameset pada HTML

Nah, sekarang baru ngertikan? Tag <B> mendefinisikan warna dan menebalkan huruf dengan aturan CSS, sedangkan tag <FONT> yang notabene berada didalam lingkup CSS dapat menerapkan aturan HTML dasar tetapi tetap terpengaruh dengan kondisi warna dan tebalnya huruf. Sesekali ini juga dapat digunakan sebagai kombinasi sesuai dengan keperluan anda sendiri.

Classes :  

CSS juga mengijinkan kita untuk menyatukan elemen-elemen secara bersamaan didalam sebuah kelas (classes) dan menerapkannya aturan Style-Sheet kedalam sebuah class. Sebagai contoh :

Pewarisan, Class, dan Selector-kontekstual pada CSS

<HTML>
<HEAD><TITLE>LEGI</TITLE></TITLE>
<STYLE TYPE="text/css">
.tanya {color: red}
.jawab {color: blue}
</STYLE>
<BODY>
<P CLASS="tanya"> Mengapa jika kita anggap suatu pekerjaan itu mudah    maka pekerjaan itu akan beneran menjadi lebih mudah?
<P CLASS="jawab"> Karena itu merupakan <FONT CLASS="tanya">sugesti</FONT>  terhadap diri kita sendiri
</BODY>
</HTML>

Kali ini kita mendefinisikan dua kelas yaitu "tanya" dan "jawab" dengan mengaplikasikan aturan CSS. Dari sini kita bisa lihat kalu kedua kelas itu tidak harus sama dan bisa di modifikasi sesuai dengan kepentingan keinginan dan kebutuhan kita. Yang terpenting sekarang setidaknya kita sudah bisa membuat sebuah kelas.

Selektor Kontekstual (Contextual-Selector)

Selektor Kontekstual hampir mirip dengan pernyataan-pernyataan kondisional - deklarasi Style-Sheet yang ada akan berpengaruh jika kondisi/keadaan tertentu dijumpai. Sebagai contoh, anggap anda ingin membuat semua teks yang bold  dan italic tampil dengan  huruf arial  dan berwarna biru. Selektor-Kontekstual nya akan seperti ini :

<HEAD>
<STYLE TYPE="text/css">
B I {color: blue; font-family: Arial} /* selector ini kesemuanya untuk bold+italic text */
</STYLE>
</HEAD>

CSS menawarkan berbagai macam cara untuk mengganti warna.  Paling mudah adalah dengan menggunakan salah satu dari pre-defined warna yang ada - aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver,  teal, white, dan yellow.  Kamu juga dapat  menggunakan kombinasi warna heksadesimal dengan menambahkan atribut # (hastag).

I {color: #0000FF)
Atau nilai kombinasi RGB dalam nilai absolut terhadap persen, seperti ini :
I {color: rgb (0, 0, 255))
I {color: rgb (0%, 0%, 100%))

Kita dapat mengubah kombinasi warna sesuai dengan gaya yang kita sukai.

Pewarisan, Class, dan Selector-kontekstual pada CSS

<HTML>
<HEAD><TITLE>LEGI</TITLE></HEAD>
<STYLE TYPE="text/css">
.blue {color: cyan; background-color: #FF8000}
.green {color: lime; background-color: black}
</STYLE>
<BODY>
<P CLASS="blue"> Sebenernya semua pekerjaan itu mudah!
<P CLASS="green"> Setuju, tapi tak semudah mengatakannya
</BODY>
</HTML>

Llihat! seandainya kita lebih punya kreasi seni maka  kita akan  dapat  membuat jutaan  warna  dan memperkaya situs kita.

Mencoba Berbagai Kemungkinan 

beberapa variasi huruf. Dus, contoh di bawah ini tidak ada yang istimewa tetapi 'ntar saya tunjukkan
perbedaannya.

Pewarisan, Class, dan Selector-kontekstual pada CSS

<HTML>
<HEAD><TITLE>LEGI</TITLE></HEAD>
<STYLE TYPE="text/css"> P {font-family: "Verdana"}
</STYLE>
<BODY>
<P CLASS="tanya"> Mengapa jika kita anggap suatu pekerjaan itu mudah    maka pekerjaan itu akan beneran menjadi lebih mudah?
<P CLASS="jawab"> 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 :

Pewarisan, Class, dan Selector-kontekstual pada CSS

<HTML>
<HEAD><TITLE>LEGI</TITLE></HEAD>
<STYLE TYPE="text/css">
.tanya {font-size: xx-small} .jawab {font-size: x-large}
</STYLE>
</HEAD>
<BODY>
<P CLASS="tanya">  Mengapa jika kita anggap suatu pekerjaan itu mudah    maka pekerjaan itu akan beneran menjadi lebih mudah?
<P CLASS="jawab"> 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 :

Pewarisan, Class, dan Selector-kontekstual pada CSS

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

Coba juga untuk "normal" dan "oblique"! 
karena ini adalah contoh yang terakhir, 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:

Pewarisan, Class, dan Selector-kontekstual pada CSS

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

Satu lagi, mungkin ini tidak begitu penting tetapi perlu. 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.

Pewarisan, Class, dan Selector-kontekstual pada CSS

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

Akhirnya selesai juga bro. Mungkin kalau masih sanggup kita akan mempelajari bagaimana membuat "margins", "padding", "borders", "padding", dan "background-images" pada tutorial CSS yang berikutnya. 

0 komentar:

Post a Comment