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> |
sederhana dulu Ok.
| <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 :
| <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“
| <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…..?????
