CSS - macam

CSS adalah singkatan dari Cascading style sheet, CSS mendefinisikan tampilan web. Cara penulisan CSS bisa terbagi menjadi 3 bagian, yaitu: External CSS, Inline CSS, dan Internal CSS.



External CSS berarti CSS tersebut ditulis dalam suatu editor text (misalnya notepad) kemudian diimport pada bagian head di halaman Webnya, kodenya seperti ini:

misalnya nama file CSS yang ditulis “mystyle.css” dan berada satu folder dengan file Web yang akan digunakan. Bila berbeda folder maka referensi folder file CSS-nya disesuaikan pada bagian kode href=”…../…../mystyle.css”. Didalam file CSS yang digunakan tidak boleh terdapat kode lain harus kode CSS saja sesuai dengan konsep kode CSS yang akan dibahas lebih lanjut setelah ini.

Inline CSS yaitu menggunakan syntax CSS langsung pada Tag HTML pada halaman Web. Misalnya:

yang berarti paragraf diatas akan diberi style warna sienna dan margin kirinya diatur sebesar 20px dari pojok kiri browser.
Internal CSS yaitu penulisan kode CSS langsung pada bagian tag Head, penulisan seperti ini digunakan bila ingin salah satu halaman Web memiliki style yang unik untuk satu halaman. Penulisan kodenya misalnya seperti ini:

kode CSS diatas berarti untuk setiap tag hr (garis horizontal) diberi warna sienna, setiap tag p (paragraf) diberi margin kiri sebesar 20px, dan background Web adalah gambar back40.gif.
Penggunaan External CSS, Inline CSS, dan Internal CSS dapat digunakan secara bersamaan sekaligus atau satu persatu namun bila digunakan secara bersamaan ada urutan eksekusi yang bisa dipertimbangkan, urutannya adalah:
1. browser default
setting default browser akan menjadi prioritas utama, misalnya setting browser diatur agar semua huruf pada Web ber-type face arial maka semua web akan ditampilakan arial meski style aslinya bukan arial.
2. External CSS
3. Internal CSS (pada tag head)
4. Inline CSS (pada tag HTML)
jadi style yang memiliki urutan prioritas tertinggi akan meng-override style yang prioritasnya lebih rendah.
Selain aturan-aturan penulisan tersebut, CSS juga memiliki aturan penulisan kode. CSS dua bagian utama yaitu selector dan satu atau beberapa dekalarasi, misalnya:

dasar syntax CSS (w3c school)
selector biasanya element HTML yang akan diberi style. Setiap deklarasi terdiri dari property dan value.
property adalah atribut style yang ingin diubah (misalnya atribut color/warna). setiap property memiliki nilai.
contoh penulisan CSS:
p {color:red;text-align:center;}
deklarasi CSS harus berawal dan berakhir dengan semicolon ({}) dan bila ada beberapa deklarasi maka harus dipisahkan dengan tanda titik koma (;). penulisan dibawah ini bisa dilakukan agar kode lebih mudah dibaca.
p
{
color:red;
text-align:center;
}
CSS juga memfasilitasi penulisan komentar seperti pada bahasa pemrograman, komentar ini dapat memudahkan pengeditan atau pengelompokan kode CSS sesuai kebutuhan. komentar pada CSS diawali tanda /* dan diakhiri dengan tanda */ . Contohnya:
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
sekarang mari berlanjut ke CSS lanjut, sy akan membahas CSS secara lebih dalam (menurut sy), langsung ajaaa
a. CSS Id dan Class
id digunakan untuk mengaplikasikan style elemen unik pada halaman web. Id didefinidikan dengan lambang “#”. Berikut contoh penggunaan id:
misalnya style dibawah ini akan diaplikasikan ke element unik dengan id “para1″,
#para1
{
text-align:center;
color:red;
}
kemudian misalnya pada tag html ditulis seperti ini,

maka bila ditampilkan pada di browser paragraf diatas akan ditampilkan dengan warna merah dan posisinya ditengah. id ini bersifat unik yang berarti hanya bisa diaplikan untuk satu element, dalam contoh berarti tag p (
).
sebagai catatan, sebaiknya jangan menggunakan nama id dengan angka karena tidak akan bekerja di browser mozilla.
Class digunakan untuk mengelompokan style untuk beberapa element atau tag. class didefinisikan dengan tanda “.”, berikut contoh penggunaan class:
misalnya style dibawah ini akan diaplikasikan ke element dengan class “center”,
.center {text-align:center;}
kemudian pada halaman web ditulis seperti ini,


maka bila ditampilkan di browser kode diatas akan terlihat ditengah, namun bila hanya ingin paragraf saja yang ditengah, penulisan kode CSS bisa diubah menjadi seperti ini,
p.center {text-align:center;}
penggunaannya tentu bisa berbeda sesuai kebutuhan