Pasti masih bingung dengan apa yang namanaya CSS hehe, atau ada yang udah ahli?. Bagus kalo gitu... Pokoknya Maju terus pantang mundur. Belajar dan Belajar. Oya sebelum lebih lanjut tentang Element Sytle, kamu juga dapat menambahkan element ini dalam tag HTML,
Seperti contoh berikut:
| <html> <head> <ttile>DICOBA HTML</title> </head> <body> P: Jangan lupa untuk <B STYLE="color: #FF0000; backgroundcolor: black"> Memilih saya </B> dalam pemilu kali ini <B STYLE="color: lime; background-color: black"> jangan lupa?</B> <P> J: Saya akan menepati <B STYLE="color: #FF0000; backgroundcolor: black">janaji</B> terhadap <B STYLE="color: lime; background-color: black">diri saya sendiri.</B> </body> </html> |
Hasinya silahkan coba sendiri dikomputer anda hehehe.. Nah sekarang kita mulai dengan mengatur warna huruf dan latar belakang. Kamu dapat mengerjakan ini dengan menggunakan elemen style untuk mengatur karakter kode tag dokumen. Dimulai dari yang
sederhana dulu Ok.a. Inheritance "Pewaris" :
| <html> <head> <ttile>DICOBA CSS </title> <style type="text/css" media=”all”> b { color : green; } </style> </head> <body> <b> P: Mencoba belajar <font size="+1">menjadi lebih baik </font>Maka kamu akan lebih baik esok hari? <br /> J: Karena itu merupakan sugesti terhadap diri kita sendiri.</b> </body> </html> |
b. Classes :
Kali ini saya mendefinisikan dua kelas yaitu "tanya" dan "jawab" dengan mengaplikasikan aturan CSS. Dari sini saya bisa lihat kalu kedua kelas itu tidak harus sama dan bisa di modifikasi sesuai dengan kepentingan keinginan dan kebutuhan.
| <html> <head> <style type="text/css" media=”all”> .tanya {color: red;} .jawab {color: blue;} </style> </head> <body> <p class="tanya"> P: Mau belajar lebih baik maka kamu akan lebih baik esok hari percaya? </p> <p class="jawab"> J: Karena itu merupakan <FONT CLASS="tanya">sugesti</FONT> terhadap diri sendiri </p> </body> </html> |
c. Contextual-Selector "Selektor Kontekstual"
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" media=”all”> 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 # (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" media=”all”> .blue {color: cyan; background-color: #FF8000;} .green {color: lime; background-color: black;} </style> </head> <body> <p class="blue"> Sebenarnya semua pekerjaan itu mudah! </p> <p class="green"> Setuju, tapi tak semudah mengatakannya…. </p> </body> </html> |
Kita juga dapat menambah format atribut-atribut agar web kita menjadi lebih hidup.
Misalnya, merubah warna link, menambah warna font tebal, miring, garis bawah,
memberi warna pada textbox, textarea, scrollbar, dan lain-lain.
| <html> <head> <style type="text/css" media=”all”> body { color: black; background: white; } i, u { color: red; } b { color : green; } </style> </head> <body> P: Mengapa jika kita anggap <i>suatu pekerjaan</i> itu mudah maka pekerjaan itu akan beneran menjadi<b> lebih mudah</b>? <br /> J: Karena itu merupakan <u>sugesti</u> terhadap <b>diri kita sendiri</b> </body> </html> |
Contoh Yang lain :
| <html> <head> <style type="text/css" media=”all”> .question {text-decoration: underline} /*garis bawah */ .answer {text-decoration: overline} /*garis atas text */ .repeat {text-decoration: line-through}/*garis melalui text */ .no-imagination {text-decoration: blink; font-weight: bolder} /* text berkedip */ </style> </head> <body> <p class="question"> Q. Kenapa why, tidak pernah never, selalu always? </p> <p class="answer"> A. Karena because selalu always kapan-kapan sometimes? </p> <p class="repeat"> Q. Apakah anda tau, siapa orang yang terlucu di Indonesia? </p> <p class="repeat"> A. I Don’t know, Kasino and Indro. </p> <p class="no-imagination"> Bukannya Tukul??? </p> </body> </html> |
udah Jelaskan.....?????
sumber: Widhiarta, S. Kom dan Abe Poetra serta buku2 di perpustakaan amikom.
Terimakasih sudah mengunjungi blog ini... :D
Blog ini saya buat, untuk berbagi informasi kepada teman - teman, dan sebagai rangkuman untuk diri saya sendiri. ( Semoga gak bosen Dengan Blog Saya... :D )
5 komentar:
Mantep informasinya, saya catet dulu
infonya sangat menarik sekali gan......saya tunggu info2 lainnya
Mantaap.. Thanks artikelnya.. posting lagi dong tentang CSS :D
IDR303merupakan JUDI BOLA ONLINE Terpercaya
mantap info nya sangat menarik gan
saya sangat terkesan gan
izin share ya gan
terima kasih
PROMO NEW MEMBER
JUDI BOLA ONLINE
AGEN BOLA SBO
AGEN BOLA IBC
AGEN CASINO
BANDAR BOLA
Mantap mas,terimakasih telah berbagi ilmu.
Vinyl Anti Bakteri
Vinyl Rumah Sakit
LG Medistep Allroad
Jual Step Nosing
Vinyl LG Bright
Vinyl Lantai Olahraga
Posting Komentar