Penulisan Css
Pada umumnya penulisan CSS, adalah seperti contoh berikut:
h1 { color: #0789de; }
Bagian sebelum tanda '{}' dinamakan selector (dalam contoh diatas adalah h1), sedangkan yang diapit oleh '{}' disebut declaration yang terdiri dari dua unsur, yaitu property dan value. Selector dalam pernyataan di atas adalah h1, sedangkan color adalah property, dan #0789de adalah value.
Selain itu ada beberapa metode penulisan atribut CSS , yaitu :
Inline Style Sheet
Yaitu CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..."dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan memengaruhi tag HTML yang lain.
Contoh penulisan CSS dengan metode Inline Style Sheet :
<html> <head> <title>Contoh Bentuk Inline </title> </head> <body bgcolor="#FFFFFF"> <p id="contoh1">Ini adalah contoh tag P tanpadiformat menggunakan CSS </p> <p id="contoh2" style="font-size:20pt">Tag P ini diformat dengan besar font 20 point </p> <p id="contoh3" style="font-size:14pt; color:red"> Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p> </body> </html>
Embedded Style Sheet
CSS didefinisikan terlebih dahulu dalam tag <style> ... </style> di atas tag <body>. Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang bersangkutan.
Contoh penggunaan CSS dengan metode Embedded Style Sheet :
<html> <head> <title>Contoh Bentuk Embedded</title> </head> <style> body {background:#0000FF; color:#FFFF00; margin-left:0.5in} h1 {font-size:18pt; color:#FF0000} p {font-size:12pt; font-family:arial; text-indent:0.5in} </style> <body> <h1 id="contoh1">Judul ini berukuran 18 dengan warna merah!</h1> <p id="contoh2">Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p> <p id="contoh3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p> </body> </html>
Selanjutnya baca Css bag 3
0 Komentar