Headlines News
Home » , » Tutorial CSS Bagian 3

Tutorial CSS Bagian 3


Aturan CSS Sekali Tulis, Pakai Bersama

Satu dari beberapa kehebatan tekhnologi css ini - dan merupakan alasan banyak orang menyukai penggunaannya - adalah memperbolehkan kita untuk mendefinisikan sebuah style-sheet global yang dapat menerapkan aturan-aturan css tersebut untuk keseluruhan dokumen-dokumen HTML pada halaman web site anda.

Keuntungannya jelas sekali, jika kita ingin mengubah tampilan situs, kita tinggal mengedit satu file saja dan hasilnya akan di refleksikan pada keseluruhan dokumen HTML yang dilink ke situ. Anggap saja anda mempunyai Style-Sheet yang diberi nama "global.css" yang diletakkan pada server "www.situskamu.com/global.css". 

Untuk memberikan pengaruh aturan Style-Sheet kesemua atau ke spesifik dokumen HTML, gampangnya tambahkan saja kode sederhana ini di dalam tag <HEAD> pada dokumen HTML anda, seperti ini :

<HEAD>
<LINK REL="stylesheet" HREF="http://www.situskamu.com/global.css"
TYPE="text/css">
</HEAD>

Dan semua aturan Style-Sheet dalam "global.css" secara automatis akan diterapkan kedalam dokumen
HTML yang ingin diberi Style-Sheet. Kamu juga dapat mengimport Style-Sheet dengan menggunakan keyword (kata-kunci) "@import", mau diberi contoh? Nih coba :

<STYLE TYPE="text/css">
@import url(http://www.situskamu.com/global.css);
P {color: yellow}
</STYLE>
kamu juga dapat menerapkan aturan CSS berdasarkan "case to case", dengan menambahkan atribut CSS
ke dalam kode HTML itu sendiri. Contohnya :
<HTML>
<HEAD>
</HEAD>
<BODY>
P: Mengapa jika kita anggap <B STYLE="color: lime; backgroundcolor:
black"> suatu pekerjaan</B> itu mudah
maka pekerjaan itu akan beneran menjadi <B STYLE="color:
lime; background-color: black"> lebih mudah</B>?
<P>
J: Karena itu merupakan <B STYLE="color: lime; backgroundcolor:
black">sugesti</B> terhadap <B STYLE="color: lime;
background-color: black">diri kita
sendiri</B>
</BODY>
</HTML>

Bisakan? Nah sekarang baru percaya.

Lebih lanjut tentang Pseudo-Giberish

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

1. Pewarisan (Inheritance) :

Pewarisan pada dasarnya berarti bagian-bagian HTML yang kekurangan untuk sfesifikasi aturan CSS dapat mengikuti/dibuat menurut aturan CSS yang menutupinya (@#$%... pasti bingungkhan dengan penjabaranya? Sama, saya juga gak ngerti apa maksudnya  tulisan ini). Pokoknya seperti inilah, 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... dasar gak professional). Udah coba aja lihat contohnya mana tau aja ngerti? Tapi janji kalo' udah ngerti kasih tau saya (lho.. dasar kalian ma gito hahahah !) :

<HTML>
<HEAD>
<STYLE TYPE="text/css">
B { color : green }
</STYLE>
</ HEAD>
<BODY>
<B>
P: Mengapa jika kita anggap <FONT SIZE="+1">suatu
pekerjaan</FONT> itu mudah
maka pekerjaan itu akan beneran menjadi lebih mudah?
<P>
J: Karena itu merupakan sugesti terhadap diri kita
sendiri</B>
</BODY>
</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. (hmm... kali ini lebih jumawa dan berwibawa
sekali ya?)

2. 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 :

<HTML>
<HEAD>
<STYLE TYPE="text/css">
.tanya {color: red}
.jawab {color: blue}
</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 <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 (udah berapa kali kata-kata ini diulang, tapi lagi-lagi cuek aja deh). Yang terpenting sekarang setidaknya kita sudah bisa membuat sebuah kelas.

3. 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>

Ayo sekarang dicoba! Apakah saya kelihatan sedang berbohong? Tentu tidak. Kebiasaan saya kalau sedang berbohong mengedip-ngedipkan mata  hehehe gak ding cuman canda. Suer!

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 # (tanda kreiss).

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.

<HTML>
<HEAD>
<STYLE TYPE="text/css">
.blue {color: cyan; background-color: #FF8000}
.green {color: lime; background-color: black}
</STYLE>
</HEAD>
<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.

Bagaimana Sobat Blogger sudah pada ngertikan pada tahap Tutorial CSS yang ke-3 ini mudah2an bisa bermanfaat ya buat Sobat Blogger Semua. Terima KAsih Sudah Menyimak.
Sobat sedang membaca artikel Aplikasi Online tentang Tutorial CSS Bagian 3 dan Sobat bisa menemukan artikel Tutorial CSS Bagian 3 ini dengan url Sobat boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Tutorial CSS Bagian 3 ini sangat bermanfaat bagi teman-teman, namun jangan lupa untuk meletakkan link Tutorial CSS Bagian 3 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