loading...
Sebagai seorang blogger, webmaster maupun yang baru kuliah di bidang IT kita harus tau apa itu CSS dan bagaimana cara penulisannya yang baik dan benar di dalam bahasa pemrograman HTML. Untuk itu pada artikel kali ini saya akan sedikit membahas tentang pengertian CSS dan contoh cara penulisan kode CSS. Silakan di simak dan jangan lupa di praktekkan.
CSS adalah singkatan dari Cascading Style Sheet yang merupakan aturan penulisan kode program untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukanlah sebuah bahasa pemrograman. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat menggunakan bahasa HTML dan XHTML.
CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Sampai sekarang ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3.
Pada penulisan scipt CSS kita sering menjumpai kode seprti di atas. Bagian pertama sebelum tanda '{}' dinamakan selector, 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.
Di dalam penulisan kode CSS terdapat dua metode penulisan, yaitu :
Untuk metode penulisan Inline Style Sheet, 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 :
Sedangkan untuk penulisan 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 Penulisan :
CSS terbagi atas dua sifat, yaitu :
Untuk sifat internal penulisan script CSS itu sendiri harus dimasukkan secara langsung ke dalam halaman website yang akan didesain. Jika ada halaman lain yang akan didesain dengan model yang sama, maka script CSS itu harus dimasukkan lagi kedalam halaman yang lain itu.
Pada sifat Eksternal kita tidak perlu memasukkan script CSS pada tiap-tiap halaman web melainkan kita hanya perlu membuat sebuah berkas khusus untuk meletakkan script CSS. Setelah itu kita tinggal membuat sebuah tautan yang menuju ke berkas tersebut. Berkas yang saya maksud merupakan file yang dibuat dengan ekstensi CSS di belakangnya. Contoh : Style.css
Sekian dulu artikel yang membahas tentang apa itu CSS dan cara penulisannya yang baik dan benar di dalam bahasa pemrograman HTML. Semoga artikel ini bermanfaat buat kita semua.
Pengertian CSS
CSS adalah singkatan dari Cascading Style Sheet yang merupakan aturan penulisan kode program untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukanlah sebuah bahasa pemrograman. Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat menggunakan bahasa HTML dan XHTML.
CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Sampai sekarang ini terdapat tiga versi CSS, yaitu CSS1, CSS2, dan CSS3.
Cara Penulisan CSS
h1 {
color: #0789de;
}
Pada penulisan scipt CSS kita sering menjumpai kode seprti di atas. Bagian pertama sebelum tanda '{}' dinamakan selector, 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.
Di dalam penulisan kode CSS terdapat dua metode penulisan, yaitu :
1. Inline Style Sheet
Untuk metode penulisan Inline Style Sheet, 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 :
<!DOCTYPE html> <html> <head> <title>Contoh Bentuk Inline </title> </head> <body bgcolor="#FFFFFF"> <p id="cth1"> Ini adalah contoh tag P tanpadiformat menggunakan CSS </p> <p id="cth2" style="font-size:20pt"> Tag P ini diformat dengan besar font 20 point </p> <p id="cth3" style="font-size:14pt; color:red"> Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p> </body> </html>
2. Embedded Style Sheet
Sedangkan untuk penulisan 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 Penulisan :
<!DOCTYPE html>
<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="cth1">Judul ini berukuran 18 dengan warna merah!</h1>
<p id="cth2">Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p>
<p id="cth3">Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru</p>
</body>
</html>
Sifat-Sifat CSS
CSS terbagi atas dua sifat, yaitu :
1. Internal
Untuk sifat internal penulisan script CSS itu sendiri harus dimasukkan secara langsung ke dalam halaman website yang akan didesain. Jika ada halaman lain yang akan didesain dengan model yang sama, maka script CSS itu harus dimasukkan lagi kedalam halaman yang lain itu.
2. Eksternal
Pada sifat Eksternal kita tidak perlu memasukkan script CSS pada tiap-tiap halaman web melainkan kita hanya perlu membuat sebuah berkas khusus untuk meletakkan script CSS. Setelah itu kita tinggal membuat sebuah tautan yang menuju ke berkas tersebut. Berkas yang saya maksud merupakan file yang dibuat dengan ekstensi CSS di belakangnya. Contoh : Style.css
Sekian dulu artikel yang membahas tentang apa itu CSS dan cara penulisannya yang baik dan benar di dalam bahasa pemrograman HTML. Semoga artikel ini bermanfaat buat kita semua.
loading...
0 Komentar Mengenal apa itu CSS dan Cara Penulisannya
Post a Comment